/* ============================================================================
   库存展示（方案 C：本地快照）· st-stock-v1.css
   ----------------------------------------------------------------------------
   渲染逻辑在 st-commerce-v2.js 的 stockBadge() / stockFreshness() /
   stockUnitLine() / stockCardChip() / workbenchStockPanel()。

   口径（用户 2026-09-24 定）：
     · 客户 / 游客 —— 商品文字行显示交付参考，不显示库存标签；
     · 员工       —— 四态（现货／库存紧张／缺货／待确认）+ 数量及时效；
     · unknown（不在快照里）—— 交期待人工确认，不能冒充现货或缺货。

   配色沿用主题变量与项目既有色：
     绿 #176b3a（已确认文字）、橙 #c2410c / #b45309（警告）、品牌蓝 #081f80。
   当前页面保持浅色表面，系统深色偏好不单独提亮库存文字。
   ============================================================================ */

/* ---------- 库存药丸 ---------- */
.stock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.stock-chip > i {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
/* 可售量：只给员工。数字用等宽数位，避免三行并排时跳动 */
.stock-chip > b {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding-left: 6px;
  border-left: 1px solid currentColor;
  opacity: 1;
}

.stock-chip[data-stock="in"] { color: #176b3a; border-color: color-mix(in srgb, #1f8a4c 30%, transparent); background: color-mix(in srgb, #1f8a4c 10%, transparent); }
.stock-chip[data-stock="low"] { color: #b45309; border-color: color-mix(in srgb, #b45309 32%, transparent); background: color-mix(in srgb, #b45309 12%, transparent); }
.stock-chip[data-stock="out"] { color: #c2410c; border-color: color-mix(in srgb, #c2410c 30%, transparent); background: color-mix(in srgb, #c2410c 10%, transparent); }
.stock-chip[data-stock="unknown"] { color: var(--muted, #6b7280); border-color: color-mix(in srgb, var(--ink, #1c1c1c) 16%, transparent); background: color-mix(in srgb, var(--ink, #1c1c1c) 4%, transparent); font-weight: 500; }

/* ---------- 「库存更新于 X 分钟前」（仅员工） ---------- */
.stock-freshness {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.4;
  opacity: .6;
  white-space: nowrap;
}
.stock-freshness[data-stale="1"] { color: #b45309; opacity: 1; }
.stock-freshness .stock-age { font-variant-numeric: tabular-nums; }

/* ---------- 商品详情页：「单位」那一行之后、价格档位之前 ---------- */
/* ⚠️ 视觉位置由 **DOM 顺序**决定，别想着用 order 微调：
   详情弹层同时带 .commerce-page 与 .page-detail，而 st-density-v5 的
   `.commerce-page.page-detail .detail-content>*{order:0}` 会把 st-material-v3 里
   那一套 order:0..7 全部清零（特异度更高、且在 material-v3 之后加载）。
   新增区块只要插在模板里对的位置，出现在对的位置。 */
.stock-line,
.detail-content > .stock-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* 上 10px / 下 16px，故意不对称：
     这行是**所选单位的读数**（150 个 / 0.1 箱），语义上属于「选择单位」那一块 ⇒ 上面收紧；
     价格档位是另一组卡片 ⇒ 下面留开。
     ⚠️ 下面这段间距**只能由这里提供**：`.page-detail .price-tiers` 的 margin-top 被
        st-reference-v6（同特异度、但比 st-layout-v4 后加载）覆盖成了 0，
        所以这里一旦写成 0，库存行就会和价格档位**贴在一起**
        （2026-09-25 用户截图报的就是这个：贴住了）。 */
  margin: 10px 0 16px;
}

/* ---------- 商品列表卡片角标（只在「非有货」时出现） ---------- */
/* .goods-index 在左上角，这里固定右上角，两者不打架。
   ⚠️ `.goods-section .goods-index{display:none}`（st-reference-v6）把编号藏了，
      角标仍要显示 —— 所以不要依赖那个位置。 */
.goods-stock {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.goods-stock > i { width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor; }
.goods-stock[data-stock="low"] { color: #b45309; background: color-mix(in srgb, #fff 78%, #b45309); }
.goods-stock[data-stock="out"] { color: #c2410c; background: color-mix(in srgb, #fff 78%, #c2410c); }
/* 缺货卡片把图片稍微压暗，扫一眼就能跳过 —— 但要留住商品轮廓，别做成「加载失败」的样子 */
.goods-card[data-stock="out"] .goods-image img { filter: saturate(.5) opacity(.72); } /* Employee cards only receive this state. */

/* Customer lead times reuse product text rows; no warning badge or image overlay. */
.delivery-reference{display:block;color:var(--muted);font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;}
.goods-copy>.delivery-reference{margin:4px 0 8px;}
.product-copy>.delivery-reference{margin-top:4px;}
.stock-line>.delivery-reference{display:inline;}
.delivery-summary details{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.6;}
.delivery-summary details p{margin:8px 0;}
.delivery-summary .stock-alert-note{opacity:1;color:var(--muted);font-size:12px;}
.delivery-staff-evidence{display:block;}
.flow-quote .delivery-summary{margin:12px 0 0;padding:0;border:0;background:none;}

/* ---------- 报价助手：行内库存 + 候选行库存 ---------- */
.quote-line-badge-row { gap: 8px; flex-wrap: wrap; align-items: center; }
.quote-candidate-price .stock-chip {
  margin-top: 2px;
  padding: 3px 8px;
  font-size: 10.5px;
  gap: 5px;
}
.quote-candidate-price .stock-chip > b { padding-left: 5px; }

/* ---------- 内部工作台 · 库存快照状态卡片 ---------- */
/* ⚠️ 必须写 `.commerce-dialog.page-workbench` 深选择器：旧样式表
   （st-reference-v6 / st-density-v5）特异度更高，裸类名会被压掉。 */
.commerce-dialog.page-workbench .workbench-stock-body { margin-top: 12px; }
.commerce-dialog.page-workbench .workbench-stock-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
}
.commerce-dialog.page-workbench .workbench-stock-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink, #1c1c1c) 5%, transparent);
}
.commerce-dialog.page-workbench .workbench-stock-cell > span { font-size: 10.5px; letter-spacing: .02em; opacity: .55; }
.commerce-dialog.page-workbench .workbench-stock-cell > strong { font-size: 14px; font-weight: 650; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.commerce-dialog.page-workbench .workbench-stock-cell > strong[data-tone="ok"] { color: #176b3a; }
.commerce-dialog.page-workbench .workbench-stock-cell > strong[data-tone="warn"] { color: #b45309; }
.commerce-dialog.page-workbench .workbench-stock-cell > strong[data-tone="busy"] { color: var(--concept-blue, #001c81); }
.commerce-dialog.page-workbench .workbench-stock-cell > small { font-size: 11px; line-height: 1.5; opacity: .6; overflow-wrap: anywhere; }
.commerce-dialog.page-workbench .workbench-stock-cell > small.is-error { color: #c2410c; opacity: 1; }

/* ---------- 提交询价后的库存提示（只提示、不阻断） ---------- */
/* 用信息色（品牌蓝）而不是错误红：询价单**已经提交成功**，这不是失败提示。
   做成红色会让客户以为下单失败、去重复提交。 */
.stock-alert {
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, #001c81 16%, transparent);
  border-left: 3px solid #001c81;
  border-radius: 12px;
  background: color-mix(in srgb, #001c81 5%, transparent);
}
.stock-alert h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: #001c81; }
/* 2026-09-26：提示收成**一句模糊话术**（「有 N 款商品的库存需与您确认，业务员会尽快联系您」）。
   原来的 `.stock-alert ul/li/.stock-alert-names`（逐条列件数 + 商品名）随文案一起删掉 ——
   提示写得越细，客户越读成「这家很缺货」，而实际情况只是需要业务员复核一次。
   件数是动态的，由 i18n 的 `{0}` 模板词条兜住（见 st-locale-v3.js 的 stockTerms）。 */
.stock-alert-lead { margin: 0; font-size: 12.5px; line-height: 1.75; overflow-wrap: anywhere; }
.stock-alert-note { margin: 10px 0 0; font-size: 11px; line-height: 1.6; opacity: .6; }
/* 这一栏与**下方内容**之间要留出空隙（用户 2026-09-26 报「贴在一起」）。
   ⚠️ 不能只靠邻居的 margin-top：`.contact-block` 自带 22px，但联系渠道未配置时
      它整块不渲染（st-contact-v1.js 不回填 content），此时紧跟上来的就是 `.success-actions`，
      而 `.success-actions`（st-checkout-v2.css）**没有** margin-top ⇒ 按钮直接贴住提示框。
      用 `~`（通用兄弟）而不是 `+`：中间隔着谁都能兜住。 */
.stock-alert ~ .contact-block { margin-top: 22px; }
.stock-alert ~ .success-actions { margin-top: 26px; }

/* ---------- 目录工具条：「只看有货」开关 ---------- */
/* 位置：工具条里、排序下拉左边（见 st-commerce-v2.js 的 catalogToolbar.innerHTML）。
   工具条只在 .catalog-mode 下渲染（st-refinement-v2 里非目录态整条 display:none），
   所以首页态不用另做处理。 */
.stock-only-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--ink, #1c1c1c) 15%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #6b7280);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
/* 空心点 = 未开启，填实 = 已开启。比换背景色更省横向空间，也更容易一眼扫到。 */
.stock-only-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.stock-only-toggle[aria-pressed="true"] {
  color: var(--blue, #001c81);
  border-color: color-mix(in srgb, var(--blue, #001c81) 36%, transparent);
  background: color-mix(in srgb, var(--blue, #001c81) 8%, transparent);
}
.stock-only-toggle[aria-pressed="true"]::before { background: currentColor; }


/* ---------- 窄屏 ---------- */
@media (max-width: 720px) {
  /* 详情页：药丸和时效允许换两行更省横向空间，别把「库存更新于 X 分钟前」挤成竖排。
     间距不在这里重复声明，跟基础规则走（避免两处漂移）。 */
  .stock-line,
  .detail-content > .stock-line { gap: 8px; }
  .stock-chip { padding: 4px 9px; font-size: 11px; }
  .stock-freshness { font-size: 10.5px; white-space: normal; }
  .goods-stock { top: 8px; right: 8px; padding: 2px 7px; font-size: 9px; }
  /* 工具条在窄屏是 flex + wrap：开关别把「结果文案」挤换行，跟着一起缩小 */
  .stock-only-toggle { min-height: 30px; padding: 4px 10px; font-size: 11.5px; }
  .commerce-dialog.page-workbench .workbench-stock-grid { grid-template-columns: minmax(0, 1fr); }
}