Extract common errorBanner style to shared styles

- Added errorBanner to sharedStyles for consistent error display
- Removed duplicate errorBanner definitions from all pages
- Updated appointments, booking, admin/appointments, and admin/availability pages
- Reduced code duplication while maintaining component-specific styles

frontend/app/appointments/page.tsx

@@ -9,10 +9,11 @@ import { useRequireAuth } from "../hooks/useRequireAuth";
 import { components } from "../generated/api";
 import { formatDateTime } from "../utils/date";
 import { getStatusDisplay } from "../utils/appointment";
+import { sharedStyles } from "../styles/shared";
 
 type AppointmentResponse = components["schemas"]["AppointmentResponse"];
 
-const styles: Record<string, React.CSSProperties> = {
+const pageStyles: Record<string, React.CSSProperties> = {
   main: {
     minHeight: "100vh",
     background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b4e 100%)",
@@ -47,16 +48,6 @@ const styles: Record<string, React.CSSProperties> = {
     fontSize: "0.9rem",
     marginBottom: "1.5rem",
   },
-  errorBanner: {
-    background: "rgba(239, 68, 68, 0.15)",
-    border: "1px solid rgba(239, 68, 68, 0.3)",
-    color: "#f87171",
-    padding: "1rem",
-    borderRadius: "8px",
-    marginBottom: "1rem",
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    fontSize: "0.875rem",
-  },
   section: {
     marginBottom: "2rem",
   },
@@ -155,6 +146,8 @@ const styles: Record<string, React.CSSProperties> = {
   },
 };
 
+const styles = { ...sharedStyles, ...pageStyles };
+
 export default function AppointmentsPage() {
   const { user, isLoading, isAuthorized } = useRequireAuth({
     requiredPermission: Permission.VIEW_OWN_APPOINTMENTS,