.purchases-dashboard {
  .loading-wrap, .error-wrap {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 300px; gap: 1rem;
    i { font-size: 2.5rem; color: var(--color-text-muted); }
    p { color: var(--color-text-muted); }
  }

  .overdue-alert {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; margin-bottom: 1rem;
    i { color: #ef4444; font-size: 1.25rem; }
    span { flex: 1; color: #991b1b; font-size: 0.875rem; }
    strong { font-weight: 700; }
  }

  .stat-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;
  }

  .stat-card {
    position: relative; overflow: hidden; background: white; border-radius: 1rem;
    padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem;
    border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all .3s;
    &:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
  }
  .stat-icon-wrap {
    width: 48px; height: 48px; border-radius: 14px; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    i { font-size: 1.25rem; color: white; }
  }
  .stat-info {
    display: flex; flex-direction: column;
    .stat-value { font-size: 1.4rem; font-weight: 800; line-height: 1.1; color: #1e293b; }
    .stat-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; margin-top: .2rem; }
  }
  .stat-decoration {
    position: absolute; inset-inline-end: -20px; top: -20px; width: 80px; height: 80px;
    border-radius: 50%; opacity: 0.08;
  }

  .stat-blue .stat-icon-wrap { background: linear-gradient(135deg, #3b82f6, #2563eb); }
  .stat-blue .stat-decoration { background: #3b82f6; }
  .stat-amber .stat-icon-wrap { background: linear-gradient(135deg, #f59e0b, #d97706); }
  .stat-amber .stat-decoration { background: #f59e0b; }
  .stat-green .stat-icon-wrap { background: linear-gradient(135deg, #10b981, #059669); }
  .stat-green .stat-decoration { background: #10b981; }
  .stat-purple .stat-icon-wrap { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
  .stat-purple .stat-decoration { background: #8b5cf6; }
  .stat-rose .stat-icon-wrap { background: linear-gradient(135deg, #f43f5e, #e11d48); }
  .stat-rose .stat-decoration { background: #f43f5e; }

  .quick-actions {
    display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap;
  }

  .charts-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;
    @media (max-width: 768px) { grid-template-columns: 1fr; }
  }

  .chart-card {
    background: var(--color-surface-card, white); border-radius: 12px; padding: 1.25rem;
    border: 1px solid var(--color-surface-border, rgba(0,0,0,0.05));
    h3 { margin: 0 0 1rem; font-size: 0.9rem; font-weight: 700; color: var(--color-text-primary); }
    .no-chart-data {
      display: flex; align-items: center; justify-content: center; min-height: 200px;
      color: var(--color-text-muted); font-size: 0.875rem;
    }
  }

  .mono { font-family: 'Courier New', monospace; font-weight: 600; font-size: 0.8rem; }
  .amount { font-family: 'Courier New', monospace; font-weight: 600; text-align: end; }
}

:host-context(.dark-mode), :host-context([data-theme="dark"]) {
  .purchases-dashboard {
    .stat-card { background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(12px); border-color: rgba(255,255,255,0.06); }
    .stat-info .stat-value { color: var(--color-text-primary); }
    .overdue-alert { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }
    .overdue-alert span { color: #fca5a5; }
  }
}
