/*
 * public/assets/css/status-badge.css
 * StatusBadge 组件样式（与设计师 DESIGN.md / design-tokens.json 对齐）
 * 结构由 app/helpers.php 的 status_badge() 输出：圆点 + 文字，不在徽标内嵌图标。
 *
 * 对比度合规（WCAG AA ≥4.5:1，P0 #1）：徽标文字改用各语义色"深一档"强色，
 * 在浅 soft 底上达标；dot 用 currentColor 自动跟随。
 *
 * 依赖的设计 Token（须由 design-tokens.json 提供，命名空间 --color-* / --radius-*）：
 *   --radius-pill
 *   --color-border                (1px 发丝边，可选装饰)
 *   --color-neutral-soft
 *   --color-primary-soft          --color-primary-hover(#1D4ED8, 已存在，复用)
 *   --color-success-soft          --color-success-strong(#15803D)
 *   --color-danger-soft           --color-danger-strong(#B91C1C)
 *   --color-warning-soft          --color-warning-strong(#B45309)
 *   --color-text-secondary(#334155)   ← 新增引用，请 design-tokens.json 同步（见下）
 *
 * 兜底策略：所有"强色"均带与 design-tokens 一致的兜底 hex，保证 Token 未就绪时
 * 对比度仍达标（CSS 变量存在时以 Token 为准，变量缺失时才用兜底）。
 */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 510;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid var(--color-border, #E2E8F0); /* 发丝边：提升与画布区分，不影响对比度 */
}

.status-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor; /* 随徽标 color（即对应 --color-* 强色）自动变色 */
  flex: none;
}

.status-pending   { color: var(--color-text-secondary, #334155); background: var(--color-neutral-soft); }
.status-arranged  { color: var(--color-primary-hover, #1D4ED8);  background: var(--color-primary-soft); }
.status-published { color: var(--color-success-strong, #15803D);  background: var(--color-success-soft); }
.status-rejected  { color: var(--color-danger-strong, #B91C1C);   background: var(--color-danger-soft); }
.status-aftersale { color: var(--color-warning-strong, #B45309);  background: var(--color-warning-soft); }
.status-cancelled { color: var(--color-text-secondary, #334155);  background: var(--color-neutral-soft); text-decoration: line-through; }