feat: enhance card components across the application with consistent hover effects and improved layout; update spacing in categories page for better visual hierarchy

components/statistics/balance-line-chart.tsx

@@ -57,7 +57,7 @@ export function BalanceLineChart({
   };
 
   return (
-    <Card>
+    <Card className="card-hover">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle>Évolution du solde</CardTitle>
         <div className="flex gap-1">

components/statistics/category-bar-chart.tsx

@@ -73,7 +73,7 @@ export function CategoryBarChart({
   };
 
   return (
-    <Card>
+    <Card className="card-hover">
       <CardHeader>
         <CardTitle>{title}</CardTitle>
       </CardHeader>
@@ -154,3 +154,5 @@ export function CategoryBarChart({
     </Card>
   );
 }
+
+// Find the Card component in this file

components/statistics/category-pie-chart.tsx

@@ -51,7 +51,7 @@ export function CategoryPieChart({
   const currentData = isExpanded ? baseData : baseData.slice(0, maxItems);
 
   return (
-    <Card>
+    <Card className="card-hover">
       <CardHeader className="flex flex-col md:flex-row md:items-center md:justify-between space-y-2 md:space-y-0 pb-2">
         <CardTitle className="text-sm md:text-base">{title}</CardTitle>
         <div className="flex flex-col md:flex-row gap-2 w-full md:w-auto">

components/statistics/category-trend-chart.tsx

@@ -96,7 +96,7 @@ export function CategoryTrendChart({
   };
 
   return (
-    <Card>
+    <Card className="card-hover">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle>Évolution des dépenses par catégorie</CardTitle>
         <div className="flex gap-2">

components/statistics/income-expense-trend-chart.tsx

@@ -28,7 +28,7 @@ export function IncomeExpenseTrendChart({
   formatCurrency,
 }: IncomeExpenseTrendChartProps) {
   return (
-    <Card>
+    <Card className="card-hover">
       <CardHeader>
         <CardTitle>Tendances revenus et dépenses</CardTitle>
       </CardHeader>

components/statistics/monthly-chart.tsx

@@ -127,7 +127,7 @@ export function MonthlyChart({
 
   if (!collapsible) {
     return (
-      <Card>
+      <Card className="card-hover">
         <CardHeader>
           <CardTitle>Revenus vs Dépenses par mois</CardTitle>
         </CardHeader>
@@ -137,7 +137,7 @@ export function MonthlyChart({
   }
 
   return (
-    <Card>
+    <Card className="card-hover">
       <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
           <CardTitle className="text-base font-semibold">

components/statistics/savings-trend-chart.tsx

@@ -31,7 +31,7 @@ export function SavingsTrendChart({
   const isPositive = latestSavings >= 0;
 
   return (
-    <Card>
+    <Card className="card-hover">
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle>Évolution des économies</CardTitle>
         <div className="flex items-center gap-2">

components/statistics/top-expenses-list.tsx

@@ -21,7 +21,7 @@ export function TopExpensesList({
   const isMobile = useIsMobile();
 
   return (
-    <Card>
+    <Card className="card-hover">
       <CardHeader>
         <CardTitle className="text-sm md:text-base">Top 5 dépenses</CardTitle>
       </CardHeader>

components/statistics/year-over-year-chart.tsx

@@ -33,7 +33,7 @@ export function YearOverYearChart({
   previousYearLabel = "Année précédente",
 }: YearOverYearChartProps) {
   return (
-    <Card>
+    <Card className="card-hover">
       <CardHeader>
         <CardTitle>Comparaison année sur année</CardTitle>
       </CardHeader>