fix: replace emojis with MUI icons and use theme colors in dashboard (refs #2)

Visual consistency fixes:
- Replace all emojis with MUI Rounded icons
- Use theme colors (primary.main, warning.main, success.main, error.main)
- Use MUI Box with sx prop for consistent styling
- Use shared Button component instead of custom styled buttons
- Use theme tokens for dark mode (avus, titanio, canna)

Components updated:
- SummaryCards: DirectionsCarRoundedIcon, BuildRoundedIcon, LocalGasStationRoundedIcon
- QuickActions: MUI icons with primary.main color
- VehicleAttention: ErrorRoundedIcon, WarningAmberRoundedIcon, ScheduleRoundedIcon
- DashboardScreen: Proper icons for error/empty states, shared Button component

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

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

frontend/src/features/dashboard/components/SummaryCards.tsx

@@ -3,6 +3,10 @@
  */
 
 import React from 'react';
+import { Box } from '@mui/material';
+import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
+import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
+import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
 import { DashboardSummary } from '../types';
 
@@ -15,52 +19,71 @@ export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
     {
       title: 'Total Vehicles',
       value: summary.totalVehicles,
-      icon: '🚗',
-      color: 'text-blue-600',
-      bgColor: 'bg-blue-50',
+      icon: DirectionsCarRoundedIcon,
+      color: 'primary.main',
     },
     {
       title: 'Upcoming Maintenance',
       value: summary.upcomingMaintenanceCount,
       subtitle: 'Next 30 days',
-      icon: '🔧',
-      color: 'text-orange-600',
-      bgColor: 'bg-orange-50',
+      icon: BuildRoundedIcon,
+      color: 'warning.main',
     },
     {
       title: 'Recent Fuel Logs',
       value: summary.recentFuelLogsCount,
       subtitle: 'Last 7 days',
-      icon: '⛽',
-      color: 'text-green-600',
-      bgColor: 'bg-green-50',
+      icon: LocalGasStationRoundedIcon,
+      color: 'success.main',
     },
   ];
 
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-      {cards.map((card) => (
-        <GlassCard key={card.title} padding="md">
-          <div className="flex items-start gap-3">
-            <div className={`flex-shrink-0 w-12 h-12 rounded-2xl ${card.bgColor} flex items-center justify-center text-2xl`}>
-              {card.icon}
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm text-slate-500 dark:text-slate-400 font-medium mb-1">
-                {card.title}
-              </p>
-              <p className={`text-3xl font-bold ${card.color} dark:opacity-90`}>
-                {card.value}
-              </p>
-              {card.subtitle && (
-                <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
-                  {card.subtitle}
+      {cards.map((card) => {
+        const IconComponent = card.icon;
+        return (
+          <GlassCard key={card.title} padding="md">
+            <div className="flex items-start gap-3">
+              <Box
+                sx={{
+                  flexShrink: 0,
+                  width: 48,
+                  height: 48,
+                  borderRadius: 3,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  bgcolor: 'action.hover',
+                }}
+              >
+                <IconComponent sx={{ fontSize: 24, color: card.color }} />
+              </Box>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm text-slate-500 dark:text-titanio font-medium mb-1">
+                  {card.title}
                 </p>
-              )}
+                <Box
+                  component="p"
+                  sx={{
+                    fontSize: '1.875rem',
+                    fontWeight: 700,
+                    color: 'text.primary',
+                    lineHeight: 1.2,
+                  }}
+                >
+                  {card.value}
+                </Box>
+                {card.subtitle && (
+                  <p className="text-xs text-slate-400 dark:text-canna mt-1">
+                    {card.subtitle}
+                  </p>
+                )}
+              </div>
             </div>
-          </div>
-        </GlassCard>
-      ))}
+          </GlassCard>
+        );
+      })}
     </div>
   );
 };
@@ -71,7 +94,7 @@ export const SummaryCardsSkeleton: React.FC = () => {
       {[1, 2, 3].map((i) => (
         <GlassCard key={i} padding="md">
           <div className="flex items-start gap-3">
-            <div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 animate-pulse" />
+            <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 animate-pulse" />
             <div className="flex-1 min-w-0 space-y-2">
               <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-24" />
               <div className="h-8 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-16" />