/**
 * Financial section KPI contract.
 *
 * Taxes is the product reference: four calm, independent metric islands in one
 * row. The section heading remains in the DOM for navigation, but does not add
 * a second visual bar above the metrics.
 */

body.dash-page .nv-kpi-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  block-size: auto !important;
  height: auto !important;
  min-block-size: 104px !important;
  min-height: 104px !important;
  min-width: 0;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The dashboard month row sits inside the "This month" island, so its stat
   cards take the inset surface (nv-stat.css reads --nv-stat-surface). */
body.dash-page .dash-month-summary .nv-kpi-summary {
  --nv-stat-surface: var(
    --nv-kpi-surface,
    var(--color-surface-inset, var(--dash-card, #0e0e0f))
  );
}

/* Semantic heading without a duplicate visual island. */
body.dash-page .nv-kpi-summary__title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

body.dash-page .nv-kpi-summary > :is(
  .dash-kpi
) {
  min-width: 0;
  min-height: 104px !important;
  border: 0 !important;
  border-radius: var(--dash-radius-card, 20px) !important;
  background: var(
    --nv-kpi-surface,
    var(--color-surface-inset, var(--dash-card, #0e0e0f))
  ) !important;
  box-shadow: none !important;
}

/* Keep the native metric layout and icons used by the Taxes reference. */
body.dash-page .nv-kpi-summary :is(
  .dash-kpi__icon
) {
  display: grid !important;
}

body.dash-page .nv-kpi-summary :is(
  .dash-kpi__icon
) svg {
  color: inherit !important;
}

/* Accounts already uses the native dashboard KPI component directly. */
body.dash-page .acc-summary-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@container dash-page-main (min-width: 1040px) {
  body.dash-page .nv-kpi-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@container dash-main-col (min-width: 1040px) {
  body.dash-page .nv-kpi-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@container dash-page-main (max-width: 520px) {
  body.dash-page .nv-kpi-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 560px) {
  body.dash-page .nv-kpi-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Stat icon canon (DS Stat card › Icon). One 36 px circle on the neutral
   well, one 18 px Lucide glyph at 1.75 stroke in the text colour. Meaning is
   carried by the glyph, not by a tint: money in ↙, money out ↗, net ⇅,
   transactions ⇄, balance wallet, paid check, overdue alert. */
body.dash-page .dash-kpi__icon {
  display: grid !important;
  flex: none !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  /* One step above the stat surface in both themes. */
  background: color-mix(in srgb, var(--dash-text, #eee) 8%, transparent) !important;
  box-shadow: none !important;
  color: var(--dash-text, #eee) !important;
}

body.dash-page .dash-kpi__icon svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
  flex: none;
  color: inherit !important;
  stroke: currentColor;
  stroke-width: 1.75;
}