/**
 * 天偌装修平台 - 预算管理样式
 * Uses design-system.css tokens
 */

/* =============================================
   Budget Overview
   ============================================= */
.budget-summary-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg); margin-bottom: var(--space-xl);
}
.budget-summary {
  background: var(--white); border-radius: var(--radius-lg);
  padding: var(--space-lg); box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.budget-summary .summary-label { font-size: .82rem; color: var(--text-muted); margin-bottom: 4px; }
.budget-summary .summary-value { font-size: 1.5rem; font-weight: 800; }
.budget-summary.primary .summary-value { color: var(--primary); }
.budget-summary.success .summary-value { color: var(--success); }
.budget-summary.warning .summary-value { color: var(--warning); }
.budget-summary.danger .summary-value { color: var(--danger); }

/* =============================================
   Material Table
   ============================================= */
.material-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--white); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.material-table thead { background: var(--bg-page); }
.material-table th {
  padding: 12px 16px; text-align: left; font-size: .82rem;
  font-weight: 700; color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.material-table td {
  padding: 12px 16px; font-size: .88rem; border-bottom: 1px solid var(--border-light);
}
.material-table tbody tr:hover { background: var(--bg-hover); }
.material-table tbody tr:last-child td { border-bottom: none; }
.material-table .text-right { text-align: right; }
.material-table .category-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: .75rem; font-weight: 600;
}
.material-table .cat-rough { background: #fef3c7; color: #92400e; }
.material-table .cat-finish { background: #dbeafe; color: #1e40af; }
.material-table .cat-appliance { background: #d1fae5; color: #065f46; }
.material-table .cat-other { background: var(--bg-page); color: var(--text-secondary); }

/* =============================================
   Material Form
   ============================================= */
.material-form {
  background: var(--white); border-radius: var(--radius-lg);
  padding: var(--space-lg); box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light); margin-bottom: var(--space-lg);
}
.material-form .form-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md); margin-bottom: var(--space-md);
}
.material-form .form-actions {
  display: flex; gap: var(--space-sm); justify-content: flex-end;
}

/* =============================================
   Budget Progress Bar
   ============================================= */
.budget-progress { margin-bottom: var(--space-lg); }
.budget-progress .progress-header {
  display: flex; justify-content: space-between; font-size: .85rem;
  margin-bottom: 6px;
}
.budget-progress .progress-bar {
  height: 10px; background: var(--border-light); border-radius: 5px;
  overflow: hidden;
}
.budget-progress .progress-fill {
  height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--primary-light), var(--primary));
  transition: width .5s ease;
}
.budget-progress .progress-fill.over { background: linear-gradient(90deg, var(--warning), var(--danger)); }

/* =============================================
   Pie Chart / Stats
   ============================================= */
.budget-chart-area {
  background: var(--white); border-radius: var(--radius-lg);
  padding: var(--space-lg); box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.budget-chart-area h3 { font-size: .95rem; margin-bottom: var(--space-md); }
.budget-chart-area canvas { max-height: 260px; }
.budget-category-list { margin-top: var(--space-md); }
.budget-category-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; font-size: .85rem; border-bottom: 1px solid var(--border-light);
}
.budget-category-item:last-child { border-bottom: none; }
.budget-category-item .cat-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0;
}
.budget-category-item .cat-name { flex: 1; display: flex; align-items: center; }
.budget-category-item .cat-amount { font-weight: 600; }

/* =============================================
   Empty State (for budget)
   ============================================= */
.budget-empty {
  text-align: center; padding: var(--space-3xl) var(--space-lg);
  color: var(--text-muted);
}
.budget-empty .empty-icon { font-size: 2.5rem; margin-bottom: var(--space-md); opacity: .3; }
.budget-empty p { font-size: .9rem; margin-bottom: var(--space-md); }

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 768px) {
  .material-form .form-row { grid-template-columns: 1fr; }
  .material-table { display: block; overflow-x: auto; }
  .budget-summary-cards { grid-template-columns: repeat(2, 1fr); }
}