.erp-page-header, .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--erp-space-4); padding-bottom: var(--erp-space-6); border-bottom: 1px solid var(--erp-border); }
.erp-page-header__kicker, .erp-kicker { color: var(--erp-gold-primary); font-size: 12px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.erp-page-title, .page-title { margin: 0; color: var(--erp-text-primary); font-size: 28px; font-weight: 900; line-height: 1.2; }
.erp-page-subtitle, .page-subtitle { max-width: 82ch; color: var(--erp-text-muted); font-size: 14px; margin: 4px 0 0; }
/* Wave 3 (P1-D + P3-B) — Card border + elevation 改善
   舊：1px border var(--erp-border) 在黑底太弱 / 單一 shadow
   新：相同 border + inset 微金高光（模擬光源從上方）+ 改 shadow-2 token
   黑金低調：細邊 + 上緣 1px 暖金高光 + 中等陰影 */
.erp-card, .erp-panel, .erp-surface, .erp-ds-card, .erp-ds-panel, .erp-ds-surface { background: var(--erp-card); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); color: var(--erp-text-secondary); box-shadow: var(--erp-shadow-2, var(--erp-shadow-card)), inset 0 1px 0 rgba(var(--erp-rgb-gold-primary), 0.05); overflow: hidden; }
/* §1.1 section-card consistency — align bare Bootstrap `.card` to the canonical
   section-card geometry (radius-lg + token surface/border) so pages mixing
   <div class="card"> with .erp-card / .erp-list-shell / .erp-filter-shell read as a
   UNIFORM set. Overrides the legacy site.css .card defs (16px radius + gradient bg)
   via load order. `thin` (not 1px) per Rule 1; no overflow:hidden (Bootstrap .card
   hosts collapse/dropdowns — avoid clipping); box-shadow left to existing rules. */
.card { background: var(--erp-card); border: thin solid var(--erp-border); border-radius: var(--erp-radius-lg); }
/* Bootstrap's legacy card header still carries a cool navy gradient in
   site.css. Own the complete section-card surface here so the shared
   blackgold grammar stays warm and token-driven in every color mode. */
.card > .card-header {
  background: var(--erp-surface);
  border-bottom: thin solid var(--erp-border);
  color: var(--erp-text-primary);
}
.card > .card-header h5,
.card > .card-header h6,
.card > .card-header strong {
  color: var(--erp-text-primary);
}
.erp-card:hover, .erp-panel:hover, .erp-surface:hover { border-color: var(--erp-gold-dark); box-shadow: var(--erp-shadow-2, var(--erp-shadow-card)), inset 0 1px 0 rgba(var(--erp-rgb-gold-primary), 0.10), 0 4px 20px rgba(var(--erp-rgb-gold-dark), 0.10); }
.erp-card__header, .erp-card-header, .erp-ds-surface__header { display: flex; align-items: center; justify-content: space-between; gap: var(--erp-space-4); padding: var(--erp-space-3) var(--erp-space-4); background: var(--erp-surface); border-bottom: 1px solid var(--erp-border); color: var(--erp-text-primary); font-weight: 800; }
.erp-card__body, .erp-card-body, .erp-ds-surface__body { padding: var(--erp-space-4); }
.erp-card__footer { padding: var(--erp-space-4); border-top: 1px solid var(--erp-border); background: var(--erp-ds-bg-panel-muted); }
.erp-metric-card { background: var(--erp-card); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); padding: 20px; transition: transform var(--erp-motion-base), border-color var(--erp-motion-base), box-shadow var(--erp-motion-base); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--erp-space-2); min-width: 0; }
.erp-metric-card:hover { border-color: var(--erp-gold-dark); box-shadow: var(--erp-shadow-gold); transform: translateY(-2px); }
.erp-metric-card__value { font-size: 24px; font-weight: 900; color: var(--erp-gold-light); line-height: 1.1; flex-shrink: 0; text-shadow: none; min-width: 0; text-align: left; font-family: var(--erp-font-body); font-variant-numeric: tabular-nums; }
/* Wave 8 (A3 Hero metric hierarchy) 2026-05-15 — primary metric 視覺權重提升
   原因：用戶反饋 hero metric pill 全部視覺權重一致、看不出主要資訊
   套法：在 1 個 hero 大數字加 .erp-metric-card--primary；其他 secondary 加 --secondary */
.erp-metric-card--primary { border-color: var(--erp-gold-dark); background: linear-gradient(180deg, var(--erp-card) 0%, var(--erp-ds-bg-panel-muted) 100%); box-shadow: var(--erp-shadow-2, var(--erp-shadow-card)), inset 0 1px 0 rgba(var(--erp-rgb-gold-primary), 0.10); flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--erp-space-2); }
.erp-metric-card--primary .erp-metric-card__value { font-size: 36px; color: var(--erp-gold-primary); text-shadow: 0 0 24px rgba(var(--erp-rgb-gold-primary), 0.15); text-align: left; min-width: 0; }
.erp-metric-card--primary .erp-metric-card__label { color: var(--erp-gold-light); font-size: 15px; }
.erp-metric-card--primary .erp-metric-card__divider { display: none; }
.erp-metric-card--primary .erp-metric-card__content { width: 100%; }
.erp-metric-card--secondary .erp-metric-card__value { font-size: 20px; color: var(--erp-text-primary); font-weight: 700; }
.erp-metric-card--secondary .erp-metric-card__label { color: var(--erp-text-secondary); font-size: 13px; font-weight: 700; }
.erp-metric-card__divider { display: none; }
.erp-metric-card__content { min-width: 0; width: 100%; }
.erp-metric-card__label { color: var(--erp-text-primary); font-size: 14px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.erp-metric-card__meta { margin-top: 3px; color: var(--erp-text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* warning state — e.g. a non-zero drift count (canonical; lifted from page-local
   admin-configs-hub-summary during TASK-20260621 convergence so the shared
   _AdminMetricStrip partial renders the emphasis on any page). */
.erp-metric-card.is-warning { border-color: var(--erp-warning); }
.erp-metric-card.is-warning .erp-metric-card__value { color: var(--erp-warning); }
.erp-context-pill { display: inline-flex; align-items: center; gap: var(--erp-space-2); padding: 4px 12px; border: 1px solid var(--erp-border); border-radius: var(--erp-radius-sm); background: var(--color-erp-context); color: var(--erp-text-secondary); font-size: 14px; white-space: nowrap; }
.erp-context-pill span, .erp-context-pill__label { color: var(--erp-text-muted); font-weight: 800; }
.erp-context-pill strong, .erp-context-pill__value { color: var(--erp-text-primary); font-weight: 900; }
/* Wave 15 — el-select 嵌在 context-pill 內（用於分頁「每頁 N 筆」）需 min-width
   避免被 strong 元素擠壓成只剩 dropdown arrow（user 截圖：看不見選項） */
.erp-context-pill .el-select, .erp-context-pill strong .el-select { min-width: 76px; }
.erp-context-pill .el-select .el-input__inner { min-width: 56px; }
.erp-context-pill--accent { border-color: var(--erp-gold-primary); background: rgba(var(--erp-rgb-gold-primary), 0.05); }
.erp-context-pill--accent strong, .erp-context-pill--accent .erp-context-pill__value { color: var(--erp-gold-primary); }
.erp-workspace-grid, .admin-overview-workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--erp-space-3); }
.erp-workspace-card { width: 100%; text-align: left; background: var(--erp-card); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); padding: 14px; color: var(--erp-text-secondary); transition: border-color var(--erp-motion-base), background var(--erp-motion-base), transform var(--erp-motion-base); cursor: pointer; }
.erp-workspace-card:hover { border-color: var(--erp-gold-dark); transform: translateY(-1px); }
.erp-workspace-card.is-active, .erp-workspace-card[aria-pressed='true'] { border-color: var(--erp-gold-primary); background: rgba(var(--erp-rgb-gold-primary), 0.04); }
.erp-workspace-card { position: relative; }
.erp-workspace-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--erp-space-3); }
.erp-workspace-card__label { color: var(--erp-text-primary); font-size: 14px; font-weight: 800; flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.erp-workspace-card.is-active .erp-workspace-card__label { color: var(--erp-gold-primary); }
.erp-workspace-card__metric { color: var(--erp-gold-light); font-size: 18px; font-weight: 900; flex-shrink: 0; font-family: var(--erp-font-mono); font-variant-numeric: tabular-nums; line-height: 1.1; }
/* S-D D2 (UCP-FULL-20260516)：workspace card 改導流入口 affordance（取代重播 hero 數字的 __metric）。token 化合規 Rule 1。 */
.erp-workspace-card__enter { color: var(--erp-text-dim); font-size: var(--erp-text-body); flex-shrink: 0; line-height: 1.1; transition: color var(--erp-motion-fast); }
.erp-workspace-card:hover .erp-workspace-card__enter,
.erp-workspace-card.is-active .erp-workspace-card__enter { color: var(--erp-gold-primary); }
.erp-workspace-card__sub { margin-top: 6px; color: var(--erp-text-muted); font-size: 12px; line-height: 1.4; }
.erp-workspace-card__status-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--erp-warning); box-shadow: 0 0 0 3px rgba(var(--erp-rgb-warning), 0.18); }
.erp-focus-panel, .erp-support-panel { background: var(--erp-card); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); padding: var(--erp-space-4); }
.erp-support-panel { color: var(--erp-text-muted); background: var(--erp-ds-bg-panel-muted); }
/* .erp-alert family moved to 09-status.css — W2-#8 2026-07-11 (routing: alert/badge/progress
   → 09-status; the success/info variants views referenced were never defined here). */
.erp-empty-state, .erp-loading-state { display: grid; place-items: center; gap: var(--erp-space-2); min-height: 140px; padding: var(--erp-space-6); color: var(--erp-text-muted); text-align: center; border: 1px dashed var(--erp-border); border-radius: var(--erp-radius-lg); background: var(--erp-ds-bg-panel-muted); }
.erp-toolbar, .erp-filter-bar, .erp-ds-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--erp-space-2); padding: var(--erp-space-3) var(--erp-space-4); background: var(--erp-card); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); }
@media (min-width: 1024px) { .erp-workspace-grid, .admin-overview-workspace-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .erp-workspace-grid, .admin-overview-workspace-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.erp-toolbar__meta { display: flex; align-items: center; gap: var(--erp-space-3); flex-wrap: wrap; min-width: 0; color: var(--erp-text-muted); font-size: 14px; }
.erp-toolbar__meta strong { color: var(--erp-gold-light); font-weight: 800; }
.erp-toolbar__actions { display: flex; align-items: center; gap: var(--erp-space-2); flex-wrap: wrap; }
.erp-tenant-context-chip { display: inline-flex; align-items: center; gap: var(--erp-space-2); padding: 4px 10px; border: 1px solid var(--erp-border); border-radius: var(--erp-radius-sm); background: var(--erp-card); color: var(--erp-text-secondary); font-size: 12px; }
.erp-tenant-context-chip.is-enabled { border-color: var(--erp-gold-primary); background: rgba(var(--erp-rgb-gold-primary), 0.06); color: var(--erp-gold-light); }
.erp-tenant-context-chip.is-muted { color: var(--erp-text-muted); opacity: 0.7; }
.erp-collapsible, .workbench-collapsible { background: var(--erp-card); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); padding: 0; }
.erp-collapsible[open], .workbench-collapsible[open] { border-color: var(--erp-gold-dark); }
.erp-collapsible__summary, .workbench-collapsible__summary { display: flex; align-items: center; gap: var(--erp-space-2); padding: var(--erp-space-3) var(--erp-space-4); cursor: pointer; color: var(--erp-gold-light); font-weight: 800; font-size: 14px; list-style: none; user-select: none; }
.erp-collapsible__summary::-webkit-details-marker, .workbench-collapsible__summary::-webkit-details-marker { display: none; }
.erp-collapsible__summary::before, .workbench-collapsible__summary::before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; width: 12px; color: var(--erp-gold-primary); transition: transform var(--erp-motion-fast); }
.erp-collapsible[open] > .erp-collapsible__summary::before, .workbench-collapsible[open] > .workbench-collapsible__summary::before { transform: rotate(90deg); }
.erp-collapsible__summary:hover, .workbench-collapsible__summary:hover { color: var(--erp-gold-primary); }
.erp-collapsible > *:not(summary), .workbench-collapsible > *:not(summary) { padding: 0 var(--erp-space-4) var(--erp-space-4); }
.workbench-collapsible--secondary { border-style: dashed; }

/* Bootstrap .list-group blackgold override (2026-06-15)
 * Vendor default surfaces .list-group-item white → bleeds through on the dark
 * shell. Live incident: TaskInbox hidden-sections modal rendered gold section
 * labels invisible on a white list (same white-bleed class as the el-dialog /
 * el-drawer fix in 08-modals.css W4). Cross-page primitive (TaskInbox +
 * Purchases) → Layer 3. Pages with custom list styling (.erp-gold-autocomplete-*
 * / .procurement-lookup-*) set their own bg at higher specificity / !important,
 * so this base rule does not disturb them. */
.list-group {
  background: transparent;
  border-radius: var(--erp-radius-md);
}
.list-group-item {
  background: var(--erp-card);
  border-color: var(--erp-border);
  color: var(--erp-text-secondary);
}
.list-group-item strong {
  color: var(--erp-gold-light);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: rgba(var(--erp-rgb-gold-primary), 0.08);
  color: var(--erp-gold-light);
}

/* P2 Card header 文字一致性（h5/strong 並用造成視覺漂移） */
.erp-card__header h5, .erp-card__header strong, .erp-card-header h5, .erp-card-header strong, .erp-ds-surface__header h5, .erp-ds-surface__header strong {
  color: var(--erp-text-primary); font-size: 14px; font-weight: 800; margin: 0;
}

/* P7 Animation: details/collapsible 展開時微動畫 */
@keyframes erp-collapse-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.erp-collapsible[open] > *:not(summary), .workbench-collapsible[open] > *:not(summary),
details.erp-collapsible[open] > *:not(summary) {
  animation: erp-collapse-in 220ms var(--erp-ease);
}

/* ───────────────────────────────────────────────────────────────────────
 * Slice 1 / Phase 1b-iii Batch A (2026-05-13)
 * Migrated from erp-tailwind.css S10 (border / rounded) + S11 (shadow).
 * Bootstrap-named utilities are themed via tokens; no body.theme-* scope.
 * ─────────────────────────────────────────────────────────────────────── */
.border { border: 1px solid var(--erp-border); }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--erp-border); }
.border-top-0 { border-top: 0 !important; }
.border-bottom { border-bottom: 1px solid var(--erp-border); }
.border-bottom-0 { border-bottom: 0 !important; }
.border-secondary, .border-light, .border-dark { border-color: var(--erp-border) !important; }
.border-primary, .border-warning { border-color: color-mix(in oklab, var(--erp-gold-primary) 45%, transparent) !important; }
.border-success { border-color: color-mix(in oklab, var(--erp-success) 45%, transparent) !important; }
.border-danger { border-color: color-mix(in oklab, var(--erp-danger) 50%, transparent) !important; }
.border-dashed { border-style: dashed !important; }
.rounded, .rounded-2, .rounded-3 { border-radius: var(--erp-radius-sm); }
.rounded-pill { border-radius: 9999px; }
.shadow, .shadow-sm { box-shadow: var(--erp-shadow-card); }

/* admin-rule-* removed 2026-06-21 (TASK-20260621 F1): migrated to canonical
   erp-card via Bootstrap row/col across all admin views; selector now unused. */