Add micro-interactions and transitions for page and table elements

Wrap page content in a new div for animation effects and implement fade-in transitions for table rows.

WebApp/Components/Shared/Layout/MainLayout.razor

@@ -26,7 +26,9 @@
     </MudDrawer>
     <MudMainContent>
         <MudContainer MaxWidth="MaxWidth.ExtraLarge">
-        @Body
+            <div class="page-enter">
+                @Body
+            </div>
         </MudContainer>
     </MudMainContent>
 </MudLayout>

WebApp/wwwroot/app.css

@@ -69,3 +69,22 @@
 .icon-button-hover-error:hover {
     color: var(--mud-palette-error) !important;
 }
+
+/* Micro-interactions: Table row transitions */
+.mud-table-row {
+    transition: background-color 0.2s ease;
+}
+
+/* Micro-interactions: Page transitions */
+.page-enter {
+    animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

docs/plans/style-improvements.md

@@ -289,7 +289,7 @@ Consider using MudChip components with rank colors for better visual distinction
 
 ---
 
-### 10. Add Micro-interactions
+### 10. Add Micro-interactions ✅ COMPLETED
 **Current State**: Hover effect for delete buttons implemented ✓
 
 **Additional Opportunities**:
@@ -338,7 +338,7 @@ Consider using MudChip components with rank colors for better visual distinction
 7. Audit and ensure button hierarchy consistency
 8. ✅ Enhance event rank visualization
 9. ✅ Improve form layout grouping
-10. Add micro-interactions and transitions
+10. ✅ Add micro-interactions and transitions
 
 ---