/* W2-#8 save-feedback route C（TASK-20260704 §3 裁定；2026-07-11 落地）：.erp-alert 家族自
   04-surfaces.css 遷入（routing 正位：alert/badge/progress → 09-status），並補齊 A 派 admin
   views 早已引用但從未定義的 --success / --info 變體（先前渲染成 base 金色＝視覺謊言）。
   本家族＝A 派（TempData 頁頂 alert）的唯一視覺 SoT；B 派 toast 走 erpFeedback（同 token 族）。
   契約：docs/AdminSaveFeedbackTokens.md；機器鎖：tools/qa/save-feedback-assert.cjs。 */
.erp-alert { padding: var(--erp-space-3); border-left: var(--erp-border-width-thick) solid var(--erp-gold-primary); border-radius: 0 var(--erp-radius-md) var(--erp-radius-md) 0; background: rgba(var(--erp-rgb-gold-primary), 0.06); }
.erp-alert--success { border-left-color: var(--erp-success); background: rgba(var(--erp-rgb-success), 0.06); }
.erp-alert--danger { border-left-color: var(--erp-danger); background: rgba(var(--erp-rgb-danger), 0.05); }
.erp-alert--warning { border-left-color: var(--erp-warning); background: rgba(var(--erp-rgb-warning), 0.06); }
.erp-alert--info { border-left-color: var(--erp-info); background: rgba(var(--erp-rgb-info), 0.06); }

/* Wave 9 — erp-badge variants 提高 specificity 為 .badge.erp-badge--* + .erp-badge--*
   蓋過 .badge / html .badge 的 base rule（同 specificity 後者勝），讓 markup
   <span class="badge erp-badge erp-badge--warning"> 仍取得 warning 視覺 */
.erp-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 3px 8px; border-radius: var(--erp-radius-xs); border: 1px solid var(--erp-border); background: var(--color-erp-context); color: var(--erp-text-secondary); font-size: 12px; font-weight: 800; line-height: 1; }
.badge.erp-badge--success, .erp-badge--success { background: rgba(var(--erp-rgb-success),.14) !important; border-color: rgba(var(--erp-rgb-success),.46) !important; color: var(--erp-ds-success-text) !important; }
.badge.erp-badge--warning, .erp-badge--warning { background: rgba(var(--erp-rgb-warning),.14) !important; border-color: rgba(var(--erp-rgb-warning),.48) !important; color: var(--erp-ds-warning-text) !important; }
.badge.erp-badge--danger, .erp-badge--danger { background: rgba(var(--erp-rgb-danger),.14) !important; border-color: rgba(var(--erp-rgb-danger),.5) !important; color: var(--erp-ds-danger-text-faint) !important; }
.badge.erp-badge--gold, .erp-badge--gold { background: rgba(var(--erp-rgb-gold-dark),.15) !important; border-color: rgba(var(--erp-rgb-gold-dark),.38) !important; color: var(--erp-gold-light) !important; }
.badge.erp-badge--muted, .erp-badge--muted { background: rgba(var(--erp-rgb-muted),.10) !important; border-color: rgba(var(--erp-rgb-muted),.22) !important; color: var(--erp-text-muted) !important; }
.badge.erp-badge--accent, .erp-badge--accent { background: rgba(var(--erp-rgb-gold-primary), 0.08) !important; border-color: var(--erp-gold-primary) !important; color: var(--erp-gold-primary) !important; }
.badge.erp-badge--info, .erp-badge--info { background: rgba(var(--erp-rgb-info),.14) !important; border-color: rgba(var(--erp-rgb-info),.42) !important; color: var(--erp-ds-info-text) !important; }
.erp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.text-success { color: var(--erp-ds-success-text) !important; }
.text-warning { color: var(--erp-ds-warning-text) !important; }
.text-danger { color: var(--erp-ds-danger-text-faint) !important; }
.text-info { color: var(--erp-ds-info-text) !important; }
.text-muted { color: var(--erp-text-muted) !important; }
.text-white { color: var(--erp-text-primary) !important; }
.text-gold, .text-gold-light { color: var(--erp-gold-light) !important; }
.bg-danger { background: var(--erp-danger) !important; color: var(--erp-text-primary) !important; }

/* Wave 9 (A1 Badge unify) 2026-05-15 — Bootstrap badge.bg-* 視覺對齊 erp-badge--*
   原狀：Bootstrap .badge.bg-* 用實心色 (gradient bg-success solid green 等) 太刺眼
   修法：背景 + 邊框 + 字色全部對齊 erp-badge--* 低調 token 化版本
   結果：頁面內混用 .badge.bg-* 和 .erp-badge--* 視覺一致 */
.badge, html .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: var(--erp-radius-xs);
  border: 1px solid var(--erp-border) !important;
  background: var(--color-erp-context) !important;
  color: var(--erp-text-secondary) !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.badge.text-bg-success, .badge.bg-success {
  background: rgba(var(--erp-rgb-success), 0.14) !important;
  border-color: rgba(var(--erp-rgb-success), 0.46) !important;
  color: var(--erp-ds-success-text) !important;
}
.badge.text-bg-warning, .badge.bg-warning {
  background: rgba(var(--erp-rgb-warning), 0.14) !important;
  border-color: rgba(var(--erp-rgb-warning), 0.48) !important;
  color: var(--erp-gold-light) !important;
}
.badge.text-bg-danger, .badge.bg-danger {
  background: rgba(var(--erp-rgb-danger), 0.14) !important;
  border-color: rgba(var(--erp-rgb-danger), 0.50) !important;
  color: var(--erp-ds-danger-text-faint) !important;
}
.badge.text-bg-dark, .badge.bg-dark {
  background: var(--color-erp-context) !important;
  border-color: var(--erp-border) !important;
  color: var(--erp-text-secondary) !important;
}
.badge.text-bg-secondary, .badge.bg-secondary {
  background: rgba(var(--erp-rgb-muted), 0.10) !important;
  border-color: rgba(var(--erp-rgb-muted), 0.22) !important;
  color: var(--erp-text-muted) !important;
}
.badge.text-bg-info, .badge.bg-info {
  background: rgba(var(--erp-rgb-info), 0.14) !important;
  border-color: rgba(var(--erp-rgb-info), 0.42) !important;
  color: var(--erp-ds-info-text) !important;
}

/* Override site.css .cyber-text-glow-gold pure white */
.cyber-text-glow-gold, html .cyber-text-glow-gold { color: var(--erp-gold-light) !important; text-shadow: none !important; }

/* P1 Accessibility: status badge 加 icon prefix（color-not-only WCAG 1.4.1） */
/* W2.3 icon migration 2026-05-30: 6 raw unicode glyphs -> FontAwesome 5 Free Solid codepoints. */
.badge.bg-success::before, .badge.text-bg-success::before { content: "\f00c\00a0"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.9; }
.badge.bg-warning::before, .badge.text-bg-warning::before { content: "\f071\00a0"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.9; }
.badge.bg-danger::before, .badge.text-bg-danger::before { content: "\f00d\00a0"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.9; }
.erp-badge--success::before { content: "\f00c\00a0"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.9; }
.erp-badge--warning::before { content: "\f071\00a0"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.9; }
.erp-badge--danger::before { content: "\f00d\00a0"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.9; }
.erp-badge--info::before { content: "\f05a\00a0"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.9; }

/* P1 Sidebar nav active 加 left-border 強化 (不只靠顏色) */
.erp-nav-link.is-active, .pt-nav-link.is-active { border-left: 3px solid var(--erp-gold-primary); }

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1 / Phase 1b-iii Batch A (2026-05-13)
 * Migrated from erp-tailwind.css S13 (alert).
 * Bootstrap-named .alert variants use cyber-mandarin tokens directly.
 * ─────────────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--erp-radius-sm);
  border: 1px solid var(--erp-border);
  background: var(--color-erp-context);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--erp-text-primary);
}
.alert.alert-secondary,
.alert.alert-dark,
.alert.alert-info {
  border-color: var(--erp-border);
  background: var(--color-erp-context);
  color: var(--erp-text-muted);
}
.alert.alert-warning {
  border-color: color-mix(in oklab, var(--erp-gold-primary) 45%, transparent);
  background: color-mix(in oklab, var(--erp-gold-primary) 10%, transparent);
  color: var(--erp-gold-light);
}
.alert.alert-success {
  border-color: color-mix(in oklab, var(--erp-success) 45%, transparent);
  background: color-mix(in oklab, var(--erp-success) 10%, transparent);
  color: #a7f3d0;
}
.alert.alert-danger {
  border-color: color-mix(in oklab, var(--erp-danger) 50%, transparent);
  background: color-mix(in oklab, var(--erp-danger) 10%, transparent);
  color: #fecaca;
}

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1 / Phase 1b-iii Batch B (2026-05-13)
 * Migrated from erp-tailwind.css S9 (badge / bg / text / fw / small).
 * Bootstrap-named utility class get cyber-mandarin overrides using tokens.
 * Existing 09-status.css color rules above with !important still win where
 * present (e.g., .text-success); these complete the missing variants.
 * ─────────────────────────────────────────────────────────────────────── */
.badge,
.bg-light,
.bg-white {
  border: 1px solid var(--erp-border);
  background: var(--color-erp-context);
  color: var(--erp-text-primary);
}
.bg-dark,
.bg-secondary {
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  color: var(--erp-text-primary);
}
.bg-primary,
.bg-warning {
  border: 1px solid color-mix(in oklab, var(--erp-gold-primary) 45%, transparent);
  background: color-mix(in oklab, var(--erp-gold-primary) 15%, transparent);
  color: var(--erp-gold-light);
}
.bg-success {
  border: 1px solid color-mix(in oklab, var(--erp-success) 45%, transparent);
  background: color-mix(in oklab, var(--erp-success) 15%, transparent);
  color: #a7f3d0;
}
.bg-info {
  border: 1px solid var(--erp-border);
  background: var(--erp-surface);
  color: var(--erp-gold-light);
}
.text-primary,
.text-warning {
  color: var(--erp-gold-light);
}
.text-light {
  color: var(--erp-text-primary);
}
.text-dark {
  color: var(--erp-text-inverse);
}
.small {
  font-size: 0.875rem;
  line-height: 1.35rem;
}
.fw-semibold,
.fw-bold {
  font-weight: 700;
}
.fw-black {
  font-weight: 900;
}

/* Badge variants — dark surface + pill shape (combined with .progress in Tailwind original) */
.text-bg-light,
.badge.text-bg-light,
.badge.bg-light,
.badge.text-bg-secondary,
.badge.bg-secondary,
.badge.text-bg-dark,
.badge.bg-dark,
.badge.text-bg-success,
.badge.bg-success,
.badge.text-bg-primary,
.badge.bg-primary,
.badge.text-bg-warning,
.badge.bg-warning,
.badge.text-bg-danger,
.badge.bg-danger,
.badge.text-bg-info,
.badge.bg-info {
  overflow: hidden;
  border-radius: 9999px;
  background: var(--erp-surface);
}

/* Progress bar (paired with badge shape) */
.progress {
  overflow: hidden;
  border-radius: 9999px;
  background: var(--erp-surface);
}
.progress-bar {
  height: 100%;
  border-radius: 9999px;
  transition: width 200ms;
}
/* Thin variant — table-cell progress keeps row height compact (S2 對帳可視性) */
.progress.progress--thin { height: var(--erp-progress-thin); }

/* ───────────────────────────────────────────────────────────────────────
 * Slice 2 Phase 2b-2 (2026-05-13) — admin-alert-* (Admin/Index alerts)
 * Migrated from site.css L546-583 + L3447-3456 (duplicates merged).
 * Used by Admin/Index hub alert list.
 * ─────────────────────────────────────────────────────────────────────── */
.admin-alert-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.admin-alert-item {
  border: 1px solid var(--erp-border-gold-hairline);
  border-radius: 12px;
  background: rgba(var(--erp-rgb-admin-alert-bg), 0.84);
  padding: 0.7rem 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.admin-alert-item.is-info { border-color: rgba(var(--erp-rgb-admin-alert-info), 0.45); }
.admin-alert-item.is-warning { border-color: rgba(var(--erp-rgb-admin-alert-warning), 0.58); }
.admin-alert-item.is-danger { border-color: rgba(var(--erp-rgb-admin-alert-danger), 0.62); }
.admin-alert-title { font-weight: 700; margin-bottom: 0.15rem; }
.admin-alert-desc { font-size: 0.88rem; color: var(--erp-text-secondary); }

/* Stage B-2 (2026-05-15): card with semantic status border-left
   Per ADR §5 verdict 「共用」 — composite (border-left + color) component primitive,
   not atomic utility. Used on .erp-card to indicate info/success/warning/danger status. */
.erp-card--status-info    { border-left: var(--erp-border-width-thick) solid var(--erp-info); }
.erp-card--status-success { border-left: var(--erp-border-width-thick) solid var(--erp-success); }
.erp-card--status-warning { border-left: var(--erp-border-width-thick) solid var(--erp-warning); }
.erp-card--status-danger  { border-left: var(--erp-border-width-thick) solid var(--erp-danger); }

/* Stepline — horizontal pill list for multi-step status indicators.
   Promoted from masters-customers.css (4 consumers: Catalog, Categories, Customers, WarehousesWorkstation). */
.erp-stepline { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--erp-space-2); flex-wrap: wrap; font-size: var(--erp-font-size-sm); }
.erp-stepline > li { padding: var(--erp-space-1) var(--erp-space-3); border-radius: var(--erp-radius-pill); background: rgba(var(--erp-rgb-surface-muted), 0.12); color: var(--erp-color-text-muted); border: var(--erp-border-width-hairline) solid rgba(var(--erp-rgb-border-muted), 0.08); }
.erp-stepline > li.is-current { background: rgba(var(--erp-rgb-accent), 0.15); color: var(--erp-color-accent); border-color: rgba(var(--erp-rgb-accent), 0.4); font-weight: 600; }
.erp-stepline > li.is-done { background: rgba(var(--erp-rgb-success), 0.12); color: var(--erp-color-success); border-color: rgba(var(--erp-rgb-success), 0.3); }