/**
 * Shared KPI islands.
 * Insights is the reference: four compact cards on wide canvases, 2 x 2 on
 * adaptive layouts, and one column only when the component itself is narrow.
 */

:is(
  .tx-main, .pay-main, .inv-main, .acc-main, .bud-main, .tax-main,
  .acct-main, .inc-main, .ins-main, .ops-main, .team-main
) {
  container-type: inline-size;
}

.tx-main { container-name: tx-main dash-page-main; }
.pay-main { container-name: pay-main dash-page-main; }
.inv-main { container-name: inv-main dash-page-main; }
.acc-main { container-name: acc-main dash-page-main; }
.bud-main { container-name: bud-main dash-page-main; }
.tax-main { container-name: tax-main dash-page-main; }
.acct-main { container-name: acct-main dash-page-main; }
.inc-main { container-name: inc-main dash-page-main; }
.ins-main { container-name: ins-main dash-page-main; }
.ops-main { container-name: ops-main dash-page-main; }
.team-main { container-name: team-main dash-page-main; }

/* Accounting page queries also use the full content container. */
.acct-content {
  container-type: inline-size;
  container-name: acct-content dash-page-main;
}

body.dash-page :is(
  .tx-summary, .pay-summary, .inv-summary, .acc-summary, .bud-summary,
  .tax-summary, .acct-summary, .inc-summary, .ins-summary, .ops-summary,
  .team-summary
) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

body.dash-page :is(
  .tx-summary__item, .pay-summary__item, .inv-summary__item,
  .acc-summary__item, .bud-summary__item, .tax-summary__item,
  .acct-summary__item, .inc-summary__item, .ins-summary__item,
  .ops-summary__item, .team-summary__item
) {
  position: relative;
  min-width: 0;
  min-height: 86px;
  padding: 16px 18px;
  background: var(--dash-card);
  border: 0;
  border-radius: var(--dash-radius-card);
  box-shadow: none;
  overflow: hidden;
  container-type: inline-size;
  container-name: dash-kpi-card;
}

/* Metrics with a real sparkline, progress bar, or donut use the Insights split. */
body.dash-page :is(
  .acc-summary__item, .bud-summary__item, .tax-summary__item,
  .acct-summary__item, .inc-summary__item, .ins-summary__item
) {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(56px, 1fr);
  align-items: end;
  column-gap: 18px;
}

body.dash-page :is(.tax-summary__item, .acct-summary__item):has(
  > :is(.tax-summary__top, .acct-summary__top) :is(.tax-summary__donut, .acct-summary__donut)
) {
  grid-template-columns: minmax(0, 1fr);
}

/* Metrics without a chart keep the same shell and typographic rhythm. */
body.dash-page :is(
  .tx-summary__item, .pay-summary__item, .inv-summary__item,
  .ops-summary__item, .team-summary__item
) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

body.dash-page :is(
  .acc-summary__top, .bud-summary__top, .tax-summary__top,
  .acct-summary__top, .inc-summary__top, .ins-summary__top
) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

body.dash-page :is(
  .tx-summary__item, .pay-summary__item, .inv-summary__item,
  .ops-summary__item, .team-summary__item
) > :last-child,
body.dash-page :is(
  .acc-summary__top, .bud-summary__top, .tax-summary__top,
  .acct-summary__top, .inc-summary__top, .ins-summary__top
) > div:not([class]) {
  min-width: 0;
  flex: 1;
}

body.dash-page :is(
  .tx-summary__icon, .pay-summary__icon, .inv-summary__icon,
  .acc-summary__icon, .bud-summary__icon, .tax-summary__icon,
  .acct-summary__icon, .inc-summary__icon, .ins-summary__icon,
  .ops-summary__icon, .team-summary__icon
) {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
}

body.dash-page :is(
  .tx-summary__label, .pay-summary__label, .inv-summary__label,
  .acc-summary__label, .bud-summary__label, .tax-summary__label,
  .acct-summary__label, .inc-summary__label, .ins-summary__label,
  .ops-summary__label, .team-summary__label
) {
  display: -webkit-box;
  margin: 0 0 2px;
  overflow: hidden;
  color: var(--dash-text-muted);
  font-size: 13px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body.dash-page :is(
  .tx-summary__value, .pay-summary__value, .inv-summary__value,
  .acc-summary__value, .bud-summary__value, .tax-summary__value,
  .acct-summary__value, .inc-summary__value, .ins-summary__value,
  .ops-summary__value, .team-summary__value
) {
  margin: 0;
  overflow: hidden;
  color: var(--dash-text);
  font-size: clamp(17px, 6cqi, 22px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.dash-page :is(
  .tx-summary__meta, .pay-summary__meta, .inv-summary__meta,
  .acc-summary__meta, .bud-summary__meta, .tax-summary__meta,
  .acct-summary__meta, .inc-summary__meta, .ins-summary__meta,
  .ops-summary__meta, .team-summary__meta
) {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Real card visuals align to the baseline and extend to the card's right edge. */
body.dash-page :is(
  .acc-summary__spark, .bud-summary__spark, .inc-summary__spark,
  .ins-summary__spark
) {
  position: static;
  inset: auto;
  width: calc(100% + 18px);
  height: 28px;
  margin: 0 -18px 0 0;
  align-self: end;
  pointer-events: none;
}

body.dash-page :is(
  .acc-summary__spark, .bud-summary__spark, .inc-summary__spark,
  .ins-summary__spark
) svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.dash-page :is(
  .acc-summary__bar, .bud-summary__bar, .tax-summary__bar,
  .acct-summary__bar, .inc-summary__bar, .ins-summary__bar
) {
  width: calc(100% + 18px);
  margin: 0 -18px 4px 0;
  align-self: end;
}

body.dash-page :is(.tax-summary__donut, .acct-summary__donut) {
  margin-inline-start: auto;
  align-self: center;
}

@container dash-page-main (min-width: 720px) {
  body.dash-page :is(
    .tx-summary, .pay-summary, .inv-summary, .acc-summary, .bud-summary,
    .tax-summary, .acct-summary, .inc-summary, .ins-summary, .ops-summary,
    .team-summary
  ) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container acct-main (max-width: 900px) {
  body.acct-page .acct-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Account cards include an icon, multi-line copy and a chart/progress lane.
 * Four tracks become unreadable before the general KPI breakpoint is reached,
 * so keep this denser variant at 2 x 2 until the component has enough room.
 */
@container acc-main (max-width: 880px) {
  body.acc-page .acc-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container dash-page-main (min-width: 1200px) {
  body.dash-page :is(
    .acc-summary__item, .bud-summary__item, .tax-summary__item,
    .acct-summary__item, .inc-summary__item, .ins-summary__item
  ) {
    column-gap: 32px;
  }
}

@container dash-page-main (max-width: 520px) {
  body.dash-page :is(
    .tx-summary, .pay-summary, .inv-summary, .acc-summary, .bud-summary,
    .tax-summary, .acct-summary, .inc-summary, .ins-summary, .ops-summary,
    .team-summary
  ) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container dash-kpi-card (max-width: 260px) {
  body.dash-page :is(
    .acc-summary__spark, .bud-summary__spark, .inc-summary__spark,
    .ins-summary__spark, .acc-summary__bar, .bud-summary__bar,
    .tax-summary__bar, .acct-summary__bar, .inc-summary__bar,
    .ins-summary__bar
  ) {
    width: calc(100% + 18px);
    margin-inline-end: -18px;
  }

  body.dash-page :is(
    .tx-summary__icon, .pay-summary__icon, .inv-summary__icon,
    .acc-summary__icon, .bud-summary__icon, .tax-summary__icon,
    .acct-summary__icon, .inc-summary__icon, .ins-summary__icon,
    .ops-summary__icon, .team-summary__icon
  ) {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-basis: 32px;
  }

  body.dash-page :is(
    .acc-summary__top, .bud-summary__top, .tax-summary__top,
    .acct-summary__top, .inc-summary__top, .ins-summary__top
  ) {
    gap: 10px;
  }

  body.dash-page :is(
    .tx-summary__value, .pay-summary__value, .inv-summary__value,
    .acc-summary__value, .bud-summary__value, .tax-summary__value,
    .acct-summary__value, .inc-summary__value, .ins-summary__value,
    .ops-summary__value, .team-summary__value
  ) {
    font-size: 16px;
    letter-spacing: -0.035em;
  }
}

@container dash-page-main (max-width: 520px) {
  body.dash-page :is(
    .tx-summary__item, .pay-summary__item, .inv-summary__item,
    .acc-summary__item, .bud-summary__item, .tax-summary__item,
    .acct-summary__item, .inc-summary__item, .ins-summary__item,
    .ops-summary__item, .team-summary__item
  ) {
    padding: 14px 16px;
  }

  body.dash-page :is(
    .tx-summary__icon, .pay-summary__icon, .inv-summary__icon,
    .acc-summary__icon, .bud-summary__icon, .tax-summary__icon,
    .acct-summary__icon, .inc-summary__icon, .ins-summary__icon,
    .ops-summary__icon, .team-summary__icon
  ) {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-basis: 32px;
  }

  body.dash-page :is(
    .tx-summary__value, .pay-summary__value, .inv-summary__value,
    .acc-summary__value, .bud-summary__value, .tax-summary__value,
    .acct-summary__value, .inc-summary__value, .ins-summary__value,
    .ops-summary__value, .team-summary__value
  ) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
  }
}