Add dashboard chart animations and SVG integration for dynamic data visualization

theme/assets/css/main.css

@@ -2601,6 +2601,140 @@ p:last-child { margin-bottom: 0; }
   0%   { opacity: 1; }
   100% { opacity: 1; }
 }
+
+/* ── Dashboard Chart Animations ────────────────────────── */
+.dashboard-chart-container {
+  position: relative;
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  background: var(--card-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  will-change: opacity;
+  data-dashboard-container: true;
+}
+
+.dashboard-chart {
+  width: 100%;
+  height: auto;
+  display: block;
+  font-family: var(--font-sans);
+  user-select: none;
+}
+
+/* Bar animation - smooth height transitions */
+.dashboard-chart .bar {
+  fill: url(#barGradient);
+  will-change: height;
+  transition: height 0.3s ease-out;
+  vector-effect: non-scaling-stroke;
+}
+
+/* Line path - draw animation */
+.dashboard-chart .line-path {
+  stroke: var(--color-accent);
+  fill: none;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  will-change: stroke-dashoffset, d;
+  transition: stroke 0.3s ease;
+}
+
+.dashboard-chart .line-fill {
+  fill: url(#lineGradient);
+  will-change: d;
+  opacity: 0.5;
+}
+
+/* Pie chart segment animations */
+.dashboard-chart .pie-segment {
+  will-change: transform;
+  transform-origin: center;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Chart title styling */
+.dashboard-chart .chart-title {
+  font-size: 14px;
+  font-weight: 600;
+  fill: var(--color-heading);
+  letter-spacing: 0.3px;
+}
+
+.dashboard-chart .chart-label {
+  font-size: 12px;
+  fill: var(--color-text-muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.2px;
+}
+
+.dashboard-chart .chart-value {
+  font-size: 13px;
+  font-weight: 600;
+  fill: var(--color-text);
+  transition: fill 0.2s ease;
+}
+
+/* Dark mode support */
+[data-theme="dark"] .dashboard-chart {
+  --text-primary: #E0E0E0;
+  --text-secondary: #9E9E9E;
+  --primary-color: #66BB6A;
+  --accent-color: #4CAF50;
+  --border-color: #333333;
+}
+
+[data-theme="light"] .dashboard-chart {
+  --text-primary: #1a1a1a;
+  --text-secondary: #666;
+  --primary-color: #3b82f6;
+  --accent-color: #10b981;
+  --border-color: #e5e7eb;
+}
+
+/* Performance: disable animations on reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-chart .bar,
+  .dashboard-chart .line-path,
+  .dashboard-chart .line-fill,
+  .dashboard-chart .pie-segment {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* Responsive: Adjust for smaller screens */
+@media (max-width: 768px) {
+  .dashboard-chart-container {
+    padding: 1rem;
+    border-radius: var(--radius-md);
+  }
+  
+  .dashboard-chart .chart-title {
+    font-size: 13px;
+  }
+  
+  .dashboard-chart .chart-label {
+    font-size: 11px;
+  }
+  
+  .dashboard-chart .chart-value {
+    font-size: 12px;
+  }
+}
+
+/* Touch devices: No hover effects */
+@media (hover: none) {
+  .dashboard-chart-container:hover {
+    box-shadow: var(--shadow-md);
+  }
+}
+
 .cta-banner {
   position: relative;
   overflow: hidden;