/* Dashboard-only surface/foreground pairs. Legacy global heading colors must
   not leak across nested chart, card, vCard or control backgrounds. */
#tab-kpis {
  --kpi-surface: #f5f8fc;
  --kpi-card-surface: #fff;
  --kpi-ink: #0b172a;
  --kpi-muted: #52657d;
  background: var(--kpi-surface);
  color: var(--kpi-ink);
}
#tab-kpis :is(.heroCard, .panel, .savedKpiCard, .roleCategoryNotice) {
  --kpi-surface: var(--kpi-card-surface);
  --kpi-ink: #0b172a;
  background: var(--kpi-surface) !important;
  color: var(--kpi-ink) !important;
}
#tab-kpis :is(.kpi, .statMini, .qualityMetric, .temporalCard, .kpiTargetCard) {
  --kpi-surface: var(--kpi-card-surface);
  --kpi-ink: #0b172a;
  background: var(--kpi-surface) !important;
  color: var(--kpi-ink) !important;
}
#tab-kpis :is(.chart, .goalComparisonChart, .goalComplianceChart) {
  --kpi-surface: var(--kpi-card-surface);
  --kpi-ink: #0b172a;
  background: var(--kpi-surface) !important;
  color: var(--kpi-ink) !important;
}
#tab-kpis :is(h2, h3, h4, p, label, strong, span, em, small, th, td,
  .eyebrow, .objectiveStep, .qualityLabel, .qualityValue, .notice,
  .roleCategoryNotice, .categoryLegendHead, .categoryLegendEmpty, .compareLabel) {
  color: var(--kpi-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
#tab-kpis :is(.heroCard p, .sectionTitle small, .categoryKpiHeader p,
  .kpi > em, .temporalCard small, .categoryPieHole small, .chartLabel,
  .monthlyEvolutionMonth, .compareLabel) {
  color: var(--kpi-muted) !important;
  opacity: 1 !important;
}
#tab-kpis :is(.notice, .objectivePanel, .projectionBox, .compareRow,
  .categoryLegendPct, .categoryLegendTotal strong:last-child, .qualityHelp) {
  background: var(--kpi-surface) !important;
  color: var(--kpi-ink) !important;
  border-color: var(--border-default, #cfdeed) !important;
}
/* Remove the fixed dark gradient beneath theme-colored donut labels. Keep
   the dynamic category colors on the surrounding ring and legend swatches. */
#tab-kpis .pieHole {
  background: var(--kpi-surface) !important;
  color: var(--kpi-ink) !important;
  border-color: var(--border-default, #cfdeed) !important;
  box-shadow: none;
}
#tab-kpis .categoryDistributionPanel { container: dashboard-category / inline-size; }
#tab-kpis .categoryPieChart { width: min(250px, 100%) !important; height: auto !important; }
#tab-kpis .categoryPieHole small {
  white-space: normal !important; word-break: normal !important;
  overflow-wrap: normal !important; text-align: center;
}
@container dashboard-category (max-width: 640px) {
  #tab-kpis .categoryKpiBody { grid-template-columns: minmax(0, 1fr) !important; }
  #tab-kpis .categoryLegendTable { width: 100%; }
}
#tab-kpis :is(input, select, textarea) {
  background: var(--input-background, #fff) !important;
  color: var(--input-text, #0b172a) !important;
  -webkit-text-fill-color: currentColor !important;
}
#tab-kpis input::placeholder {
  color: var(--input-text, #0b172a) !important;
  -webkit-text-fill-color: var(--input-text, #0b172a) !important;
  opacity: .75 !important;
}
#tab-kpis :is(button, .btn) {
  background: #fff !important;
  color: #0759c7 !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: #7296c9 !important;
}
#tab-kpis button :is(span, strong) { color: inherit !important; }
#tab-kpis .favoriteStar { background: #0b172a !important; color: #ffd566 !important; }
#tab-kpis :is(button, input, select, .chartDataPoint):focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px;
}
#tab-kpis .monthlyEvolutionPct {
  background: #0b172a !important; color: #fff !important;
  padding: 2px 4px; border-radius: 4px; text-shadow: none;
}
/* Colored status text needs a known surface even in custom tenant palettes. */
#tab-kpis :is(.qualityState, .temporalCard em.up) {
  background: #dcfce7 !important; color: #166534 !important;
  padding: 3px 6px; border-radius: 5px; align-self: flex-start;
}
#tab-kpis :is(.qualityState.warn, .temporalCard em.down) {
  background: #fef3c7 !important; color: #854d0e !important;
}
#tab-kpis .dashboardFunnelConversions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}
#tab-kpis .dashboardFunnelConversion {
  --kpi-surface: #fff;
  --kpi-ink: #0b172a;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border, #bfd0e5);
  border-radius: 14px;
  background: #fff !important;
  color: #0b172a !important;
  -webkit-text-fill-color: #0b172a !important;
}
#tab-kpis .dashboardFunnelConversion > header,#tab-kpis .dashboardFunnelConversion > footer{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
#tab-kpis .dashboardFunnelConversion h4{margin:0 0 4px;font-size:1.25rem}
#tab-kpis .dashboardFunnelConversion :is(h4,header strong,.dashboardFunnelSummary strong,.dashboardFunnelStageCopy strong){color:#0b172a!important;-webkit-text-fill-color:#0b172a!important}
#tab-kpis .dashboardFunnelConversion :is(header small,.dashboardFunnelSummary em,.dashboardFunnelStageCopy small,.dashboardFunnelStages li>em,footer small){color:#52657d!important;-webkit-text-fill-color:#52657d!important;opacity:1!important}
#tab-kpis .dashboardFunnelSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0;padding-bottom:16px;border-bottom:1px solid var(--border,#d8e3ef)}
#tab-kpis .dashboardFunnelConversion > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#tab-kpis .dashboardFunnelConversion span {
  display: grid;
  gap: 2px;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-secondary, #eef5fc);
  overflow-wrap: anywhere;
}
#tab-kpis .dashboardFunnelConversion em { font-style: normal; opacity: .85; }
#tab-kpis .dashboardFunnelStages{display:grid;gap:13px;margin:0 0 18px;padding:0;list-style:none}
#tab-kpis .dashboardFunnelStages li{display:grid;grid-template-columns:32px minmax(140px,.8fr) minmax(160px,2fr) 36px minmax(112px,.65fr);align-items:center;gap:12px}
#tab-kpis .dashboardFunnelStageIndex{min-width:32px!important;width:32px;height:32px;padding:0!important;display:grid!important;place-items:center;border-radius:50%!important;background:#e8f1ff!important;color:#0756b5!important}
#tab-kpis .dashboardFunnelStageCopy{display:grid;gap:2px;min-width:0}
#tab-kpis .dashboardFunnelStageTrack{height:12px;border-radius:999px;background:#e8edf4;overflow:hidden}
#tab-kpis .dashboardFunnelStageBar{display:block;width:var(--stage-width);height:100%;border-radius:inherit;background:var(--stage-color);animation:dashboardFunnelGrow .55s ease-out both}
#tab-kpis .dashboardFunnelConversion footer{align-items:center;padding-top:14px;border-top:1px solid var(--border,#d8e3ef)}
#tab-kpis .dashboardFunnelSkeleton{pointer-events:none;overflow:hidden}
#tab-kpis .dashboardFunnelSkeleton i{display:block;height:14px;border-radius:999px;background:linear-gradient(90deg,#e7edf5 25%,#f8fbff 50%,#e7edf5 75%);background-size:220% 100%;animation:dashboardFunnelSkeletonPulse 1.2s ease-in-out infinite}
#tab-kpis .dashboardFunnelSkeleton header i{width:min(52%,220px);height:24px}
#tab-kpis .dashboardFunnelSkeleton .dashboardFunnelSummary i{height:46px}
#tab-kpis .dashboardFunnelSkeleton .dashboardFunnelStages i:nth-child(2){width:72%}
#tab-kpis :is(.dashboardFunnelEmpty,.dashboardFunnelError){grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:92px;padding:18px;border:1px solid var(--border,#bfd0e5);border-radius:14px;background:var(--card-background,#fff);color:var(--card-text,#0b172a)}
@keyframes dashboardFunnelGrow{from{width:0}to{width:var(--stage-width)}}
@keyframes dashboardFunnelSkeletonPulse{0%{background-position:200% 0}100%{background-position:-20% 0}}
@media(prefers-reduced-motion:reduce){#tab-kpis :is(.dashboardFunnelStageBar,.dashboardFunnelSkeleton i){animation:none}}
@media (max-width: 700px) {
  #tab-kpis .dashboardFunnelConversions { grid-template-columns: minmax(0, 1fr); }
  #tab-kpis .dashboardFunnelSummary { grid-template-columns:minmax(0,1fr); }
  #tab-kpis .dashboardFunnelStages li{grid-template-columns:32px minmax(0,1fr) 32px}.dashboardFunnelStageTrack{grid-column:2/-1}.dashboardFunnelStages li>em{grid-column:2/-1}
  #tab-kpis .dashboardFunnelConversion > footer{align-items:stretch;flex-direction:column}
  #tab-kpis .dashboardFunnelConversion span { min-width: 0; }
}