feat(css): Phase 2 - Add global pattern foundation

- Create interactive.css (loading spinners, trends, collapse patterns)
- Create dashboard.css (page headers, metrics grid, breakdowns)
- Create animations.css (slideDown, fadeIn, pulse transitions)
- Create tokens.css (extended design tokens for cards/animations/metrics)
- Create primevue-overrides.css (centralized PrimeVue component styling)
- Update main.css with new pattern imports
- Zero visual changes (additive foundation only)

Files created: 5 new CSS pattern files
Lines added: 431 lines of reusable patterns
CSS bundle: 401.25 kB (before optimization)
Build status: ✅ Successful

Phase: 2/7 complete
Next: Phase 3 - PrimeVue Centralizare

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

reports-app/frontend/src/assets/css/patterns/dashboard.css

@@ -0,0 +1,113 @@
+/* Dashboard Patterns - ROA2WEB */
+
+/* ===== Page Headers ===== */
+.page-header {
+  margin-bottom: var(--space-xl);
+  text-align: center;
+}
+
+.page-title {
+  margin: 0 0 var(--space-sm) 0;
+  font-size: var(--text-3xl);
+  font-weight: var(--font-bold);
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-md);
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: var(--text-base);
+  color: var(--color-text-secondary);
+}
+
+/* ===== Section Structure ===== */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-lg);
+  background: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+  flex-wrap: wrap;
+  gap: var(--space-md);
+}
+
+.section-title {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--color-text);
+  margin: 0;
+}
+
+.section-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+/* ===== Metrics Grid ===== */
+.metrics-row {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-lg);
+  margin-bottom: var(--space-xl);
+}
+
+@media (max-width: 1024px) {
+  .metrics-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ===== Breakdown Patterns ===== */
+.breakdown-section {
+  padding-top: var(--space-lg);
+  border-top: 1px solid var(--color-border);
+  margin-top: var(--space-lg);
+}
+
+.breakdown-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--space-sm) 0;
+}
+
+.breakdown-label {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  font-weight: var(--font-medium);
+}
+
+.breakdown-value {
+  font-size: var(--text-base);
+  color: var(--color-text);
+  font-weight: var(--font-semibold);
+  font-family: var(--font-mono, monospace);
+}
+
+.breakdown-subitems {
+  padding-left: var(--space-lg);
+  margin-top: var(--space-sm);
+}
+
+.breakdown-subitem {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-xs) 0;
+}
+
+.breakdown-sublabel {
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+}
+
+.breakdown-subvalue {
+  font-weight: var(--font-medium);
+  font-family: var(--font-mono, monospace);
+  font-size: var(--text-sm);
+}