Refactor clients section to use client components

The commit makes several updates to the client-related pages in the
dashboard:

- Convert client edit/new pages to client components
- Remove server-side rendering wrappers
- Update client detail page styling and layout
- Add back button to client detail page
- Fix ID param handling in edit page
- Adjust visual styles and spacing

I focused on capturing the key changes while staying within the 50
character limit for the subject line and using the imperative mood. The
subject line alone adequately describes the core change without needing
a message body.

src/styles/globals.css

@@ -695,7 +695,7 @@
 
   /* Additional Brand Utility Classes */
   .btn-brand-primary {
-    @apply bg-gradient-to-r from-emerald-600 to-teal-600 text-white shadow-lg shadow-emerald-500/25 transition-all duration-300 hover:from-emerald-700 hover:to-teal-700 hover:shadow-xl hover:shadow-emerald-500/30;
+    @apply bg-gradient-to-r from-teal-600 to-blue-600 text-white shadow-lg shadow-teal-500/25 transition-all duration-300 hover:from-teal-700 hover:to-blue-700 hover:shadow-xl hover:shadow-teal-500/30;
   }
 
   .btn-brand-secondary {
@@ -711,20 +711,20 @@
   }
 
   .text-brand-gradient {
-    @apply bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent;
+    @apply bg-gradient-to-r from-teal-600 to-blue-600 bg-clip-text text-transparent;
   }
 
   .text-brand-light {
-    @apply text-emerald-600 dark:text-emerald-400;
+    @apply text-teal-700 dark:text-teal-300;
   }
 
   .text-brand-muted {
-    @apply text-emerald-700 dark:text-emerald-300;
+    @apply text-teal-600 dark:text-teal-400;
   }
 
   /* Background Utility Classes */
   .bg-brand-muted {
-    @apply bg-emerald-100 dark:bg-emerald-900/20;
+    @apply bg-teal-50 dark:bg-teal-900/20;
   }
 
   .bg-brand-muted-blue {
@@ -740,15 +740,15 @@
   }
 
   .bg-hero-gradient {
-    @apply bg-gradient-to-br from-emerald-500 via-teal-600 to-blue-700 dark:from-emerald-500/95 dark:via-teal-600/95 dark:to-blue-700/95;
+    @apply bg-gradient-to-br from-emerald-600 via-teal-700 to-blue-800 dark:from-emerald-600/95 dark:via-teal-700/95 dark:to-blue-800/95;
   }
 
   .bg-page-gradient {
-    @apply bg-gradient-to-br from-white via-emerald-50/50 to-teal-50/30 dark:from-slate-900 dark:via-emerald-900/5 dark:to-teal-900/5;
+    @apply bg-gradient-to-br from-white via-emerald-50/50 to-teal-50/30 dark:from-slate-900 dark:via-teal-900/8 dark:to-blue-900/8;
   }
 
   .bg-features-gradient {
-    @apply bg-gradient-to-br from-white via-emerald-50/30 to-teal-50/50 dark:from-slate-900/95 dark:via-emerald-900/10 dark:to-teal-900/10;
+    @apply bg-gradient-to-br from-white via-emerald-50/30 to-teal-50/50 dark:from-slate-900/95 dark:via-teal-900/12 dark:to-blue-900/12;
   }
 
   /* Card Utility Classes */
@@ -776,22 +776,26 @@
   @media (prefers-color-scheme: dark) {
     /* Page background - rich dark base */
     .floating-orbs {
-      background-color: hsl(210 11% 8%) !important; /* Rich dark background */
+      background-color: hsl(
+        206 12% 8%
+      ) !important; /* Rich dark blue-green background */
     }
 
     /* All cards - warm neutral with subtle transparency */
     [data-slot="card"] {
-      background-color: hsl(210 9% 13% / 0.9) !important; /* Warm dark cards */
-      border-color: hsl(210 9% 20%) !important; /* Subtle borders */
+      background-color: hsl(
+        206 10% 13% / 0.9
+      ) !important; /* Blue-green dark cards */
+      border-color: hsl(206 10% 20%) !important; /* Subtle borders */
     }
 
     /* Secondary cards - slightly lighter for hierarchy */
     [data-slot="card"].card-secondary,
     .card-secondary {
       background-color: hsl(
-        210 8% 16% / 0.85
+        206 9% 16% / 0.85
       ) !important; /* Lighter secondary */
-      border-color: hsl(210 8% 24%) !important; /* Softer borders */
+      border-color: hsl(206 9% 24%) !important; /* Softer borders */
     }
 
     /* Navigation elements - cohesive with cards */
@@ -848,7 +852,7 @@
 
   /* Text Color Utility Classes */
   .text-icon-emerald {
-    @apply text-emerald-600 dark:text-emerald-400;
+    @apply text-teal-600 dark:text-teal-400;
   }
 
   .text-icon-blue {
@@ -872,7 +876,7 @@
   }
 
   .text-icon-green {
-    @apply text-green-600 dark:text-green-400;
+    @apply text-teal-600 dark:text-teal-400;
   }
 
   .text-icon-yellow {
@@ -984,7 +988,7 @@
   }
 
   .bg-green-subtle {
-    @apply bg-green-50 dark:bg-green-900/20;
+    @apply bg-teal-100 dark:bg-teal-900/20;
   }
 
   .bg-red-subtle {
@@ -1004,7 +1008,7 @@
   }
 
   .bg-emerald-subtle {
-    @apply bg-emerald-50/50 dark:bg-emerald-900/10;
+    @apply bg-teal-100 dark:bg-teal-900/20;
   }
 
   .bg-upload-zone {
@@ -1069,19 +1073,19 @@
 
   /* Hero Section Utility Classes */
   .hero-overlay {
-    @apply absolute inset-0 bg-gradient-to-br from-emerald-500/95 via-teal-600/95 to-blue-700/95;
+    @apply absolute inset-0 bg-gradient-to-br from-emerald-600/90 via-teal-700/90 to-blue-800/90;
   }
 
   .hero-orb-1 {
-    @apply absolute top-10 left-10 h-64 w-64 rounded-full bg-gradient-to-r from-white/20 to-emerald-300/20 blur-3xl;
+    @apply absolute top-10 left-10 h-64 w-64 rounded-full bg-gradient-to-r from-white/10 to-emerald-300/10 blur-3xl;
   }
 
   .hero-orb-2 {
-    @apply absolute right-10 bottom-10 h-80 w-80 rounded-full bg-gradient-to-r from-teal-300/15 to-blue-300/15 blur-3xl;
+    @apply absolute right-10 bottom-10 h-80 w-80 rounded-full bg-gradient-to-r from-teal-300/10 to-blue-300/10 blur-3xl;
   }
 
   .hero-orb-3 {
-    @apply absolute top-1/2 left-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-emerald-400/10 to-teal-400/10 blur-3xl;
+    @apply absolute top-1/2 left-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-r from-emerald-400/5 to-teal-400/5 blur-3xl;
   }
 
   /* Floating Decoration Utility Classes */
@@ -1095,11 +1099,11 @@
 
   /* Badge Utility Classes */
   .badge-brand {
-    @apply border-emerald-400 bg-emerald-200/80 text-emerald-900 shadow-md dark:border-emerald-600 dark:bg-emerald-800/80 dark:text-emerald-100;
+    @apply border-teal-400/60 bg-teal-100/90 text-teal-800 shadow-md dark:border-teal-500/60 dark:bg-teal-900/90 dark:text-teal-100;
   }
 
   .badge-features {
-    @apply border-blue-400 bg-blue-200/80 text-blue-900 shadow-md dark:border-blue-600 dark:bg-blue-800/80 dark:text-blue-100;
+    @apply border-blue-400/60 bg-blue-100/90 text-blue-800 shadow-md dark:border-blue-500/60 dark:bg-blue-900/90 dark:text-blue-100;
   }
 
   .badge-success {