/* ========================================
   ExpenseIQ — Budgets Styles
   ======================================== */

.overall-budget-card {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.overall-budget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.overall-budget-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}
.overall-budget-amounts {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}
.overall-budget-spent {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
}
.overall-budget-total {
  font-size: 16px;
  color: var(--text-muted);
  font-weight: 600;
}
.overall-budget-meta {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.budget-meta-item {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.budget-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.budget-card {
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.budget-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.budget-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.budget-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.budget-card-icon svg { width: 18px; height: 18px; }
.budget-card-info { flex: 1; }
.budget-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}
.budget-card-amounts {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}
.budget-card-status {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.budget-card-status.on-track { background: var(--color-income-bg); color: var(--color-income); }
.budget-card-status.watch-out { background: var(--color-warning-bg); color: var(--color-warning); }
.budget-card-status.near-limit { background: var(--color-expense-bg); color: var(--color-expense); }
.budget-card-status.over-budget { background: var(--color-expense); color: white; }

.budget-card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}