Rebase services-as-hub-ia onto mobile-responsive-parity

Combine both branches into a single coherent branch:
- Full mobile responsive parity (useIsMobile, MobileCardRow, SheetForm,
  .mobile-touch-target, mobile cards, SheetForm forms, 44px targets,
  dirty-state confirm, TablePagination, refetchIntervalInBackground).
- Full services-as-hub IA (data-driven nav, service-page tab skeleton,
  new service types, Authentik directory + messaging, named dashboards,
  legacy routes 404, Observability split, Jellyseerr absorbed).

Enhancement: service tabs now use mobile-parity primitives:
- MediaTab: MobileCardRow below md (title/size/HDR/library/year) +
  TablePagination; DataTable at md+ (desktop branch preserved).
- FilesTab: MobileCardRow below md (name/type/size/modified) +
  handleRowClick; DataTable at md+.
- ServicePage: SheetForm branch below md (open-on-mount, sticky header
  + save bar, cancel navigates back to /services, dirty-state guard).
- Dashboard: single-column + section anchors below md (from mobile-parity)
  + empty-state CTA (from services-hub).
- App.tsx: useIsMobile() replaces inline matchMedia (from mobile-parity)
  + data-driven useNavItems (from services-hub).
- Backup tables (BackupAlerts/Jobs/Runs) already have MobileCardRow from
  mobile-parity; JobsTab inherits mobile behavior through its sub-components.

Conflict resolutions:
- Backend: entirely from services-hub (mobile didn't touch it).
- Deleted pages (Media/FileBrowser/Actions/Users/UsersPage/Applications/
  ObservabilityPage/BackupsPage + hooks/useUsers + tests): kept deleted
  (services-hub deleted them; content moved into service tabs).
- New service-tabs/*: from services-hub, enhanced with mobile patterns.
- App.tsx: services-hub's data-driven nav + mobile-parity's useIsMobile.
- Dashboard.tsx: merged (services-hub CTA + mobile-parity sections/anchors).
- ServicePage.tsx: services-hub's tab skeleton + mobile-parity's SheetForm.
- Primitives (useIsMobile/mobile-card/sheet-form/etc.): from mobile-parity.

117 frontend tests pass (mobile-parity's 122 - 5 deleted page tests +
services-hub's new tab/dashboard tests); 271 backend tests pass; lint/
build green both sides.

frontend/src/pages/service-tabs/UsersTab.tsx

@@ -0,0 +1,136 @@
+/** UsersTab — Authentik user directory for the Authentik service page. */
+import { useState } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { ServiceInstance } from "../../types";
+import { useAuthentikUsers } from "../../hooks/useAuthentik";
+
+const PAGE_SIZE = 25;
+
+export function UsersTab({ instance }: { instance: ServiceInstance }) {
+	const [search, setSearch] = useState("");
+	const [page, setPage] = useState(1);
+	const [committedSearch, setCommittedSearch] = useState("");
+
+	const { data, isLoading } = useAuthentikUsers(instance.id, {
+		search: committedSearch,
+		page,
+		page_size: PAGE_SIZE,
+	});
+
+	const error = data?.error;
+	const users = data?.items ?? [];
+	const total = data?.total ?? 0;
+	const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+	function handleSearch() {
+		setPage(1);
+		setCommittedSearch(search);
+	}
+
+	return (
+		<div className="flex flex-col gap-3">
+			{error ? (
+				<Alert variant="destructive">
+					<AlertDescription>{error}</AlertDescription>
+				</Alert>
+			) : null}
+
+			<div className="flex items-center gap-2">
+				<Input
+					placeholder="Search users…"
+					value={search}
+					onChange={(e) => setSearch(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") handleSearch();
+					}}
+					className="max-w-xs"
+				/>
+				<Button variant="outline" onClick={handleSearch}>
+					Search
+				</Button>
+			</div>
+
+			<div className="rounded-lg border">
+				<Table>
+					<TableHeader>
+						<TableRow>
+							<TableHead>Name</TableHead>
+							<TableHead>Username</TableHead>
+							<TableHead>Email</TableHead>
+							<TableHead className="w-24">Status</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{isLoading && users.length === 0 ? (
+							<TableRow>
+								<TableCell colSpan={4} className="text-muted-foreground">
+									Loading…
+								</TableCell>
+							</TableRow>
+						) : users.length === 0 ? (
+							<TableRow>
+								<TableCell colSpan={4} className="text-muted-foreground">
+									No users found.
+								</TableCell>
+							</TableRow>
+						) : (
+							users.map((user) => (
+								<TableRow key={user.pk}>
+									<TableCell className="font-medium">
+										{user.name || "—"}
+									</TableCell>
+									<TableCell>{user.username}</TableCell>
+									<TableCell className="text-muted-foreground">
+										{user.email || "—"}
+									</TableCell>
+									<TableCell>
+										<Badge variant={user.is_active ? "default" : "secondary"}>
+											{user.is_active ? "Active" : "Inactive"}
+										</Badge>
+									</TableCell>
+								</TableRow>
+							))
+						)}
+					</TableBody>
+				</Table>
+			</div>
+
+			{total > 0 ? (
+				<div className="flex items-center justify-between text-sm text-muted-foreground">
+					<span>
+						{total} user{total === 1 ? "" : "s"} · Page {page} of {totalPages}
+					</span>
+					<div className="flex gap-1">
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => setPage((p) => Math.max(1, p - 1))}
+							disabled={page <= 1}
+						>
+							Previous
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+							disabled={page >= totalPages}
+						>
+							Next
+						</Button>
+					</div>
+				</div>
+			) : null}
+		</div>
+	);
+}