/*
  Business Center Phase 1 V3 Integration — CSS ported from the frozen standalone project
  (public/css/dashboard.css + tokens.css + components.css deltas, commit 5145b81).

  Every rule is scoped under #businessCenterHostRoot AND every class is bc-* prefixed
  (double containment) — the standalone project owned its whole page so its class names
  were never namespaced; V3's global stylesheet space is shared by 8+ modules, so an
  unscoped port would risk silently affecting unrelated pages (see
  BUSINESS_CENTER_V3_INTEGRATION_DESIGN.md §三, High risk item 1).
*/
#businessCenterHostRoot {
  --bc-space-1: 4px;
  --bc-space-2: 8px;
  --bc-space-3: 12px;
  --bc-space-3-5: 14px;
  --bc-space-4: 16px;
  --bc-space-5: 24px;

  /* Phase 1 UI Freeze (BUSINESS-CENTER-UI-PHASE1-FREEZE-001) — shared card tokens so
     .bc-bucket-card / .bc-card share one radius/shadow/hover definition instead of
     each hardcoding its own. Visual only, no logic change. */
  --bc-card-radius: 8px;
  --bc-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  --bc-card-shadow-hover: 0 4px 10px rgba(16, 24, 40, 0.08);
}

#businessCenterHostRoot .bc-loading-state {
  padding: var(--bc-space-4);
  color: var(--color-text-muted, #667085);
}

#businessCenterHostRoot .bc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bc-space-3-5);
  /* Phase 1 UI Freeze — stretch (was start) so the two cards in each row (Money/Customer,
     Assets/Staff) share one row height instead of each sizing to its own content only. */
  align-items: stretch;
}
@media (max-width: 900px) {
  #businessCenterHostRoot .bc-grid { grid-template-columns: 1fr; }

}

/* V4 Presentation（W1）：底色／框線／圓角／內距／陰影已全數由共用的 .cos-card 提供
   （四個象限的外層現為 `class="cos-card bc-bucket-card"`）。這裡只留下 .cos-card 沒有、
   而本模組確實需要的長字串斷行保護；hover 陰影一併移除 —— 四象限卡片本身不可點擊，
   非互動元素不應有 hover 回饋。 */
#businessCenterHostRoot .bc-bucket-card {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

#businessCenterHostRoot .bc-bucket-header {
  display: flex;
  align-items: flex-start;
  gap: var(--bc-space-3);
  margin-bottom: var(--bc-space-3);
  padding-bottom: var(--bc-space-2);
  border-bottom: 1px solid var(--color-border, #e4e7ec);
}
#businessCenterHostRoot .bc-bucket-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.1);
  color: var(--color-primary, #2f6fed);
}
#businessCenterHostRoot .bc-bucket-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Phase 1 UI Freeze — 四象限各自的淡色圓形圖示底。class 以 `bc-bucket-icon-${iconVariant}`
   字串組出，grep 檔名查不到，屬 Legacy Policy LP2 明列的「全域／動態組名」情形，不可刪。 */
#businessCenterHostRoot .bc-bucket-icon-money { background: #dcfce7; color: #16a34a; }
#businessCenterHostRoot .bc-bucket-icon-customer { background: #f3e8ff; color: #7c3aed; }
#businessCenterHostRoot .bc-bucket-icon-assets { background: #ffedd5; color: #c2410c; }
#businessCenterHostRoot .bc-bucket-icon-staff { background: #dbeafe; color: #2563eb; }
/* .bc-bucket-title 同時掛 .cos-card__header-title，這裡只覆寫象限標題的字級（15px，
   比一般 Card 標題小，四象限並排時才不會過重）。 */
#businessCenterHostRoot .bc-bucket-title { font-size: 15px; font-weight: 700; color: var(--color-text, #1d2939); }
#businessCenterHostRoot .bc-bucket-question { font-size: 12px; color: var(--color-text-muted, #667085); }

#businessCenterHostRoot .bc-bucket-body > * + * { margin-top: var(--bc-space-3-5); }
#businessCenterHostRoot .bc-bucket-body-compact > * + * { margin-top: var(--bc-space-3); }
#businessCenterHostRoot .bc-bucket-sub-heading { font-size: 12px; font-weight: 600; color: var(--color-text-muted, #667085); margin-bottom: var(--bc-space-2); }
#businessCenterHostRoot .bc-bucket-secondary-note { font-size: 12px; color: var(--color-text-muted, #667085); }

#businessCenterHostRoot .bc-bucket-metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bc-space-3); }
#businessCenterHostRoot .bc-bucket-metric-row-single { grid-template-columns: 1fr; }
#businessCenterHostRoot .bc-bucket-metric-row > * { min-width: 0; }
@media (max-width: 900px) {
  #businessCenterHostRoot .bc-bucket-metric-row { grid-template-columns: 1fr; }

}

#businessCenterHostRoot .bc-plain-status-row { display: flex; align-items: baseline; gap: var(--bc-space-2); font-size: 12px; color: var(--color-text-muted, #667085); }
#businessCenterHostRoot .bc-plain-status-label { font-weight: 600; }
#businessCenterHostRoot .bc-plain-status-value { color: var(--color-text-muted, #667085); }

#businessCenterHostRoot .bc-summary-tile { display: flex; align-items: center; padding: var(--bc-space-2) var(--bc-space-3); border-radius: 6px; background: var(--color-bg, #f9fafb); }
#businessCenterHostRoot .bc-summary-tile-value { font-size: 18px; font-weight: 700; color: var(--color-text, #1d2939); }

#businessCenterHostRoot .bc-inline-stat-row { display: flex; flex-wrap: wrap; gap: var(--bc-space-4); font-size: 13px; color: var(--color-text-muted, #667085); }
#businessCenterHostRoot .bc-inline-stat strong { color: var(--color-text, #1d2939); font-weight: 700; }

#businessCenterHostRoot .bc-today-progress { display: flex; gap: var(--bc-space-3); }
#businessCenterHostRoot .bc-progress-step {
  flex: 1 1 0;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--bc-space-2) 6px;
  background: var(--color-bg, #f9fafb);
  border-radius: 6px;
  border-top: 3px solid var(--color-primary, #2f6fed);
}
#businessCenterHostRoot .bc-progress-value { font-size: 19px; font-weight: 700; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
#businessCenterHostRoot .bc-progress-label { font-size: 12px; color: var(--color-text-muted, #667085); white-space: nowrap; }
@media (max-width: 900px) {
  #businessCenterHostRoot .bc-today-progress { flex-wrap: wrap; row-gap: var(--bc-space-3); }

}

#businessCenterHostRoot .bc-staff-workload-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bc-space-1); }
#businessCenterHostRoot .bc-staff-workload-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--bc-space-3);
  padding: var(--bc-space-2) var(--bc-space-3);
  border-radius: 6px;
  background: var(--color-bg, #f9fafb);
}
#businessCenterHostRoot .bc-staff-workload-name { min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-text, #1d2939); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#businessCenterHostRoot .bc-staff-workload-col { font-size: 13px; font-weight: 700; color: var(--color-text, #1d2939); white-space: nowrap; text-align: right; min-width: 56px; }
#businessCenterHostRoot .bc-staff-workload-col-label { font-size: 11px; font-weight: 400; color: var(--color-text-muted, #667085); }
@media (max-width: 900px) {
  #businessCenterHostRoot .bc-staff-workload-row { grid-template-columns: 1fr; row-gap: 2px; }
  #businessCenterHostRoot .bc-staff-workload-col { text-align: left; }

}

/* Staff No-Schedule UI Polish (BUSINESS-DASHBOARD-MAINLINE-IA-RESTORATION-AUDIT-AND-
   IMPLEMENTATION-001) — pure display, mirrors the existing daily-tx-collapsed-v260 pattern:
   rows always stay in the DOM, only extra rows beyond the first 5 are hidden by this class. */
#businessCenterHostRoot .bc-staff-workload-grid.bc-staff-no-schedule-collapsed .bc-staff-no-schedule-extra-row { display: none; }
#businessCenterHostRoot .bc-staff-no-schedule-toggle {
  margin-top: var(--bc-space-2);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #1570ef);
  background: none;
  border: 1px solid var(--color-border, #d0d5dd);
  border-radius: 6px;
  cursor: pointer;
}
#businessCenterHostRoot .bc-staff-no-schedule-toggle:hover { background: var(--color-bg, #f9fafb); }

#businessCenterHostRoot .bc-alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bc-space-2); }
#businessCenterHostRoot .bc-alert-item { font-size: 13px; padding: var(--bc-space-2) var(--bc-space-3); border-radius: 6px; background: var(--color-bg, #f9fafb); }
#businessCenterHostRoot .bc-alert-item.bc-alert-critical { color: #b42318; }
#businessCenterHostRoot .bc-alert-item.bc-alert-warning { color: #b54708; }

/* V4 Presentation（W1）：`.bc-card` 原本只服務 metric-card，指標卡改用共用 `.cos-kpi` 後
   已無任何產生點（Module JS ＋ components/ 皆為 0），依 Legacy Policy A 類移除。 */

/* Phase 2A (BUSINESS-DASHBOARD-PHASE2A-DRILLDOWN-FOUNDATION-IMPLEMENTATION-001) — a single
   interactive-region style reused by every drill-down sub-section, so the affordance reads
   consistently across Money/Customer/Assets/Staff instead of each card inventing its own
   hover/focus treatment. Deliberately understated (background tint + a trailing text label on
   hover/focus, no new border/shadow token) so it doesn't compete with the existing bucket-card
   hierarchy this Phase must not disturb. */
#businessCenterHostRoot .bc-drilldown {
  cursor: pointer;
  border-radius: 6px;
  margin: calc(var(--bc-space-2) * -1) calc(var(--bc-space-2) * -1) 0;
  padding: var(--bc-space-2);
  transition: background-color 0.15s ease;
}
#businessCenterHostRoot .bc-drilldown:hover,
#businessCenterHostRoot .bc-drilldown:focus-visible {
  background: var(--color-bg, #f9fafb);
}
#businessCenterHostRoot .bc-drilldown:focus-visible {
  outline: 2px solid var(--color-primary, #2f6fed);
  outline-offset: 1px;
}
#businessCenterHostRoot .bc-drilldown-affordance {
  display: none;
  margin-top: var(--bc-space-1);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary, #2f6fed);
}
#businessCenterHostRoot .bc-drilldown-affordance::after { content: ' \203A'; }
#businessCenterHostRoot .bc-drilldown:hover .bc-drilldown-affordance,
#businessCenterHostRoot .bc-drilldown:focus-visible .bc-drilldown-affordance {
  display: block;
}

/* Phase 2B Pack 1 (BUSINESS-DASHBOARD-PHASE2B-MONEY-DAY-OVER-DAY-IMPLEMENTATION-001) — Metric
   Decoration Layer (Architecture doc §6). Deliberately small/secondary — the metric value itself
   (.bc-metric-value / the <strong> in .bc-inline-stat) must stay the dominant visual element;
   this is a supporting annotation, never a button, never larger than its own label text.
   Generalized names (not bc-trend-*) because this class set is designed to host future
   decoration kinds beyond delta (see Architecture doc §6's reserved-but-unpopulated fields),
   not just a trend arrow. */
#businessCenterHostRoot .bc-metric-decoration {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: var(--bc-space-2);
  font-size: 12px;
  font-weight: 600;
}