/* Pastel metric cards with goal-style icon badges, only on Home's month panel. */
#dashboard .month-panel .metric {
  min-width: 0;
  min-height: 70px;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
  padding: 10px;
  border-radius: var(--radius);
}

#dashboard .month-panel .metric-icon {
  display: grid;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, var(--surface));
}

#dashboard .month-panel .metric-icon svg { width: 20px; height: 20px; }
#dashboard .month-panel .metric-label { min-height: 0; font-size: 10px; line-height: 1.1; }
#dashboard .month-panel .metric strong { color: currentColor; font-size: clamp(12px, 3vw, 15px); line-height: 1.15; }
#dashboard .month-panel .income-metric {
  color: var(--income);
  border-color: color-mix(in srgb, var(--income) 24%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--success-soft) 80%, var(--surface)), color-mix(in srgb, var(--income) 10%, var(--surface)));
}
#dashboard .month-panel .net-metric {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 80%, var(--surface)), color-mix(in srgb, var(--brand) 9%, var(--surface)));
}

@media (max-width: 760px) {
  #dashboard .month-panel .metric {
    min-height: 60px;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 6px;
    row-gap: 2px;
    padding: 8px 6px;
  }
  #dashboard .month-panel .metric-icon { display: grid; width: 28px; height: 28px; }
  #dashboard .month-panel .metric-icon svg { width: 16px; height: 16px; }
  #dashboard .month-panel .metric-label { min-height: 0; font-size: 8.6px; }
  #dashboard .month-panel .metric strong { font-size: clamp(10px, 2.8vw, 12.5px); }
}