.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.kpi-card {
  position: relative;
  border-radius: var(--fx-radius-lg);
  padding: 18px;
  min-height: 128px;
  min-width: 0;
  display: flex; flex-direction: column;
  /* Tooltip pseudo-elements on .kpi-info were leaking into the grid's intrinsic
     width because they're abs-positioned with nowrap content. contain: layout
     keeps each card's size calculation isolated. */
  contain: layout;
}
.kpi-card .kpi-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.kpi-card .kpi-icon-bubble {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.kpi-card .kpi-icon-bubble img { width: 14px; height: 14px; }

/* InfoOutlined from FinancialKpiInsightsRow.tsx line 149:
   sx={{ fontSize: 18, color: toneStyles.infoIconColor, opacity: 0.88 }} */
.kpi-card .kpi-info {
  position: absolute; top: 10px; right: 10px;
  font-size: 18px;
  opacity: 0.88;
  cursor: help;
}

.kpi-card .kpi-label {
  margin-top: 10px; font-size: 12px; font-weight: 600; line-height: 1.35;
  letter-spacing: 0.2px;
}

.kpi-card .kpi-value {
  margin-top: auto; padding-top: 6px;
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  color: #172326;
}

.kpi-light {
  background: white;
  box-shadow: 0px 4px 18px rgba(86,135,147,.14);
  border: 1px solid rgba(0,0,0,.06);
}
/* light: teal bubble, white icon */
.kpi-light .kpi-icon-bubble { background: var(--fx-primary-500); box-shadow: 0 2px 8px rgba(86,135,147,.28); }
.kpi-light .kpi-icon-bubble img { filter: brightness(0) invert(1); }
.kpi-light .kpi-label { color: var(--fx-grey-400); }
.kpi-light .kpi-value { color: var(--fx-title); }
.kpi-light .kpi-info { color: var(--fx-title); }

/* teal: white bubble, dark icon */
.kpi-teal {
  background: var(--fx-primary-500);
  box-shadow: 0 6px 22px rgba(86,135,147,.38);
}
.kpi-teal .kpi-icon-bubble { background: white; box-shadow: 0 0 0 1px rgba(86,135,147,.18); }
.kpi-teal .kpi-icon-bubble img { filter: brightness(0) saturate(100%); }
.kpi-teal .kpi-label { color: rgba(255,255,255,.92); }
.kpi-teal .kpi-value { color: white; }
.kpi-teal .kpi-info { color: rgba(255,255,255,.92); }

/* green: semi-white bubble, white icon */
.kpi-green {
  background: #27ae60;
  box-shadow: 0 6px 22px rgba(39,174,96,.38);
}
.kpi-green .kpi-icon-bubble { background: rgba(255,255,255,.24); }
.kpi-green .kpi-icon-bubble img { filter: brightness(0) invert(1); }
.kpi-green .kpi-label { color: rgba(255,255,255,.92); }
.kpi-green .kpi-value { color: white; }
.kpi-green .kpi-info { color: rgba(255,255,255,.92); }

/* ─────────────────────────────────────────────────────────────────────────
   Spotlight row — new KPI tile variants (trend / compare / sparkline)
   See DESIGN_LANGUAGE.md §6 KPI tile + §6 micro-charts.
   ──────────────────────────────────────────────────────────────────────── */
.kpi-spotlight-title {
  /* §4 h5 (19/28/500/0.15), §10 Title Case */
  font: 500 19px/28px "Open Sans", sans-serif;
  letter-spacing: 0.15px;
  color: var(--fx-title);
  margin: 24px 0 12px;   /* §5: 24px section gap */
}
.kpi-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .kpi-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .kpi-grid-3 { grid-template-columns: 1fr; }
}

/* All three variants share the kpi-card frame (8px br, 16px padding,
   subtle shadow). Heritage from .kpi-light tone. */
.kpi-trend, .kpi-compare, .kpi-sparkline {
  background: #ffffff;
  border-radius: var(--fx-radius-lg);
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 18px rgba(86,135,147,.14);
  min-height: 108px;     /* §5: matches entity-header info-card cap */
  display: flex; flex-direction: column;
  gap: 12px;
  contain: layout;
}

/* ── Trend tile (Variant A) ─────────────────────────────────────────── */
.kpi-trend-head {
  display: flex; align-items: center; gap: 10px;
}
.kpi-trend-head .kpi-icon-bubble {
  width: 28px; height: 28px;
  border-radius: 6px;          /* §6 KPI icon bubble: 8px br nudged to 6 for the smaller bubble */
  background: var(--fx-primary-500);
  box-shadow: 0 2px 8px rgba(86,135,147,.28);
  display: flex; align-items: center; justify-content: center;
}
.kpi-trend-head .kpi-icon-bubble img { filter: brightness(0) invert(1); width: 14px; height: 14px; }
.kpi-trend-label {
  /* §4 overLineCaption (11/16/400/0.1) — small label per §10 sentence case */
  font: 400 11px/16px "Open Sans", sans-serif;
  letter-spacing: 0.1px;
  color: var(--fx-grey-500);
  text-transform: uppercase;
  font-weight: 600;
}
.kpi-trend .kpi-value {
  /* §4 h5 (19/28/500/0.15) — value */
  font: 500 19px/28px "Open Sans", sans-serif;
  letter-spacing: 0.15px;
  color: var(--fx-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-trend-pill {
  /* §9 status-chip pattern: 50px br, ~10% tint, label is the score color */
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font: 600 11px/16px "Open Sans", sans-serif;
  letter-spacing: 0.4px;
  /* color + background-color set inline (depends on direction) */
}
.kpi-trend-pill .icon {
  font-family: 'Material Icons Outlined' !important;
  font-size: 14px !important;
  line-height: 14px !important;
}

/* ── Compare tile (Variant B) ───────────────────────────────────────── */
.kpi-compare .kpi-trend-label { /* reuse */ }
.kpi-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 16px;
}
.kpi-compare-col { min-width: 0; }
.kpi-compare-sub {
  /* §4 overLineCaption */
  font: 400 11px/14px "Open Sans", sans-serif;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--fx-grey-400);
  margin-bottom: 4px;
}
.kpi-compare-val {
  /* §4 subtitle1 (16/24/400/0.15), bumped weight 700 for value emphasis */
  font: 700 16px/22px "Open Sans", sans-serif;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* color set inline from §3 values.* palette */
}
.kpi-compare-divider {
  width: 1px;
  height: 32px;
  background: var(--fx-divider);
}

/* ── Sparkline tile (Variant C) ─────────────────────────────────────── */
.kpi-sparkline {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 16px;
  align-items: center;
}
.kpi-sparkline-left { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kpi-sparkline-left .kpi-value {
  font: 500 19px/28px "Open Sans", sans-serif;
  letter-spacing: 0.15px;
  color: var(--fx-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-sparkline-chart {
  height: 56px;
  position: relative;
}
.kpi-sparkline-chart canvas { width: 100% !important; height: 100% !important; }

.dash-row { display: grid; gap: 16px; margin-bottom: 16px; }
.dash-row-3 { grid-template-columns: repeat(3, 1fr); }
.dash-row-1 { grid-template-columns: 1fr; }

/* CardTemplate root + content from app/modules/Dashboards/content/CardTemplate.tsx
   lines 14-67: border-radius 8, padding 16 (content), background common.white.
   Card header title styling at line 31-40: Open Sans, bold (700), font-size 14,
   line-height 24, letter-spacing 0.1, color common.black, padding-left 16. */
/* CardTemplate root: borderRadius 8, padding 16 on .content, background
   common.white, no min-height (height '100%' from flex container).
   Demo keeps a min-height so chart canvases have a sensible default,
   matching the visual proportions used in production at 1440x900. */
.dash-panel {
  border-radius: 8px;
  padding: 16px;
  min-height: 320px;
  background: var(--fx-white);
  height: 100%;
}
.dash-panel h3 {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.1px;
  color: #000;
  margin: 0 0 12px;
  padding-left: 0;
}

.chart-wrap { position: relative; height: 240px; }

/* DoughnutCard side-legend pattern from
   app/modules/Dashboards/content/DoughnutCard.tsx:39-60 — pieLegend column on
   left + pieChartWrap on right. */
.dash-pie-body {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.4fr);
  gap: 12px;
  align-items: center;
  min-height: 240px;
}
.dash-pie-body .chart-wrap { height: 220px; }
.dash-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.dash-pie-legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 8px;
  align-items: center;
  font-family: 'Open Sans';
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.1px;
  color: var(--fx-title);
}
.dash-pie-swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.dash-pie-label {
  color: var(--fx-title);
  font-size: 11px;
}
.dash-pie-pct {
  color: var(--fx-greyscale-400);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Activity Analysis vertical metric list — mirrors production
   app/modules/Dashboards/content/activityAnalysis/ActivityAnalysisItem.tsx */
.dash-panel-list { padding: 20px; }
/* ActivityAnalysis item from activityAnalysis.styles.ts:36-67:
   item height 24 (fixed), icon 24x24 with bg #5C8D9D border-radius 50%,
   title 14/24/400/0.15, marginLeft 13. */
.activity-list { display: flex; flex-direction: column; gap: 12px; }
.activity-item {
  display: flex; align-items: center;
  height: 24px;
  padding: 0;
}
.activity-item-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #5C8D9D;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.activity-item-icon img { filter: brightness(0) invert(1); }
.activity-item-title {
  flex: 1; min-width: 0;
  margin-left: 13px;
  font-size: 14px; line-height: 24px;
  font-weight: 400; letter-spacing: 0.15px;
  color: var(--fx-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.activity-item-value {
  font-size: 14px; font-weight: 700; color: var(--fx-primary-main);
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-row-3 { grid-template-columns: 1fr; }
}