/* Stat Card Component */

/* Base card */
.stat-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--shadow-resting);
}

.stat-card__label {
  display: flex;
  flex-wrap: wrap; /* lets an optional sublabel drop to its own line */
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.stat-card__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.stat-card__trend {
  font-size: 0.85em;
  font-weight: 700;
}

.stat-card__value--positive {
  color: var(--color-success-dark);
}

.stat-card__value--negative {
  color: var(--color-danger-dark);
}

/* State readout (e.g. monthly savings below target): concerned, not alarmed */
.stat-card__value--caution {
  color: var(--color-warning-dark);
}

/* Quiet second line under the label (e.g. the monthly savings goal) */
.stat-card__sublabel {
  flex-basis: 100%;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-slate-gray);
}

/* ── Hero variant: the one glanceable number ───────────────────── */
.stat-card--hero {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.25rem 1.375rem;
  gap: 0.5rem;
  background: var(--bg-surface);
}

.stat-card--hero .stat-card__label {
  font-size: 0.875rem;
}

.stat-card--hero .stat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--color-primary-20);
  color: var(--color-primary);
}

.stat-card--hero .stat-card__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.stat-card--hero .stat-card__value {
  font-size: var(--font-size-hero); /* the total is shown in full, no "K" */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-dark);
}

/* "dont X mis de côté" — a quiet fact under the big number, shown only
   when at least one account is marked reserved. */
.stat-card__footnote {
  font-size: var(--font-size-body);
  color: var(--text-muted);
  line-height: 1.2;
}

/* ── Secondary stats: one grouped summary list ─────────────────── */
/* The hero owns the spotlight; these three are a tidy, scannable list
   inside a single card so they clearly read as secondary. */
.stat-cards {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-resting);
}

/* No overflow:hidden on .stat-cards — it would clip the smart-money
   tooltip on the first row. Round the end rows instead. */
.stat-cards > :first-child,
.stat-cards > :first-child .stat-card--compact {
  border-radius: 0.75rem 0.75rem 0 0;
}
.stat-cards > :last-child,
.stat-cards > :last-child .stat-card--compact {
  border-radius: 0 0 0.75rem 0.75rem;
}

.stat-card--compact {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.stat-card--compact:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.stat-card--compact .stat-card__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.stat-card--compact .stat-card__value {
  font-size: 1rem;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

/* Clickable wrapper: the "Saved this month" card links to the space's
   monthly savings goal (edit space form). */
.stat-card-link {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
}
/* Same tappable-row affordance as the transactions list */
.stat-card-link > .stat-card {
  padding-right: 2rem;
}
.stat-card-link::after {
  content: "›";
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-58%);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-slate-gray);
  pointer-events: none;
}
/* Hero: tappable but chrome-free, nothing competes with the one number */
.stat-card-link--quiet::after {
  content: none;
}
.stat-card-link--quiet > .stat-card {
  padding-right: 1rem;
}
/* Compact rows inside the stat list keep their divider when wrapped in links */
.stat-cards .stat-card-link:not(:last-child) .stat-card--compact {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.stat-card-link:hover .stat-card,
.stat-card-link:focus-visible .stat-card {
  box-shadow: var(--shadow-raised);
}
.stat-card-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}