Improve admin UI visual design — polish look and feel (#59)

* Improve admin UI visual design — polish look and feel

- Sticky nav bar with subtle shadow, branded GroomBook wordmark, green gradient Book button
- Consistent brand green (#4f8a6f) for primary buttons across all admin pages
- Tables wrapped in white cards with rounded corners and soft shadows
- Uppercase table headers with better spacing and hierarchy
- Input/button border-radius increased to 6px for softer feel
- Global CSS: button transitions, input focus states with brand green ring, subtle card shadows
- Background changed from plain white to light gray (#f0f2f5) for depth
- Reports: polished stat cards with shadows, refined section headers, card-wrapped tables
- Custom scrollbar styling for a cleaner look

Closes groombook/groombook#58

Co-Authored-By: Paperclip <noreply@paperclip.ing>

* Fix test selectors for branded nav text

- Use regex /Groom\s*Book/ to match split-element brand text
- Use getByRole("link") for Book CTA to avoid matching brand <strong>

Co-Authored-By: Paperclip <noreply@paperclip.ing>

* Fix brand text test to handle split-element rendering

The nav brand was changed to <span>Groom</span>Book for color styling,
but getByText with a regex can't match text split across child elements.
Use a custom text matcher that checks the STRONG element's textContent.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

* Fix E2E tests for split-element brand name

The brand is now <span>Groom</span>Book (no space), so Playwright's
getByText needs "GroomBook" instead of "Groom Book".

Co-Authored-By: Paperclip <noreply@paperclip.ing>

---------

Co-authored-by: Groom Book CTO <cto@groombook.dev>
Co-authored-by: Paperclip <noreply@paperclip.ing>
Co-authored-by: Groom Book CTO <cto@groombook.app>

apps/web/src/App.tsx

@@ -23,29 +23,42 @@ const NAV_LINKS = [
 function AdminLayout() {
   const location = useLocation();
   return (
-    <div style={{ minHeight: "100vh", fontFamily: "system-ui, sans-serif" }}>
+    <div style={{ minHeight: "100vh", fontFamily: "system-ui, sans-serif", background: "#f0f2f5" }}>
       <nav
         style={{
-          padding: "0.75rem 1rem",
+          padding: "0 1.25rem",
+          height: 52,
           borderBottom: "1px solid #e2e8f0",
           display: "flex",
           alignItems: "center",
           gap: "0.25rem",
           background: "#fff",
+          boxShadow: "0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)",
+          position: "sticky",
+          top: 0,
+          zIndex: 50,
         }}
       >
-        <strong style={{ marginRight: "1rem", fontSize: 16 }}>Groom Book</strong>
+        <strong style={{
+          marginRight: "1.25rem",
+          fontSize: 17,
+          color: "#1a202c",
+          letterSpacing: "-0.02em",
+        }}>
+          <span style={{ color: "#4f8a6f" }}>Groom</span>Book
+        </strong>
         <Link
           to="/admin/book"
           style={{
-            padding: "0.35rem 0.75rem",
-            borderRadius: 4,
+            padding: "0.4rem 0.85rem",
+            borderRadius: 6,
             textDecoration: "none",
-            fontSize: 14,
+            fontSize: 13,
             fontWeight: 600,
             color: "#fff",
-            background: "#4f8a6f",
+            background: "linear-gradient(135deg, #4f8a6f, #3d7a5f)",
             marginRight: "0.5rem",
+            boxShadow: "0 1px 2px rgba(79, 138, 111, 0.3)",
           }}
         >
           Book
@@ -60,13 +73,13 @@ function AdminLayout() {
               key={to}
               to={to}
               style={{
-                padding: "0.35rem 0.75rem",
-                borderRadius: 4,
+                padding: "0.4rem 0.75rem",
+                borderRadius: 6,
                 textDecoration: "none",
-                fontSize: 14,
-                fontWeight: active ? 600 : 400,
-                color: active ? "#1d4ed8" : "#374151",
-                background: active ? "#eff6ff" : "transparent",
+                fontSize: 13,
+                fontWeight: active ? 600 : 500,
+                color: active ? "#2d6a4f" : "#4b5563",
+                background: active ? "#ecfdf5" : "transparent",
               }}
             >
               {label}
@@ -74,7 +87,7 @@ function AdminLayout() {
           );
         })}
       </nav>
-      <main style={{ padding: "1rem 1.5rem" }}>
+      <main style={{ padding: "1.25rem 1.5rem" }}>
         <Routes>
           <Route path="/" element={<AppointmentsPage />} />
           <Route path="/clients" element={<ClientsPage />} />