/* Budgets. */

.budget-card {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.budget-card--warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.budget-card--over { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }

.budget-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.budget-card__titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.budget-card__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.budget-card__actions { display: inline-flex; gap: 2px; flex: none; }

.budget-card__figures {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.budget-card__spent {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.budget-card__limit { color: var(--text-3); font-variant-numeric: tabular-nums; }
.budget-card__pct {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-2);
}
.budget-card__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-2);
  flex-wrap: wrap;
}
.budget-card__remaining { font-variant-numeric: tabular-nums; }

.budget-overall {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.budget-overall__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.budget-overall__pct {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-2);
}
.budget-overall__legend {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.budget-overall__legend strong { color: var(--text); font-variant-numeric: tabular-nums; }