diff --git a/reports-app/frontend/src/assets/css/components/cards.css b/reports-app/frontend/src/assets/css/components/cards.css
index 2a96baf..8c4dfed 100644
--- a/reports-app/frontend/src/assets/css/components/cards.css
+++ b/reports-app/frontend/src/assets/css/components/cards.css
@@ -349,12 +349,83 @@
   .action-card {
     padding: var(--space-sm);
   }
-  
+
   .mini-card {
     padding: var(--space-xs);
   }
-  
+
   .mini-card-value {
     font-size: var(--text-base);
   }
+}
+
+/* ===== Dashboard Metric Cards ===== */
+
+.metric-card {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--card-radius);
+  padding: var(--card-padding, 1.5rem);
+  transition: all var(--transition-fast);
+  min-height: var(--card-min-height, 200px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap, 1rem);
+}
+
+.metric-card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(var(--hover-lift, -2px));
+  border-color: var(--color-primary);
+}
+
+/* Metric display patterns */
+.metric-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-sm);
+}
+
+.metric-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  font-size: var(--text-xl);
+}
+
+.metric-value {
+  font-size: var(--value-size, 2rem);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  font-family: var(--font-mono, monospace);
+  color: var(--color-text);
+}
+
+.metric-value-lg {
+  font-size: var(--value-size-lg, 2.5rem);
+}
+
+.metric-label {
+  font-size: var(--label-size, 0.875rem);
+  font-weight: var(--font-medium);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-xs);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .metric-card {
+    min-height: calc(var(--card-min-height, 200px) - 40px);
+    padding: var(--card-padding-sm, 1rem);
+  }
+
+  .metric-value {
+    font-size: 1.25rem;
+  }
 }
\ No newline at end of file
diff --git a/reports-app/frontend/src/assets/css/main.css b/reports-app/frontend/src/assets/css/main.css
index 3e0252d..0d1d762 100644
--- a/reports-app/frontend/src/assets/css/main.css
+++ b/reports-app/frontend/src/assets/css/main.css
@@ -30,6 +30,7 @@
 @import './utilities/display.css';
 @import './utilities/text.css';
 @import './utilities/flex.css';
+@import './utilities/colors.css';
 
 /* 6. Vendor Overrides - NEW */
 @import './vendor/primevue-overrides.css';  /* Centralized PrimeVue customization */
diff --git a/reports-app/frontend/src/assets/css/patterns/dashboard.css b/reports-app/frontend/src/assets/css/patterns/dashboard.css
index 39c02f0..b010628 100644
--- a/reports-app/frontend/src/assets/css/patterns/dashboard.css
+++ b/reports-app/frontend/src/assets/css/patterns/dashboard.css
@@ -111,3 +111,80 @@
   font-family: var(--font-mono, monospace);
   font-size: var(--text-sm);
 }
+
+/* ===== Enhanced Sparkline Patterns ===== */
+
+.metric-sparkline {
+  margin: var(--space-md) 0;
+}
+
+.sparkline-container {
+  width: 100%;
+  height: 60px;
+  position: relative;
+}
+
+.sparkline-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.sparkline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-xs);
+}
+
+.sparkline-title {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  font-weight: var(--font-medium);
+}
+
+.sparkline-value {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  font-family: var(--font-mono, monospace);
+}
+
+/* ===== Enhanced Breakdown Patterns ===== */
+
+.breakdown-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
+  transition: background-color var(--transition-fast);
+  margin-bottom: var(--space-xs);
+}
+
+.breakdown-header:hover {
+  background: var(--color-bg-secondary);
+}
+
+.breakdown-header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.breakdown-toggle {
+  color: var(--color-text-secondary);
+  font-size: 0.625rem;
+  transition: transform var(--transition-fast);
+}
+
+.breakdown-toggle.expanded {
+  transform: rotate(90deg);
+}
+
+.breakdown-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--space-md) 0;
+}
diff --git a/reports-app/frontend/src/assets/css/utilities/colors.css b/reports-app/frontend/src/assets/css/utilities/colors.css
new file mode 100644
index 0000000..94bb57e
--- /dev/null
+++ b/reports-app/frontend/src/assets/css/utilities/colors.css
@@ -0,0 +1,102 @@
+/* Color Utilities - ROA2WEB */
+
+/* ===== Background Colors ===== */
+.bg-primary {
+  background-color: var(--color-primary);
+  color: var(--color-text-inverse);
+}
+
+.bg-success {
+  background-color: var(--color-success);
+  color: var(--color-text-inverse);
+}
+
+.bg-warning {
+  background-color: var(--color-warning);
+  color: var(--color-text-inverse);
+}
+
+.bg-error {
+  background-color: var(--color-error);
+  color: var(--color-text-inverse);
+}
+
+.bg-info {
+  background-color: var(--color-info);
+  color: var(--color-text-inverse);
+}
+
+/* ===== Light Background Colors (10% opacity) ===== */
+.bg-primary-light {
+  background-color: rgba(37, 99, 235, 0.1);
+  color: var(--color-primary);
+}
+
+.bg-success-light {
+  background-color: rgba(5, 150, 105, 0.1);
+  color: var(--color-success);
+}
+
+.bg-warning-light {
+  background-color: rgba(217, 119, 6, 0.1);
+  color: var(--color-warning);
+}
+
+.bg-error-light {
+  background-color: rgba(220, 38, 38, 0.1);
+  color: var(--color-error);
+}
+
+.bg-info-light {
+  background-color: rgba(8, 145, 178, 0.1);
+  color: var(--color-info);
+}
+
+/* ===== Text Colors ===== */
+.text-primary {
+  color: var(--color-primary);
+}
+
+.text-success {
+  color: var(--color-success);
+}
+
+.text-warning {
+  color: var(--color-warning);
+}
+
+.text-error {
+  color: var(--color-error);
+}
+
+.text-info {
+  color: var(--color-info);
+}
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+.text-secondary {
+  color: var(--color-text-secondary);
+}
+
+/* ===== Icon Background Utilities ===== */
+.icon-bg {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+}
+
+.icon-bg-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.icon-bg-lg {
+  width: 48px;
+  height: 48px;
+}
diff --git a/reports-app/frontend/src/components/dashboard/cards/MetricCard.vue b/reports-app/frontend/src/components/dashboard/cards/MetricCard.vue
index d470b84..3a4b245 100644
--- a/reports-app/frontend/src/components/dashboard/cards/MetricCard.vue
+++ b/reports-app/frontend/src/components/dashboard/cards/MetricCard.vue
@@ -2,8 +2,8 @@
   <div class="metric-card">
     <!-- Header with icon and title -->
     <div class="metric-header">
-      <span class="metric-icon" :class="iconClass">{{ icon }}</span>
-      <span class="metric-title">{{ title }}</span>
+      <span class="metric-icon bg-primary-light text-primary">{{ icon }}</span>
+      <span class="metric-label">{{ title }}</span>
     </div>
 
     <!-- Main value display -->
@@ -12,13 +12,13 @@
     </div>
 
     <!-- Trend indicator -->
-    <div class="metric-trend" :class="trendClass" v-if="trend">
+    <div class="trend-indicator" :class="trendClass" v-if="trend">
       <span class="trend-icon">{{ trendIcon }}</span>
       <span class="trend-value">{{ Math.round(Math.abs(trend.value), 2) }}%</span>
     </div>
 
     <!-- Sparkline mini-chart - STACKED BELOW (Best Practice) -->
-    <div class="metric-sparkline-container" v-if="sparklineData && sparklineData.length > 0">
+    <div class="sparkline-container" v-if="sparklineData && sparklineData.length > 0">
       <canvas
         ref="sparklineCanvas"
         class="sparkline-canvas"
@@ -37,16 +37,16 @@
 
         <!-- Valoare ierarhică (cu sub-items) -->
         <div v-else class="breakdown-group">
-          <div class="breakdown-item breakdown-header" @click="() => toggleExpanded(key)">
+          <div class="breakdown-header" @click="() => toggleExpanded(key)">
             <div class="breakdown-header-left">
-              <span class="collapse-icon">{{ isItemExpanded(key) ? '▼' : '▶' }}</span>
+              <i class="pi pi-chevron-right breakdown-toggle" :class="{ 'expanded': isItemExpanded(key) }"></i>
               <span class="breakdown-label">{{ formatBreakdownLabel(key) }}:</span>
             </div>
             <span class="breakdown-value">{{ formatCurrency(value.total) }}</span>
           </div>
 
           <!-- Sub-items (collapsible) -->
-          <div v-if="value.items && value.items.length > 0" v-show="isItemExpanded(key)" class="breakdown-subitems">
+          <div v-if="value.items && value.items.length > 0" v-show="isItemExpanded(key)" class="breakdown-subitems slide-down">
             <div v-for="(item, idx) in value.items" :key="idx" class="breakdown-subitem">
               <span class="breakdown-sublabel">
                 {{ item.nume }} <span v-if="item.cont" class="breakdown-cont">({{ item.cont }})</span>
@@ -378,95 +378,27 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-.metric-card {
-  background: var(--color-bg, #ffffff);
-  border: 1px solid var(--color-border, #e5e7eb);
-  border-radius: var(--card-radius, 8px);
-  padding: var(--space-lg, 1.5rem);
-  transition: all 0.3s ease;
-  position: relative;
-  min-height: 280px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
+/* Component-specific styles only - Base patterns now in global CSS */
 
-.metric-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
-  border-color: var(--color-primary, #3b82f6);
-}
-
-/* Header */
-.metric-header {
+/* Trend indicator styles - Component specific */
+.trend-indicator {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.metric-icon {
-  font-size: 1.25rem;
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-bg-secondary, #f8fafc);
-  border-radius: var(--radius-sm, 4px);
-  transition: all 0.3s ease;
-}
-
-.metric-card:hover .metric-icon {
-  background: var(--color-primary-light, #dbeafe);
-}
-
-.metric-title {
-  font-size: var(--text-sm, 0.875rem);
-  font-weight: var(--font-medium, 500);
-  color: var(--color-text-secondary, #6b7280);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* Value */
-.metric-value {
-  font-size: var(--text-2xl, 1.875rem);
-  font-weight: var(--font-bold, 700);
-  color: var(--color-text-primary, #111827);
-  line-height: 1.2;
-  margin-bottom: 0.5rem;
-}
-
-.metric-value.positive {
-  color: var(--color-success, #10b981);
-}
-
-.metric-value.negative {
-  color: var(--color-danger, #ef4444);
-}
-
-/* Trend - Positioned below value */
-.metric-trend {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: var(--text-sm, 0.875rem);
-  font-weight: var(--font-medium, 500);
-  margin-bottom: 0.75rem;
+  gap: var(--space-xs);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
 }
 
 .trend-up {
-  color: var(--color-success, #10b981);
+  color: var(--color-success);
 }
 
 .trend-down {
-  color: var(--color-danger, #ef4444);
+  color: var(--color-error);
 }
 
 .trend-neutral {
-  color: var(--color-text-secondary, #6b7280);
+  color: var(--color-text-secondary);
 }
 
 .trend-icon {
@@ -474,235 +406,50 @@ onBeforeUnmount(() => {
 }
 
 .trend-value {
-  font-weight: var(--font-semibold, 600);
+  font-weight: var(--font-semibold);
 }
 
-/* Sparkline Container - STACKED LAYOUT (Best Practice) */
-.metric-sparkline-container {
-  width: 100%;
-  height: 80px;
-  margin-bottom: 0.75rem;
-  border-radius: 4px;
-  position: relative;
-  background: var(--color-bg-secondary, #f8fafc);
-  border: 1px solid var(--color-border, #e5e7eb);
+/* Value styling - Component specific colors */
+.metric-value.positive {
+  color: var(--color-success);
 }
 
-.sparkline-canvas {
-  width: 100% !important;
-  height: 100% !important;
-  display: block;
+.metric-value.negative {
+  color: var(--color-error);
 }
 
-/* Responsive design */
-@media (max-width: 768px) {
-  .metric-card {
-    min-height: 240px;
-    padding: var(--space-md, 1rem);
-  }
-
-  .metric-value {
-    font-size: var(--text-xl, 1.5rem);
-    margin-bottom: 0.375rem;
-  }
-
-  .metric-trend {
-    margin-bottom: 0.5rem;
-  }
-
-  .metric-sparkline-container {
-    height: 70px;
-    margin-bottom: 0.5rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .metric-card {
-    min-height: 200px;
-    padding: var(--space-sm, 0.75rem);
-    gap: 0.5rem;
-  }
-
-  .metric-icon {
-    width: 1.5rem;
-    height: 1.5rem;
-    font-size: 1rem;
-  }
-
-  .metric-title {
-    font-size: var(--text-xs, 0.75rem);
-  }
-
-  .metric-value {
-    font-size: var(--text-lg, 1.125rem);
-    margin-bottom: 0.25rem;
-  }
-
-  .metric-trend {
-    font-size: var(--text-xs, 0.75rem);
-    margin-bottom: 0.375rem;
-  }
-
-  .metric-sparkline-container {
-    height: 60px;
-    margin-bottom: 0.5rem;
-  }
-}
-
-/* CSS Custom Properties fallbacks */
-:root {
-  --color-bg: #ffffff;
-  --color-bg-secondary: #f8fafc;
-  --color-border: #e5e7eb;
-  --color-primary: #3b82f6;
-  --color-primary-light: #dbeafe;
-  --color-success: #10b981;
-  --color-danger: #ef4444;
-  --color-text-primary: #111827;
-  --color-text-secondary: #6b7280;
-  --card-radius: 8px;
-  --radius-sm: 4px;
-  --space-sm: 0.75rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
-  --text-lg: 1.125rem;
-  --text-xl: 1.5rem;
-  --text-2xl: 1.875rem;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-}
-
-/* Breakdown section */
+/* Breakdown section - Component specific layout */
 .metric-breakdown {
-  margin-top: 1rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--color-border, #e5e7eb);
+  margin-top: var(--space-lg);
+  padding-top: var(--space-md);
+  border-top: 1px solid var(--color-border);
 }
 
 .breakdown-section {
-  margin-bottom: 0.875rem;
+  margin-bottom: var(--space-sm);
 }
 
 .breakdown-section:last-child {
   margin-bottom: 0;
 }
 
+.breakdown-group {
+  margin-bottom: var(--space-sm);
+}
+
+/* Breakdown item - Component specific styles */
 .breakdown-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  gap: 1rem;
+  margin-bottom: var(--space-xs);
 }
 
 .breakdown-item:last-child {
   margin-bottom: 0;
 }
 
-.breakdown-label {
-  font-size: 1rem;
-  color: var(--color-text-secondary, #6b7280);
-  font-weight: var(--font-medium, 500);
-}
-
-.breakdown-value {
-  font-size: 1.125rem;
-  color: var(--color-text-primary, #111827);
-  font-weight: var(--font-semibold, 600);
-  font-family: monospace;
-}
-
-/* Hierarchical breakdown styles */
-.breakdown-group {
-  margin-bottom: 0.875rem;
-}
-
-.breakdown-header {
-  font-weight: var(--font-semibold, 600);
-  border-bottom: 1px solid var(--color-border, #e5e7eb);
-  padding-bottom: 0.5rem;
-  margin-bottom: 0.625rem;
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.2s ease;
-}
-
-.breakdown-header:hover {
-  background: var(--color-bg-secondary, #f8fafc);
-  padding: 0.25rem 0.5rem;
-  margin: -0.25rem -0.5rem 0.625rem -0.5rem;
-  border-radius: var(--radius-sm, 4px);
-}
-
-.breakdown-header-left {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.collapse-icon {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary, #6b7280);
-  transition: transform 0.2s ease;
-  display: inline-block;
-  width: 1rem;
-}
-
-.breakdown-subitems {
-  padding-left: 0;
-  border-left: none;
-  margin-top: 0.625rem;
-  animation: slideDown 0.2s ease-out;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.breakdown-subitem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.375rem 0;
-  gap: 0.75rem;
-}
-
-.breakdown-sublabel {
-  color: var(--color-text-secondary, #6b7280);
-  font-size: 0.875rem;
-}
-
+/* Breakdown cont label - Component specific */
 .breakdown-cont {
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   opacity: 0.7;
-  margin-left: 0.25rem;
-}
-
-.breakdown-subvalue {
-  font-weight: var(--font-medium, 500);
-  font-family: monospace;
-  font-size: 0.875rem;
-  color: var(--color-text-primary, #111827);
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .metric-card {
-    --color-bg: #1f2937;
-    --color-bg-secondary: #374151;
-    --color-border: #4b5563;
-    --color-text-primary: #f9fafb;
-    --color-text-secondary: #d1d5db;
-  }
+  margin-left: var(--space-xs);
 }
 </style>
\ No newline at end of file