feat: mobile-first responsive overhaul — safe areas, touch targets, bottom sheet, bottom nav

Viewport:
- Add `viewport` export with `viewport-fit=cover` (enables CSS safe-area-inset-*
  on bezel-less iOS/Android) and `interactive-widget=resizes-content` (prevents
  layout jumps from virtual keyboard open/close)

iOS zoom prevention:
- input.tsx, textarea.tsx: change text-sm (14px) → text-base sm:text-sm (16px)
  on mobile; iOS Safari auto-zooms any input with font-size < 16px

Touch targets:
- button.tsx: default h-10 → h-11 (44px), sm h-8 → h-9 (36px), icon h-10→h-11
  matching the 44×44px iOS HIG and WCAG 2.5.5 minimum
- Add touch-manipulation to buttons, inputs, textarea to eliminate 300ms tap delay

Dialog → mobile bottom sheet:
- On mobile (< 640px): anchored to bottom with full width, rounded top corners,
  slide-in-from-bottom / slide-out-to-bottom animation, drag handle affordance,
  max-h-[90svh] + overflow-y-auto to prevent viewport overflow
- Safe area padding: pb-[max(1.25rem,env(safe-area-inset-bottom))]
- On desktop (sm+): unchanged centered modal with zoom animation
- Close button gets a 32×32 tap area on mobile

Mobile navigation:
- New bottom-nav.tsx: persistent 3-tab bottom bar (مسیر/مرکز/لیگ) shown below
  md: breakpoint, hidden on desktop; 56px height + safe-area-inset-bottom;
  active tab gets heavier stroke and scale
- Only shown for authenticated non-admin users
- app-shell.tsx: injects BottomNav; main content gets dynamic padding-bottom to
  clear the bar (56px + safe area) on mobile, reverts to py-10 on md:
- Footer: safe-area-inset-bottom padding so content clears iPhone home indicator

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/ui/dialog.tsx

@@ -34,13 +34,26 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-popover p-6 shadow-md rounded-md duration-300 sm:max-w-lg data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        // Base (mobile-first): full-width bottom sheet with safe-area clearance
+        "fixed bottom-0 left-0 right-0 z-50 grid w-full max-w-none gap-4 border border-border bg-popover shadow-md duration-300",
+        "rounded-t-2xl rounded-b-none p-5 pb-[max(1.25rem,env(safe-area-inset-bottom))]",
+        "max-h-[90svh] overflow-y-auto",
+        "translate-x-0 translate-y-0",
+        "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-4",
+        "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom-full",
+        // Desktop (sm+): centered modal
+        "sm:bottom-auto sm:left-1/2 sm:right-auto sm:top-1/2 sm:max-w-lg sm:max-h-[calc(100svh-4rem)] sm:rounded-md sm:p-6",
+        "sm:-translate-x-1/2 sm:-translate-y-1/2",
+        "sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:zoom-out-95",
+        "sm:data-[state=open]:fade-in-0 sm:data-[state=closed]:fade-out-0",
         className
       )}
       {...props}
     >
+      {/* Mobile drag handle affordance */}
+      <span className="mx-auto -mt-1 mb-2 block h-1.5 w-10 shrink-0 rounded-full bg-muted-foreground/20 sm:hidden" aria-hidden />
       {children}
-      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none">
+      <DialogPrimitive.Close className="absolute end-4 top-4 grid h-8 w-8 place-items-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:outline-none sm:h-auto sm:w-auto sm:rounded-sm">
         <X className="h-4 w-4" />
         <span className="sr-only">بستن</span>
       </DialogPrimitive.Close>