/* Budget tab — progress bars and expense list styling. Unique to this tab. */

.budget-summary {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.budget-card {
  background: #fff;
  border: 1px solid #eadfc9;
  border-radius: 20px 20px 20px 4px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.budget-card h4 { margin: 0 0 10px; color: var(--maroon); font-family: 'Playfair Display', serif; }
.budget-amounts { display: flex; justify-content: space-between; font-size: 13px; color: #5c503c; margin-bottom: 6px; }
.budget-amounts strong { color: var(--maroon-dark); }
.budget-bar-track {
  background: var(--cream);
  border: 1px solid #eadfc9;
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}
.budget-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--maroon));
  border-radius: 999px;
  transition: width 0.6s ease;
}

.expenses-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.expense-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #eadfc9;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 14px;
  box-shadow: var(--shadow);
}
.expense-row .expense-desc { font-weight: 600; color: var(--ink); }
.expense-row .expense-meta { font-size: 12px; color: #776a55; }
.expense-row .expense-amount { font-weight: 700; color: var(--maroon); }