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/Dashboard.tsx

@@ -46,7 +46,7 @@ import { DialogFooter } from "../components/DialogFooter";
 import { WidgetInstanceCard } from "../components/WidgetInstance";
 import { WidgetConfigDialog } from "../components/WidgetConfigDialog";
 
-// --- Mobile section grouping (spec R7.2) ---
+// --- Mobile section grouping (mobile-parity) ---
 
 const SECTION_ORDER = ["observability", "media", "backups", "custom"] as const;
 type SectionId = (typeof SECTION_ORDER)[number];
@@ -102,7 +102,6 @@ function MobileWidgetSections({
 }) {
 	return (
 		<>
-			{/* Anchor bar — horizontally scrollable pills (spec R7.2, md:hidden) */}
 			<div className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1">
 				{sections.map((section) => {
 					const meta = SECTION_META[section.id];
@@ -127,7 +126,6 @@ function MobileWidgetSections({
 					);
 				})}
 			</div>
-			{/* Sectioned widgets — single column (spec R7.1) */}
 			<div className="grid grid-cols-1 gap-4">
 				{sections.map((section) => (
 					<section
@@ -148,6 +146,7 @@ function MobileWidgetSections({
 	);
 }
 
+
 function emptyShortcut(): DashboardShortcutInput {
 	return {
 		id: null,
@@ -354,7 +353,6 @@ function ShortcutDialog({
 					<div className="flex items-center gap-2">
 						<Switch
 							id="shortcut-enabled"
-							className="mobile-touch-target"
 							checked={draft.enabled}
 							onCheckedChange={(checked) =>
 								onChange({ ...draft, enabled: checked })
@@ -425,24 +423,13 @@ function ShortcutCard({
 						size="sm"
 						disabled={!shortcut.enabled || !href}
 						onClick={onOpen}
-						className="mobile-touch-target"
 					>
 						Open
 					</Button>
-					<Button
-						size="sm"
-						variant="outline"
-						onClick={onEdit}
-						className="mobile-touch-target"
-					>
+					<Button size="sm" variant="outline" onClick={onEdit}>
 						Edit
 					</Button>
-					<Button
-						size="sm"
-						variant="destructive"
-						onClick={onDelete}
-						className="mobile-touch-target"
-					>
+					<Button size="sm" variant="destructive" onClick={onDelete}>
 						Delete
 					</Button>
 				</div>
@@ -508,23 +495,36 @@ export function Dashboard() {
 
 	return (
 		<div className="flex flex-col gap-4">
+			{services.length === 0 ? (
+				<SectionCard
+					title="Welcome to Manage"
+					description="Add a service to get started."
+				>
+					<div className="flex flex-col gap-3">
+						<p className="text-sm text-muted-foreground">
+							No services configured yet. Add a Jellyfin, SSH target, Authentik,
+							or observability service to populate the navigation and
+							dashboards.
+						</p>
+						<Button
+							variant="outline"
+							onClick={() => navigate("/services")}
+							className="w-fit"
+						>
+							Add a service
+						</Button>
+					</div>
+				</SectionCard>
+			) : null}
 			<SectionCard
 				title="Shortcuts"
 				description="Quick links to websites today, with room for action and user shortcuts later."
 				action={
 					<div className="flex gap-2">
-						<Button
-							variant="outline"
-							className="mobile-touch-target"
-							onClick={() => setWidgetDialogOpen(true)}
-						>
+						<Button variant="outline" onClick={() => setWidgetDialogOpen(true)}>
 							Edit dashboard
 						</Button>
-						<Button
-							variant="outline"
-							className="mobile-touch-target"
-							onClick={openCreateShortcut}
-						>
+						<Button variant="outline" onClick={openCreateShortcut}>
 							Add shortcut
 						</Button>
 					</div>