# سند جامع سیستم طراحی بصری، تایپوگرافی و معماری رسپانسیو پنل مدیریت عقیله (UI Design System & Responsive Standard)

**سامانه پلتفرم و پنل مدیریت عقیله (Aqila Web Panel)**  
**مرجع سیستم:** کلاینت وب (`aqila_panel`) و راهنمای سراسری هوش مصنوعی و توسعه‌دهندگان (Single Source of Truth)  
**نسخه:** 2.0.0 (ویرایش جامع دسکتاپ، تبلت و موبایل)  
**وضعیت:** مصوب و الزامی (Mandatory Reference)  

---

## ۱. هدف و دامنه کاربرد (Objective & Scope)

این سند، **مرجع قطعی، جامع و غیرقابل‌تغییر** برای تمامی استانداردهای بصری، تایپوگرافی، پالت رنگی خنثی، نقاط شکست (Breakpoints)، چیدمان‌های چندستونه دسکتاپ و واکنش‌گرایی موبایل (Mobile Responsiveness) در پنل مدیریت عقیله است.

> [!IMPORTANT]
> **قانون الزام‌آور هوش مصنوعی و توسعه‌دهندگان (AI Agent & Dev Directive):**  
> در هنگام ایجاد هر صفحه جدید، کامپوننت، فرم، فیلتر، جدول، دیالوگ، شیت یا وضعیت بارگذاری (Loading)، **باید ابتدا و بدون استثنا کلیه بندهای این سند به عنوان استاندارد قطعی اعمال شوند.**  
> هرگونه کدنویسی بصری سلیقه‌ای، استفاده از رنگ‌های رنگین‌کمانی مدادرنگی (Crayon-like UI)، فونت‌های متفرقه، پدینگ‌های هاردکدشده بدون مدیاکوئری، یا جدول‌های غیرریسپانسیو که در موبایل سرریز (Overflow) نامناسب ایجاد کنند، **اکیداً ممنوع و مردود است.**

---

## ۲. نقاط شکست و معماری چیدمان رسپانسیو (Breakpoints & Layout Architecture)

پنل مدیریت عقیله باید تجربه‌ای بی‌نقص و روان از مانیتورهای عریض دسکتاپ تا گوشی‌های هوشمند ارائه دهد. نقاط شکست استاندارد پروژه مطابق با سیستم رسمی Tailwind CSS و متناسب با ابعاد داشبورد به شرح زیر تعریف شده است:

```
┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
│                             جدول نقاط شکست رسپانسیو پنل عقیله                                    │
├───────────┬──────────────┬──────────────────┬────────────────────────────────────────────────────┤
│ نقطه شکست │ بازه عرضی    │ دستگاه هدف       │ رفتار چیدمان و اسکلت اصلی                          │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ xs / Base │ < 640px      │ گوشی‌های هوشمند   │ تک‌ستونه، سایدبار منوی همبرگری، فیلترهای استک‌شده، │
│           │              │ (Mobile Portrait)│ تبدیل جداول به کارت/اسکرول افقی، دیالوگ باتم‌شیت   │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ sm        │ 640px-767px  │ فبلت و موبایل افقی│ فرم‌های ۲ ستونه، فیلترهای منعطف، پدینگ‌های میانی   │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ md        │ 768px-1023px │ تبلت (Tablet)    │ سایدبار کشویی (Overlay)، جداول فشرده با اسکرول،    │
│           │              │                  │ کارت‌های آماری ۲ الی ۳ ستونه                       │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ lg        │ 1024px-1279px│ لپ‌تاپ / دسکتاپ  │ سایدبار ثابت راست (240px)، هدر کامل، جداول جامع    │
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ xl        │ 1280px-1535px│ مانیتور استاندارد│ نمایش سه‌ستونه: سایدبار راست + محتوا + پنل اسلاید چپ│
├───────────┼──────────────┼──────────────────┼────────────────────────────────────────────────────┤
│ 2xl       │ ≥ 1536px     │ مانیتورهای عریض   │ حداکثر خوانایی، گرید ۴ ستونه کارت‌های KPI و آمار   │
└───────────┴──────────────┴──────────────────┴────────────────────────────────────────────────────┘
```

### ۲.۱. ساختار شل اصلی در دسکتاپ در برابر موبایل (Responsive Shell Structure)

شل اصلی اپلیکیشن (`AuthenticatedShell`) به صورت داینامیک بین دو حالت سوئیچ می‌کند:

1. **نمای دسکتاپ و مانیتورهای بزرگ (`lg` و بالاتر / `≥ 1024px`):**
   - **سایدبار ناوبری راست (`AppSidebar`):** عرض ثابت `240px`، همیشه قابل مشاهده و قابل جمع‌شدن به صورت آیکونی.
   - **بخش میانی محتوا (`SidebarInset`):** شامل `Topbar` با ارتفاع `h-16` و محتوای اصلی با پدینگ `px-8 py-6`.
   - **پنل جزئیات سمت چپ (`PanelSlot`):** در ابعاد `≥ 1280px` به صورت ستون کناری ثابت (Off-canvas با عرض `384px`) باز شده و محتوا را به نرمی جمع می‌کند.

2. **نمای تبلت و موبایل (`< 1024px`):**
   - **سایدبار ناوبری:** به صورت کشوی مدال (`Sheet` / Drawer) با کلیک روی دکمه همبرگری هدر باز می‌شود.
   - **پنل جزئیات (`PanelSlot`):** به صورت `Sheet` تمام‌صفحه یا با عرض `w-[min(88vw,384px)]` روی صفحه شناور می‌شود.
   - **پدینگ محتوا:** پدینگ به `px-4 py-4 pb-12` کاهش می‌یابد تا بیشترین فضای مفید به داده‌ها اختصاص یابد.

```tsx
// ساختار استاندارد کانتینر اصلی محتوای هر صفحه
<div className="space-y-4 sm:space-y-6">
  {/* هدر صفحه: در موبایل عمودی و در دسکتاپ افقی */}
  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div>
      <h1 className="text-lg font-black text-foreground sm:text-xl md:text-2xl">
        {pageTitle}
      </h1>
      <p className="text-xs text-muted-foreground sm:text-sm">
        {pageDescription}
      </p>
    </div>
    <div className="flex items-center gap-2">
      {headerActions}
    </div>
  </div>

  {/* بدنه محتوا */}
  {children}
</div>
```

---

## ۳. سیستم تایپوگرافی و مقیاس متنی رسپانسیو (Responsive Typography Matrix)

تایپوگرافی در پنل عقیله باید در مانیتورهای بزرگ کاملاً شارپ و خوانا، و در موبایل بدون ایجاد شکستگی‌های نامطلوب یا سرریز کلمات باشد:

```
┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
│                              مقیاس تایپوگرافی تطبیقی (Responsive Typography)                    │
├───────────────────┬──────────────┬──────────────┬─────────┬──────────────┬───────────────────────┤
│ سطح متنی (Role)   │ سایز موبایل  │ سایز دسکتاپ  │ وزن (Wt)│ Line-Height  │ کلاس Tailwind پیشنهادی│
├───────────────────┼──────────────┼──────────────┼─────────┼──────────────┼───────────────────────┤
│ Display / H1      │ 20px (1.25r) │ 24px (1.5r)  │ 900/Bold│ 1.35 (32px)  │ text-xl md:text-2xl   │
│ Page Title / H2   │ 18px (1.12r) │ 20px (1.25r) │ 800/Bold│ 1.4  (28px)  │ text-lg md:text-xl    │
│ Section Title / H3│ 15px (.937r) │ 16px (1.0r)  │ 700/Bold│ 1.45 (24px)  │ text-[15px] md:text-base│
│ Card Title / H4   │ 13px (.812r) │ 14px (.875r) │ 700/Bold│ 1.5  (21px)  │ text-xs sm:text-sm    │
│ Body Text (اصلی)  │ 13px (.812r) │ 14px (.875r) │ 500/Med │ 1.6  (22px)  │ text-xs sm:text-sm    │
│ Secondary / Muted │ 11px (.687r) │ 12px (.75r)  │ 400/Reg │ 1.5  (18px)  │ text-[11px] sm:text-xs│
│ Caption / Footnote│ 10px (.625r) │ 11px (.687r) │ 500/Med │ 1.4  (16px)  │ text-[10px] sm:text-[11px]│
│ Badge / Tag Label │ 10px (.625r) │ 11px (.687r) │ 700/Bold│ 1.0  (12px)  │ text-[10px] sm:text-[11px]│
│ Monospace / Stats │ 14px-20px    │ 16px-24px    │ 900/Mono│ 1.2 (Tabular)│ font-mono tabular-nums│
└───────────────────┴──────────────┴──────────────┴─────────┴──────────────┴───────────────────────┘
```

### ۳.۱. فونت‌ها و ترکیب دوزبانه (Fonts & Multi-Language)

1. **فارسی و عربی (RTL):**  
   - فونت رسمی: `Vazirmatn` (وزن‌های 400، 500، 600، 700، 800، 900).
   - برای خطوط فارسی و عربی به هیچ عنوان از `letter-spacing` (کلاس‌های `tracking-wide` یا `tracking-widest`) استفاده نشود زیرا اتصالات حروف شکسته می‌شود.
2. **انگلیسی و متون فنی (LTR):**  
   - فونت استاندارد: `Inter, system-ui, sans-serif`.
3. **ارقام مالی، شناسه‌ها، مبالغ و کدها:**  
   - منحصراً از کلاس `font-mono tabular-nums` همراه با جهت `dir="ltr"` برای نمایش ارقام انگلیسی، قیمت‌ها (`$1,250` یا `25,000 IQD`)، شناسه‌های سیستمی (`#TRIP-1082`) و تاریخ‌های لاگ استفاده شود.
   - در عناوین و متون فارسی توضیحی از متد کمکی `toFa(number)` برای نمایش بومی اعداد بهره گرفته شود.

---

## ۴. مقیاس فواصل، پدینگ‌ها، ابعاد و ارگونومی لمسی (Spacing & Touch Targets)

رعایت سیستم فاصله‌گذاری مضرب ۴ و ۸ پیکسلی برای حفظ ریتم عمودی و افقی الزامی است:

```
┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
│                              ماتریس فواصل و پدینگ‌های رسپانسیو                                   │
├─────────────┬─────────────┬─────────────┬────────────────────────────────────────────────────────┤
│ نام توکن    │ موبایل (px) │ دسکتاپ (px) │ کاربرد و موارد استفاده                                 │
├─────────────┼─────────────┼──────────────────────────────────────────────────────────────────────┤
│ Page Padding│ 16px (px-4) │ 32px (px-8) │ پدینگ افقی دیواره‌های اصلی صفحه به محتوا                │
│ Card Padding│ 14px (p-3.5)│ 24px (p-6)  │ پدینگ داخلی کارت‌های آماری، فرم‌ها و جداول             │
│ Form Gap    │ 12px (gap-3)│ 16px (gap-4)│ فاصله عمودی و افقی بین فیلدهای ورودی فرم               │
│ Section Gap │ 16px (gap-4)│ 24px (gap-6)│ فاصله بین بلوک‌های اصلی و سکشن‌های صفحه                │
│ Table Cell  │ 12px (p-3)  │ 16px (p-4)  │ پدینگ سلول‌های جدول داده‌ها                            │
└─────────────┴─────────────┴─────────────┴────────────────────────────────────────────────────────┘
```

### ۴.۱. حداقل ابعاد تعاملی برای لمس در موبایل (Mobile Touch Targets)
در موبایل، کاربر با انگشت با صفحه تعامل دارد نه با نشانگر دقیق ماوس. لذا:
- **ارتفاع دکمه‌ها و فیلدها:** حداقل `38px` الی `44px` در موبایل (`h-10 sm:h-9`).
- **آیکون‌باتن‌های عملیاتی:** کادر کلیک‌پذیر حداقل `36x36px` با پدینگ امن (`size-9 p-1.5`).
- **فاصله بین دکمه‌های مجاور:** حداقل `8px` (`gap-2`) تا از کلیک اشتباه جلوگیری شود.

### ۴.۲. شعاع انحنای المان‌ها (Border Radii)
- **تگ‌ها، بج‌ها و المان‌های ریز:** `rounded-lg` (8px الی 10px).
- **فیلدهای ورودی و دکمه‌ها:** `rounded-xl` (12px الی 14px).
- **کارت‌ها، سکشن‌ها و جداول:** `rounded-2xl` (16px).
- **دیالوگ‌ها در دسکتاپ:** `rounded-2xl` الی `rounded-3xl` (20px الی 24px).
- **دیالوگ‌ها در موبایل (Bottom Sheet):** لبه‌های بالا گرد `rounded-t-2xl` و لبه‌های پایین صاف `rounded-b-none`.
- **بج‌های کپسولی / قرصی:** `rounded-full` (9999px).

---

## ۵. پالت رنگی خنثی، بدون مدادرنگی (Neutral Slate Color Palette)

> [!CAUTION]
> **قانون قطعی ۹۰٪ خنثی (Strict 90% Neutral Rule):**  
> بیش از **۹۰ درصد** محیط بصری پنل مدیریت باید از رنگ‌های خنثی (مشکی تیره مات، زغالی، اسلیت، خاکستری، سفید) تشکیل شود. استفاده از رنگ‌های تند و رنگین‌کمانی برای پس‌زمینه کارت‌ها، هدرها، ستون‌های جدول یا تگ‌های معمولی اکیداً ممنوع است.

```
┌──────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                 پالت رنگی رسمی پنل مدیریت عقیله                                  │
├───────────────────┬───────────────────────────────┬──────────────────────────────────────────────┤
│ توکن معنایی       │ تم دارک (Dark Mode - پیش‌فرض) │ تم لایت (Light Mode)                         │
├───────────────────┼───────────────────────────────┼──────────────────────────────────────────────┤
│ background        │ #18191D (تیره مات و عمیق)     │ #F8FAFC (سفید-خاکستری لطیف)                  │
│ surface / card    │ #22252C (کارت پایه زغالی)     │ #FFFFFF (سفید خالص)                          │
│ popover / panel   │ #1E2128 (پنل‌های اسلاید)      │ #FFFFFF                                      │
│ border            │ rgba(255, 255, 255, 0.12)     │ rgba(15, 23, 42, 0.12)                       │
│ border-soft       │ rgba(255, 255, 255, 0.07)     │ rgba(15, 23, 42, 0.07)                       │
│ primary (برنز برند)│ #D09460                       │ #D09460                                      │
│ primary-muted     │ rgba(208, 148, 96, 0.15)      │ rgba(208, 148, 96, 0.10)                     │
│ text-foreground   │ #FFFFFF                       │ #0F172A                                      │
│ text-muted        │ #8B8B8B                       │ #64748B                                      │
│ text-subtle       │ #4D4D4D                       │ #94A3B8                                      │
└───────────────────┴───────────────────────────────┴──────────────────────────────────────────────┘
```

### ۵.۱. بج‌های وضعیتی استاندارد (Semantic Badges)
رنگ‌های اشباع منحصراً و صرفاً برای ۴ حالت سیستم مجاز هستند:

```tsx
// ۱. تگ خنثی معمولی (دسته‌بندی، کشور، نسخه، برچسب‌ها) - بیش از ۸۰٪ تگ‌ها
<Badge variant="outline" className="border-border-soft bg-muted/40 text-muted-foreground text-[10px] sm:text-[11px] font-medium px-2 py-0.5 rounded-lg">
  بلیت و پرواز
</Badge>

// ۲. وضعیت موفق / فعال / تایید شده (Success)
<span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-0.5 text-[10px] sm:text-[11px] font-bold text-emerald-600 dark:text-emerald-400">
  <span className="size-1.5 rounded-full bg-emerald-500" />
  تأیید شده
</span>

// ۳. وضعیت هشدار / در حال پردازش (Warning / Pending)
<span className="inline-flex items-center gap-1.5 rounded-full bg-amber-500/10 border border-amber-500/20 px-2.5 py-0.5 text-[10px] sm:text-[11px] font-bold text-amber-600 dark:text-amber-400">
  <span className="size-1.5 rounded-full bg-amber-500 animate-pulse" />
  در انتظار بررسی
</span>

// ۴. وضعیت خطا / لغوشده / حذف (Error / Destructive)
<span className="inline-flex items-center gap-1.5 rounded-full bg-rose-500/10 border border-rose-500/20 px-2.5 py-0.5 text-[10px] sm:text-[11px] font-bold text-rose-600 dark:text-rose-400">
  <span className="size-1.5 rounded-full bg-rose-500" />
  رد شده
</span>
```

---

## ۶. استاندارد جامع جداول داده‌ای و تطبیق با موبایل (Responsive Data Tables)

جداول عریض داده‌ای مهم‌ترین چالش در صفحات وب هستند. در پنل عقیله باید از یکی از دو الگوی استاندارد زیر استفاده شود:

### الگوی اول: نمایش دوگانه (جدول در دسکتاپ + لیست کارت در موبایل - الگو طلایی)
در این الگو، برای صفحات موبایل (`< 768px`) به جای جدول پهن ناخوانا، داده‌ها به صورت کارت‌های مدرن و شکیل نمایش داده می‌شوند:

```tsx
{/* نمای دسکتاپ و تبلت (md به بالا) */}
<div className="hidden md:block rounded-2xl border border-border-soft bg-card overflow-hidden">
  <div className="overflow-x-auto">
    <table className="w-full text-start text-xs">
      <thead className="border-b border-border-soft bg-muted/40 text-muted-foreground font-bold">
        <tr>
          <th className="p-4 text-start">عنوان سرویس</th>
          <th className="p-4 text-start">دسته‌بندی</th>
          <th className="p-4 text-start">مبلغ</th>
          <th className="p-4 text-start">وضعیت</th>
          <th className="p-4 text-end">عملیات</th>
        </tr>
      </thead>
      <tbody className="divide-y divide-border-soft">
        {items.map((item) => (
          <tr key={item.id} className="hover:bg-muted/20 transition-colors">
            <td className="p-4 font-medium text-foreground">{item.title}</td>
            <td className="p-4 text-muted-foreground">{item.category}</td>
            <td className="p-4 font-mono font-bold">{toFa(item.price)} د.ع</td>
            <td className="p-4">{/* بج وضعیت */}</td>
            <td className="p-4 text-end">{/* دکمه‌های ویرایش/حذف */}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
</div>

{/* نمای موبایل (زیر md) - کارت‌های مجزا */}
<div className="flex flex-col gap-3 md:hidden">
  {items.map((item) => (
    <Card key={item.id} className="border-border-soft bg-card p-4 rounded-2xl">
      <div className="flex items-start justify-between gap-2 border-b border-border-soft pb-3">
        <div>
          <p className="font-bold text-sm text-foreground">{item.title}</p>
          <span className="text-[11px] text-muted-foreground">{item.category}</span>
        </div>
        <div>{/* بج وضعیت */}</div>
      </div>
      <div className="flex items-center justify-between pt-3 text-xs">
        <span className="text-muted-foreground">مبلغ کل:</span>
        <span className="font-mono font-black text-foreground">{toFa(item.price)} د.ع</span>
      </div>
      <div className="mt-3 flex items-center justify-end gap-2 border-t border-border-soft pt-3">
        <Button variant="ghost" size="sm" className="h-8 text-xs">مشاهده جزئیات</Button>
        <Button variant="outline" size="sm" className="h-8 text-xs">ویرایش</Button>
      </div>
    </Card>
  ))}
</div>
```

### الگوی دوم: جدول با اسکرول افقی نرم و ستون عملیات چسبان (Sticky Action Column)
چنانچه اطلاعات جدول بسیار متراکم است، کل جدول درون کانتینر `overflow-x-auto` قرار گرفته و ستون عملیات در سمت چپ (یا انتهای RTL) چسبان (`sticky end-0`) می‌ماند:

```tsx
<div className="rounded-2xl border border-border-soft bg-card overflow-hidden">
  <div className="overflow-x-auto no-scrollbar sm:overflow-x-auto">
    <table className="w-full min-w-[680px] text-start text-xs">
      {/* ردیف‌ها */}
    </table>
  </div>
</div>
```

---

## ۷. نوار فیلترها، جستجو و فرم‌ها در وب و موبایل (Filters & Forms)

### ۷.۱. نوار فیلترهای بالا (Filter Bar)
- **دسکتاپ (`sm` به بالا):** چینش افقی `flex flex-row items-center justify-between gap-3`. فیلد سرچ گسترده و فیلترهای دراپ‌داون در امتداد یک خط.
- **موبایل:** چینش عمودی استک‌شده `flex flex-col gap-2.5 items-stretch`. سرچ تمام‌عرض در بالا و دکمه‌های فیلتر/اکشن در زیر.

```tsx
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
  {/* بخش جستجو و انتخابگرها */}
  <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-center">
    <div className="relative flex-1 sm:max-w-xs">
      <Input
        placeholder="جستجو در اطلاعات..."
        className="h-9 w-full bg-card/60 text-xs ps-8 rounded-xl border-border-soft"
      />
      <Ic.Search className="absolute start-2.5 top-2.5 size-4 text-muted-foreground" />
    </div>
    <div className="flex items-center gap-2">
      {/* دراپ‌داون وضعیت یا سرویس */}
    </div>
  </div>

  {/* دکمه عملیات اصلی */}
  <Button className="h-9 gap-1.5 rounded-xl bg-primary text-xs font-bold text-primary-foreground sm:w-auto w-full">
    <Ic.Plus className="size-4" />
    افزودن آیتم جدید
  </Button>
</div>
```

### ۷.۲. گرید فیلدهای فرم (Responsive Form Grids)
فرم‌ها در دیالوگ‌ها یا صفحات باید به صورت واکنش‌گرا ستون‌بندی شوند:
- موبایل: ۱ ستونه (`grid-cols-1`).
- تبلت و فبلت: ۲ ستونه (`sm:grid-cols-2`).
- دسکتاپ عریض: ۳ ستونه (`lg:grid-cols-3`).

```tsx
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 sm:gap-4">
  <div className="space-y-1.5">
    <label className="text-xs font-bold text-muted-foreground">عنوان فارسی</label>
    <Input className="h-9 text-xs rounded-xl bg-card border-border-soft" />
  </div>
  <div className="space-y-1.5">
    <label className="text-xs font-bold text-muted-foreground">عنوان عربی</label>
    <Input className="h-9 text-xs rounded-xl bg-card border-border-soft" />
  </div>
  <div className="space-y-1.5 sm:col-span-2 lg:col-span-1">
    <label className="text-xs font-bold text-muted-foreground">عنوان انگلیسی</label>
    <Input className="h-9 text-xs rounded-xl bg-card border-border-soft" dir="ltr" />
  </div>
</div>
```

---

## ۸. دیالوگ‌ها، مودال‌ها و باتم‌شیت‌ها (Modals & Bottom Sheets)

دیالوگ‌های پنل عقیله باید در دسکتاپ در مرکز تصویر باز شده و در موبایل به صورت سازگار با انگشت دست عمل کنند:

```tsx
<Dialog open={isOpen} onOpenChange={setIsOpen}>
  <DialogContent className="w-full max-w-full sm:max-w-xl md:max-w-2xl max-h-[92vh] flex flex-col p-0 rounded-t-2xl sm:rounded-2xl border-border-soft bg-[#22252c] overflow-hidden">
    {/* هدر ثابت دیالوگ */}
    <DialogHeader className="p-4 sm:p-5 border-b border-border-soft bg-card/60">
      <DialogTitle className="text-base font-extrabold text-foreground">
        ویرایش مشخصات سرویس
      </DialogTitle>
      <DialogDescription className="text-xs text-muted-foreground">
        اطلاعات را به دقت در هر سه زبان تکمیل نمایید.
      </DialogDescription>
    </DialogHeader>

    {/* محتوای دارای اسکرول عمودی */}
    <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4">
      {/* فیلدهای ورودی */}
    </div>

    {/* فوتر چسبان دیالوگ با دکمه‌های منظم */}
    <DialogFooter className="p-3 sm:p-4 border-t border-border-soft bg-card/60 flex flex-col-reverse sm:flex-row gap-2 sm:justify-end">
      <Button variant="outline" onClick={() => setIsOpen(false)} className="h-9 text-xs w-full sm:w-auto rounded-xl">
        انصراف
      </Button>
      <Button className="h-9 text-xs font-bold w-full sm:w-auto rounded-xl bg-primary text-primary-foreground">
        ذخیره تغییرات
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

---

## ۹. استاندارد سراسری اسکلتون لودینگ (Shimmer Loading Standard)

> [!IMPORTANT]
> **الگوی واحد لودینگ:** تمام صفحات، جداول و کارت‌ها در هنگام دریافت اطلاعات باید از کامپوننت سراسری `@/components/shared/Shimmer` با انیمیشن پالس و پالت خنثی استفاده کنند.

### ۹.۱. توکن‌های رنگی و دوره تناوب شیمر
- **تم لایت:** رنگ پایه `#E2E8F0`، هایلایت `#F8FAFC`.
- **تم دارک:** رنگ پایه `#22252C`، هایلایت `#333742`.
- **دوره انیمیشن:** دقیقاً `1500ms` با انیمیشن ملایم پالس.

```tsx
import { Shimmer } from '@/components/shared/Shimmer'

{isLoading ? (
  <div className="space-y-4">
    {/* اسکلتون کارت‌های آماری */}
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4">
      <Shimmer className="h-24 rounded-2xl" />
      <Shimmer className="h-24 rounded-2xl" />
      <Shimmer className="h-24 rounded-2xl" />
      <Shimmer className="h-24 rounded-2xl" />
    </div>
    {/* اسکلتون جدول داده‌ها */}
    <Shimmer withCard cardHeaderTitle="در حال بارگذاری اطلاعات..." rows={6} />
  </div>
) : (
  <MainPageContent />
)}
```

---

## ۱۰. دسترسی‌پذیری، ارگونومی و مناطق امن (Accessibility & Safe Areas)

1. **کنتراست استاندارد متون (WCAG AA):**
   - متن اصلی در برابر پس‌زمینه حداقل نسبت `4.5:1` داشته باشد.
   - از متن‌های خاکستری کم‌کنتراست در تم دارک پرهیز شود.
2. **منطقه امن دکمه‌های پایین موبایل (Safe Area Inset):**
   - نوارهای عملیاتی چسبان پایین صفحه (Sticky Bottom Bar) باید دارای پدینگ `pb-[calc(0.75rem+env(safe-area-inset-bottom))]` باشند تا با نوار هوم‌بار آیفون تداخل پیدا نکنند.
3. **حالت فوکوس کیبورد (Focus Visibility):**
   - تمامی دکمه‌ها و فیلدها باید دارای کادر فوکوس واضح با `focus-visible:ring-2 focus-visible:ring-primary/50` باشند.

---

## ۱۱. چک‌لیست طلایی هوش مصنوعی قبل از تحویل هر تسک وب و پنل (AI Golden Checklist)

قبل از نهایی کردن هرگونه تغییر در پنل مدیریت، بررسی موارد زیر الزامی است:

- [ ] **۱. پالت خنثی و بدون رنگین‌کمان:** آیا بیش از ۹۰٪ المان‌ها دارای رنگ‌های خنثی بوده و از رنگ‌های فسفری/تند پرهیز شده است؟
- [ ] **۲. سازگاری کامل با موبایل (Responsive):** آیا صفحه در ابعاد موبایل (`375px` و `414px`) تست شده و اسکرول افقی نامطلوب (Horizontal Overflow) ندارد؟
- [ ] **۳. تایپوگرافی چندزبانه:** آیا فونت متون فارسی/عربی `Vazirmatn` و ارقام/مبالغ/کدها `font-mono tabular-nums` با `dir="ltr"` است؟
- [ ] **۴. ابعاد کلیک‌پذیر (Touch Targets):** آیا دکمه‌ها و فیلدها در موبایل ارتفاع کافی (حداقل `38px` تا `44px`) دارند؟
- [ ] **۵. لودینگ یکدست (Shimmer):** آیا در حالت لودینگ از کامپوننت استاندارد `Shimmer` با پالت خنثی استفاده شده است؟
- [ ] **۶. دوگانگی تم:** آیا کنتراست صفحه در هر دو حالت Light Mode و Dark Mode خوانا و استاندارد است؟
- [ ] **۷. منطق بیزینس و کلیدهای انگلیسی:** آیا تمامی مقایسه‌ها و شرط‌های کد بر اساس کلیدهای استاندارد انگلیسی API پیاده شده‌اند؟