/* ============================================================
   دیبا — پنل مدیریت (django-unfold)
   ============================================================
   ⚠ هدف: کاربری که از میزکارِ دیبا به پنل می‌رود نباید حس کند وارد
   **برنامه‌ی دیگری** شده. پالتِ رنگ در `UNFOLD["COLORS"]` تنظیم شده
   (همان توکن‌های app.css)؛ این فایل فقط چیزهایی را می‌گیرد که از راهِ
   تنظیمات نمی‌شود: قلم، شعاع، تراکم، و اصلاحاتِ راست‌به‌چپ.

   ⚠⚠ درسی که یک بار گران تمام شد:

       [class*="text-"] { font-family: … !important }   ← هرگز

   این قاعده اسپن‌های آیکونِ Material Symbols را هم می‌گرفت (چون
   کلاس‌هایی مثل `text-sm` دارند) و آیکون‌ها به‌صورتِ **متنِ خام**
   نمایش داده می‌شدند: «arrow_back»، «manage_search». هیچ انتخابگرِ
   عامی روی font-family نوشته نمی‌شود؛ و قلمِ آیکون صریحاً محافظت
   می‌شود.
   ============================================================ */

/* ⚠ فونت از خودِ دیبا، نه از CDNِ گوگل — سرورِ اتاق به آن نمی‌رسد.
   نسخه‌ی «@font-face» در «app.css» است ولی پنلِ ادمین آن فایل را
   نمی‌خوانَد، پس همان تعریف اینجا هم لازم است. مسیرها نسبی‌اند و
   هر دو فایل در «static/diba/» می‌نشینند، پس یکی می‌شوند. */
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 300;
  font-display: swap; src: url("fonts/Vazirmatn-Light.6458eed8cf92.woff2") format('woff2');
}
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/Vazirmatn-Regular.cdc140628f11.woff2") format('woff2');
}
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/Vazirmatn-Medium.dd2193b32cbe.woff2") format('woff2');
}
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/Vazirmatn-SemiBold.9260c1927872.woff2") format('woff2');
}
@font-face {
  font-family: 'Vazirmatn'; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/Vazirmatn-Bold.7958481fe611.woff2") format('woff2');
}

/* ═══════════════════════════════════════════════════════════════════
   توکن‌های دیبا برای درونِ ادمین
   ═══════════════════════════════════════════════════════════════════
   ⚠ چرا لازم است: `static/diba/jalali.css` (ظاهرِ تقویمِ شمسی) در
   **هر دو** جا استفاده می‌شود — سایت و ادمین. آن فایل توکن تعریف
   نمی‌کند، فقط مصرف می‌کند. در سایت توکن‌ها از app.css می‌آیند؛
   ادمین app.css را نمی‌خواند، پس همان‌ها اینجا تعریف می‌شوند.

   مقادیر **عیناً** از app.css کپی شده‌اند تا تقویمِ ادمین و تقویمِ
   سایت یک شکل باشند. اگر آنجا رنگی عوض شد، اینجا هم باید عوض شود.

   ⚠ unfold حالتِ تیره را با کلاسِ `dark` روی `<html>` نشان می‌دهد —
   نه با `data-theme` و نه با `prefers-color-scheme`. پس تفکیک
   این‌جا با `html.dark` است، نه با قاعده‌ی سه‌بلوکیِ app.css.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* روشن — پیش‌فرضِ ادمین */
  --surface: #ffffff;   --surface-2: #fafbfc;
  --line: #e3e6ea;      --line-2: #cfd5dd;
  --fg: #171c23;        --fg-muted: #5b6472;   --fg-faint: #8a929e;
  --accent: #147a5e;    --on-accent: #ffffff;
  --warn: #8a6114;      --bad: #a8443a;        --bad-bg: #fdeceb;
  --shadow: 0 4px 14px rgba(23, 28, 35, .12);
  --r-sm: 6px;          --r-lg: 12px;
  --font: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', sans-serif;
}
html.dark {
  --surface: #10141b;   --surface-2: #161d26;
  --line: #1c232e;      --line-2: #2a3340;
  --fg: #e8ecf2;        --fg-muted: #8d97a5;   --fg-faint: #5c6675;
  --accent: #46b18e;    --on-accent: #06110c;
  --warn: #d8a13c;      --bad: #d98479;        --bad-bg: #241715;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ── قلم: فقط روی ریشه، تا ارث‌بری کار کند و آیکون‌ها سالم بمانند */
html, body,
.font-sans, [class*="font-"] {
  font-family: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', sans-serif;
}

/* ⚠ سپرِ آیکون — هر چه بالا نوشته شود، این باید آخر بماند. */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp,
span[class*="material-symbols"] {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
}

/* ── ارقام: هم‌تراز، و جهت‌جدا داخلِ متنِ فارسی */
.paginator, .paginator *,
time, .whitespace-nowrap:has(time),
td [class*="tabular"], .tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ── شکل: شعاع و تراکمِ دیبا، نه پیش‌فرضِ unfold */
:root {
  --diba-r: 8px;
  --diba-r-sm: 6px;
}

.rounded, .rounded-md, .rounded-lg,
button, .button, input, select, textarea {
  border-radius: var(--diba-r-sm);
}
.rounded-xl, .rounded-2xl { border-radius: var(--diba-r); }

/* ── دکمه‌ها: هم‌قدِ دکمه‌های میزکار (۳۱ پیکسل)، نه بلندترِ پیش‌فرض */
a.button, input[type="submit"], button[type="submit"] {
  font-weight: 600;
  letter-spacing: 0;
}

/* ── جدولِ فهرست: خطِ مو، نه قابِ سنگین؛ و سطرِ زیرِ اشاره روشن شود */
#result_list tbody tr,
table tbody tr {
  transition: background-color .12s ease;
}

/* ── نوارِ کناری: فاصله‌ی گروه‌ها کمی بازتر تا خوانا شود */
#nav-sidebar .border-t,
aside .border-t { margin-block-start: 6px; padding-block-start: 6px; }

/* ── راست‌به‌چپ: چیزهایی که unfold با left/right ثابت کرده
   ⚠ اینجا left/right فیزیکی **لازم** است، چون داریم قاعده‌های
     فیزیکیِ خودِ unfold را خنثی می‌کنیم. در app.css (کدِ خودمان)
     همچنان فقط خصوصیت‌های منطقی به کار می‌رود. */
html[dir="rtl"] .text-left  { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }

/* ⚠ unfold برای فاصله‌ی آیکون از متن از `mr-*` استفاده می‌کند — یک
   خصوصیتِ **فیزیکی**. در راست‌به‌چپ این فاصله سمتِ اشتباه می‌افتد و
   آیکون به متن می‌چسبد.

   ⚠ درسِ این جلسه: اول این قاعده را به `aside` محدود کردم، ولی
   نوارِ کناریِ unfold اصلاً `<aside>` نیست — یک `<div>` معمولی است.
   پس قاعده هیچ‌وقت اجرا نشد. راستی‌آزمایی در مرورگر نشان داد
   `mr-3` روی **۲۴** عنصر است و همه‌شان دقیقاً یک الگو دارند:
   `material-symbols-outlined … mr-3 …`. پس بی‌محدودیتِ ظرف
   خنثی می‌شود؛ همه‌ی موارد فاصله‌ی «بعدِ آیکون» است. */
html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: .75rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: .5rem; }
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: .25rem; }
html[dir="rtl"] .-mr-1 { margin-right: 0; margin-left: -.25rem; }
html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: .75rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: .5rem; }
html[dir="rtl"] .-ml-1 { margin-left: 0; margin-right: -.25rem; }

/* ستونِ چک‌باکسِ جدول: `pl-3` لبه‌ی بیرونیِ جدول را نفس می‌دهد؛
   در راست‌به‌چپ لبه‌ی بیرونی سمتِ راست است. */
html[dir="rtl"] th.action-checkbox-column.pl-3,
html[dir="rtl"] td.action-checkbox.pl-3 { padding-left: 0; padding-right: .75rem; }

/* صفحه‌بندی: `pr-4` فاصله‌ی «بعدِ هر شماره» است */
html[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }

/* آیکونِ فلشِ راهنمای مسیر (breadcrumb) در RTL باید برعکس شود */
html[dir="rtl"] nav[aria-label="Breadcrumb"] .material-symbols-outlined,
html[dir="rtl"] .breadcrumbs .material-symbols-outlined {
  transform: scaleX(-1);
}

/* ── فرم: برچسبِ خوانا و فاصله‌ی نفس‌گیرِ کمتر */
.field label, label.block { font-weight: 500; }

/* ── فوکوس: همان حلقه‌ی سبزِ دیبا */
:focus-visible {
  outline: 2px solid rgb(70 177 142);
  outline-offset: 2px;
}

/* ── احترام به «حرکتِ کمتر» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── چاپ: پنل هم گاهی چاپ می‌شود */
@media print {
  #nav-sidebar, aside, .no-print, button { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}