feat(mobile): mobile-responsive UI — bottom tab bar, bottom-sheet dialogs, PWA

All changes are gated behind max-md:/md:hidden so the >=768px desktop layout is untouched (verified with lint + build + live checks at 375px).

- globals.css: one mobile block — 16px inputs (no iOS auto-zoom), units sidebar stacks above content, wizard item rows become 2-col (text fields full-width, delete button full-width), dd-panels / flow diagram / conv-form stack, larger touch targets
- ui/dialog.tsx: dialogs become full-width bottom sheets on mobile (all modals inherit it); desktop keeps the centered dialog
- Header: sticky on mobile only + PageLayout bottom clearance
- New MobileTabBar: role-aware bottom tabs (office admin/manager, inventory PM, inventory admin); hidden on /wizard
- Wizard step 4: TouchSensor (150ms delay) so touch drag works without stealing scroll
- JalaliDatePicker: dropdown capped to viewport; bigger day cells and time inputs on mobile
- PWA: manifest.webmanifest + 192/512 icons (scripts/gen-pwa-icons.ps1) + theme-color/manifest links in index.html
- New docs/mobile-responsive.md documenting the full change set

frontend/src/components/JalaliDatePicker.tsx

@@ -183,6 +183,8 @@ export function JalaliDatePicker({
         <div
           className={cn(
             "absolute inset-x-0 top-full z-30 mt-1 rounded-md border border-line bg-panel shadow-md",
+            // حداکثر عرض = viewport (موبایل باریک سرریز نمی‌شود؛ دسکتاپ بی‌تغییر)
+            "max-w-[calc(100vw-2rem)]",
             withTime ? "w-80 p-3" : "w-64 p-2",
           )}
         >
@@ -217,7 +219,7 @@ export function JalaliDatePicker({
                   key={i}
                   type="button"
                   className={cn(
-                    "cursor-pointer rounded py-0.5 text-[12px] hover:bg-slate-bg",
+                    "cursor-pointer rounded py-0.5 text-[12px] hover:bg-slate-bg max-md:py-1.5",
                     cell.isToday && !selectedIso && "bg-blue-bg font-bold text-[#1d4ed8]",
                     cell.isToday && selectedIso && "font-bold text-[#1d4ed8]",
                     cell.iso === selectedIso && "bg-accent text-white hover:bg-accent-dark",
@@ -235,7 +237,7 @@ export function JalaliDatePicker({
                 <span className="text-[11.5px] font-semibold text-muted">ساعت</span>
                 <input
                   type="text"
-                  className="num-input h-8 w-14 rounded-md border border-line bg-panel px-1 text-center text-[13px] tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+                  className="num-input h-8 w-14 rounded-md border border-line bg-panel px-1 text-center text-[13px] tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 max-md:h-10 max-md:w-16"
                   value={faNum(String(time.h).padStart(2, "0"))}
                   inputMode="numeric"
                   maxLength={2}
@@ -247,7 +249,7 @@ export function JalaliDatePicker({
                 <span className="text-[11.5px] font-semibold text-muted">دقیقه</span>
                 <input
                   type="text"
-                  className="num-input h-8 w-14 rounded-md border border-line bg-panel px-1 text-center text-[13px] tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+                  className="num-input h-8 w-14 rounded-md border border-line bg-panel px-1 text-center text-[13px] tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 max-md:h-10 max-md:w-16"
                   value={faNum(String(time.m).padStart(2, "0"))}
                   inputMode="numeric"
                   maxLength={2}

frontend/src/components/layout/Header.tsx

@@ -27,7 +27,7 @@ export function Header({ title, sub, backTo, backLabel = "بازگشت", actions
   };
 
   return (
-    <header className="flex flex-wrap items-center gap-3 border-b border-line bg-panel px-5 py-2.5">
+    <header className="flex flex-wrap items-center gap-3 border-b border-line bg-panel px-5 py-2.5 max-md:sticky max-md:top-0 max-md:z-40">
       {menu && <div className="flex shrink-0 items-center">{menu}</div>}
       {(icon || brand) && (
         <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-accent-bg text-accent">
@@ -38,7 +38,7 @@ export function Header({ title, sub, backTo, backLabel = "بازگشت", actions
         <button
           type="button"
           onClick={goBack}
-          className="inline-flex cursor-pointer items-center gap-0.5 rounded-md px-2 py-1 text-[13px] text-muted transition-colors hover:bg-slate-bg hover:text-ink"
+          className="inline-flex cursor-pointer items-center gap-0.5 rounded-md px-2 py-1 text-[13px] text-muted transition-colors hover:bg-slate-bg hover:text-ink max-md:px-2.5 max-md:py-2"
         >
           <ChevronRight className="h-4 w-4" />
           {backLabel}
@@ -64,6 +64,6 @@ export function PageLayout({
   className?: string;
 }) {
   return (
-    <div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4", className)}>{children}</div>
+    <div className={cn("mx-auto w-full max-w-[1200px] px-4 py-4 max-md:pb-24", className)}>{children}</div>
   );
 }

frontend/src/components/layout/MobileTabBar.tsx

@@ -0,0 +1,100 @@
+import { NavLink, useLocation } from "react-router-dom";
+import {
+  ArrowLeftRight,
+  Boxes,
+  Building2,
+  CalendarDays,
+  LayoutDashboard,
+  PackageSearch,
+  Scale,
+  Truck,
+  UsersRound,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+import { useAuthStore } from "../../store/auth";
+
+interface TabDef {
+  to: string;
+  label: string;
+  icon: LucideIcon;
+  end?: boolean;
+}
+
+// تب‌های دفتر تدارکات (ادمین / مدیر تدارکات)
+const PROC_TABS: TabDef[] = [
+  { to: "/", label: "داشبورد", icon: LayoutDashboard, end: true },
+  { to: "/suppliers", label: "تأمین‌کننده‌ها", icon: Truck },
+  { to: "/projects", label: "پروژه‌ها", icon: Building2 },
+  { to: "/units", label: "ضرایب", icon: Scale },
+];
+
+// تب‌های پنل انبار برای مدیر پروژه
+const PM_INV_TABS: TabDef[] = [
+  { to: "/inventory", label: "انبار", icon: Boxes, end: true },
+  { to: "/inventory/change", label: "تغییر موجودی", icon: ArrowLeftRight },
+  { to: "/inventory/daily", label: "کنترل روزانه", icon: CalendarDays },
+  { to: "/inventory/arrivals", label: "کالاهای در راه", icon: PackageSearch },
+];
+
+// تب‌های پنل انبار برای ادمین / مدیر تدارکات (آینه‌ی ناوبری بالای دسکتاپ)
+const ADMIN_INV_TABS: TabDef[] = [
+  { to: "/inventory", label: "انبار", icon: Boxes, end: true },
+  { to: "/inventory/daily", label: "کنترل روزانه", icon: CalendarDays },
+  { to: "/inventory/arrivals", label: "کالاهای در راه", icon: PackageSearch },
+  { to: "/inventory/org", label: "سازمان‌دهی", icon: UsersRound },
+];
+
+function TabBar({ tabs }: { tabs: TabDef[] }) {
+  return (
+    <nav
+      className="fixed inset-x-0 bottom-0 z-40 border-t border-line bg-panel md:hidden"
+      style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+    >
+      <div className="grid grid-cols-4">
+        {tabs.map((t) => (
+          <NavLink
+            key={t.to}
+            to={t.to}
+            end={t.end}
+            className={({ isActive }) =>
+              cn(
+                "flex min-h-[56px] flex-col items-center justify-center gap-0.5 whitespace-nowrap px-1 text-[10.5px] font-medium transition-colors",
+                isActive ? "text-accent" : "text-muted",
+              )
+            }
+          >
+            <t.icon className="h-5 w-5" strokeWidth={1.8} />
+            <span>{t.label}</span>
+          </NavLink>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+// نوار تب پایینِ موبایل — فقط زیر 768px (md:hidden) و فقط در صفحاتِ نقش کاربر:
+// مدیر پروژه → تب‌های انبار؛ ادمین/مدیر تدارکات → تب‌های دفتر یا انبار (بر اساس مسیر).
+// در ویزارد نمایش داده نمی‌شود تا با جابه‌جایی تصادفی، کارِ کاربر از بین نرود.
+export function MobileTabBar() {
+  const role = useAuthStore((s) => s.user?.role);
+  const { pathname } = useLocation();
+
+  if (pathname === "/login" || pathname === "/admin") return null;
+  const isPM = role === "pm";
+  const isOffice = role === "admin" || role === "procurement_manager";
+
+  if (pathname.startsWith("/inventory")) {
+    if (isPM) return <TabBar tabs={PM_INV_TABS} />;
+    if (isOffice) return <TabBar tabs={ADMIN_INV_TABS} />;
+    return null;
+  }
+  if (pathname === "/wizard") return null;
+  const onOfficePage =
+    pathname === "/" ||
+    pathname === "/projects" ||
+    pathname === "/units" ||
+    pathname.startsWith("/suppliers");
+  if (onOfficePage && isOffice) return <TabBar tabs={PROC_TABS} />;
+  return null;
+}

frontend/src/components/ui/dialog.tsx

@@ -33,12 +33,14 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-1/2 top-1/2 z-50 grid max-h-[90vh] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border border-line bg-panel p-6 shadow-lg",
+        // موبایل: دیالوگ به‌جای وسط، bottom-sheet تمام‌عرض می‌شود (دسکتاپ بی‌تغییر)
+        "max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:max-h-[85dvh] max-md:max-w-none max-md:translate-x-0 max-md:translate-y-0 max-md:rounded-b-none max-md:rounded-t-2xl max-md:p-4 max-md:pb-[calc(env(safe-area-inset-bottom)+0.75rem)]",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-accent/40">
+      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-accent/40 max-md:p-1.5">
         <X className="h-4 w-4" />
         <span className="sr-only">بستن</span>
       </DialogPrimitive.Close>