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

app/categories/page.tsx

@@ -351,7 +351,7 @@ export default function CategoriesPage() {
         onToggleAll={allExpanded ? collapseAll : expandAll}
       />
 
-      <div className="space-y-1">
+      <div className="space-y-3 md:space-y-4">
         {filteredParentCategories.map((parent: Category) => {
           const allChildren = childrenByParent[parent.id] || [];
           const children = searchQuery.trim()
@@ -387,8 +387,8 @@ export default function CategoriesPage() {
         })}
 
         {orphanCategories.length > 0 && (
-          <div className="border rounded-lg bg-card">
-            <div className="px-3 py-2 border-b">
+          <Card className="card-hover">
+            <div className="px-3 py-2 border-b border-border">
               <span className="text-sm font-medium text-muted-foreground">
                 Catégories non classées ({orphanCategories.length})
               </span>
@@ -405,7 +405,7 @@ export default function CategoriesPage() {
                 />
               ))}
             </div>
-          </div>
+          </Card>
         )}
       </div>
 

app/login/page.tsx

@@ -48,7 +48,7 @@ export default function LoginPage() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-[var(--background)] p-4 page-background">
-      <Card className="w-full max-w-md page-content">
+      <Card className="w-full max-w-md page-content card-hover">
         <CardHeader className="space-y-1">
           <div className="flex items-center justify-center mb-4">
             <Lock className="w-12 h-12 text-[var(--primary)]" />

app/transactions/page.tsx

@@ -238,7 +238,7 @@ export default function TransactionsPage() {
       />
 
       {(!isLoadingChart || !isLoadingTransactions) && (
-        <Card className="mb-6">
+        <Card className="mb-6 card-hover">
           <Collapsible open={isStatsExpanded} onOpenChange={setIsStatsExpanded}>
             <CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
               <CardTitle className="text-base font-semibold">
@@ -272,7 +272,7 @@ export default function TransactionsPage() {
                 {/* Summary cards */}
                 {!isLoadingTransactions && (
                   <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 mb-6">
-                    <Card>
+                    <Card className="card-hover">
                       <CardContent className="pt-6">
                         <div className="flex items-center justify-between">
                           <div>
@@ -287,7 +287,7 @@ export default function TransactionsPage() {
                         </div>
                       </CardContent>
                     </Card>
-                    <Card>
+                    <Card className="card-hover">
                       <CardContent className="pt-6">
                         <div className="flex items-center justify-between">
                           <div>