/* Scoped visuals for the reports dashboard */
.pf-report * { box-sizing: border-box; }

/* Color system (scoped via cascade) */
.pf-report {
  --primary: #2563eb;
  --primary-dark: #1e40af;
  --secondary: #64748b;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --card-radius: 12px;
  --shadow: 0 4px 6px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.1);
  color: #334155;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Do NOT touch body/site */
.pf-report .pf-r-header {
  text-align: center;
  margin-bottom: 22px;
  padding: 22px;
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
}
.pf-report h1 { margin:0 0 8px; font-size: 2rem; color: #1e293b; }
.pf-report .subtitle { color: var(--secondary); }

.pf-report .filters-container {
  background: #fff; border-radius: var(--card-radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow);
}
.pf-report .filters-title { font-weight: 600; margin-bottom: 12px; display:flex; gap:10px; align-items:center; color:#1e293b; }
.pf-report .filters-title i { color: var(--primary); }
.pf-report .filters-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px;
}
.pf-report .filter-group label { font-size: .9rem; color: var(--secondary); }
.pf-report input[type="date"], .pf-report select, .pf-report button, .pf-report .btn {
  border:1px solid #e2e8f0; border-radius:8px; padding:10px 12px; background:#fff; font-size:.95rem;
}
.pf-report .btn { display:inline-flex; gap:8px; align-items:center; cursor:pointer; }
.pf-report .btn-primary { background: var(--primary); color:#fff; border-color: var(--primary); }
.pf-report .btn-primary:hover { background: var(--primary-dark); }
.pf-report .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.pf-report .btn-outline:hover { background: #eff6ff; }
.pf-report .btn-sm { padding:8px 12px; font-size:.85rem; }
.pf-report .pf-note { color: var(--secondary); margin-top:8px; }

.pf-report .summary-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; margin-bottom: 22px;
}
.pf-report .summary-item { padding: 20px; border-radius: var(--card-radius); color:#fff; box-shadow: var(--shadow); }
.pf-report .summary-item .summary-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.pf-report .summary-icon { width:40px;height:40px;border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.2); }
.pf-report .summary-title { font-weight:600; }
.pf-report .summary-value { font-size:1.6rem; font-weight:700; }
.pf-report .summary-description { opacity:.9; }
.pf-report .summary-trend { margin-top:8px; display:flex; gap:8px; align-items:center;}

/* Card color variants */
.pf-report .summary-item.needs { background: linear-gradient(135deg, var(--primary), #3b82f6); }
.pf-report .summary-item.wants { background: linear-gradient(135deg, var(--warning), #d97706); }
.pf-report .summary-item.savings { background: linear-gradient(135deg, var(--success), #059669); }
.pf-report .summary-item.remaining { background: linear-gradient(135deg, var(--secondary), #475569); }

.pf-report .dashboard-grid {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(420px,1fr)); gap: 20px; margin-bottom: 24px;
}
.pf-report .card { background:#fff; border-radius: var(--card-radius); padding: 20px; box-shadow: var(--shadow); }
.pf-report .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pf-report .card-title { font-weight:600; color:#1e293b; display:flex; gap:8px; align-items:center; }
.pf-report .chart-container { position:relative; height:300px; }

.pf-report .table-container { background:#fff; border-radius: var(--card-radius); padding: 20px; box-shadow: var(--shadow); }
.pf-report .data-table { width:100%; border-collapse: collapse; }
.pf-report .data-table th, .pf-report .data-table td { border-bottom:1px solid #e2e8f0; padding:12px 10px; text-align:left; }
.pf-report .data-table th { background:#f8fafc; color:#1e293b; font-weight:600; position:sticky; top:0; }
.pf-report .data-table tr:hover { background:#f1f5f9; }
.pf-report .positive{ color: var(--success); font-weight:600; }
.pf-report .negative{ color: var(--danger);  font-weight:600; }

/* Responsiveness */
@media (max-width: 768px){
  .pf-report .dashboard-grid { grid-template-columns: 1fr; }
  .pf-report .filters-grid   { grid-template-columns: 1fr; }
}