/* ===========================================================
   GTA — زبان طراحی سامانه‌ی یکپارچه (سراسری روی کل MudBlazor)
   شیشه‌ای (Apple) + نور گرادیانی (Gemini) + زمرد ژرف
   فقط CSS — بدون rebuild اعمال می‌شود
   =========================================================== */

:root {
  /* رنگ برند روی متغیرهای خود MudBlazor → همه‌جا (دکمه/آیکون/چارت/active) سبز می‌شود */
  --mud-palette-primary: #175C39;
  --mud-palette-primary-rgb: 23,92,57;
  --mud-palette-primary-text: #ffffff;
  --mud-palette-primary-darken: #0F4429;
  --mud-palette-primary-lighten: #2E8B5B;
  --mud-palette-secondary: #C8911C;
  --mud-palette-secondary-rgb: 200,145,28;
  --mud-palette-tertiary: #2E8B5B;

  /* پس‌زمینه‌ی داخلی MudBlazor شفاف تا aurora از پشت دیده شود (surface=کارت‌ها دست‌نخورده) */
  --mud-palette-background: transparent;
  --mud-palette-background-gray: transparent;
  --mud-palette-background-grey: transparent;
  --mud-palette-drawer-background: transparent;
  --mud-palette-appbar-background: transparent;

  --gta-green: #175C39;
  --gta-green-d: #0F4429;
  --gta-gold: #C8911C;
  --gta-ink: #141A22;
  /* متنِ فرعی. ۲۰۲۶-۰۸-۱۰ یک پله تیره شد (#6B7686 → #586472): روی شیشه‌ی روز روی
     زمینه‌ی نعنایی aurora فقط ۳٫۹۵–۴٫۳۵ کنتراست می‌داد و ۵۰+ موردِ لب‌مرزیِ داشبورد
     مدیر همه از همین یک توکن می‌آمدند. حالا بدترین حالت ۵٫۲. (شب توکنِ خودش را دارد.) */
  --gta-muted: #586472;
  --gta-accent: #C2606A;
  --gta-line: #E8ECEA;
  /* سطوح شیشه‌ای — تو حالت شب خودکار تیره می‌شوند؛ صفحات این‌ها را بردارند نه سفید ثابت */
  --gta-surface: rgba(255,255,255,.6);     /* کارت آماری/باکس */
  --gta-surface-2: rgba(255,255,255,.52);  /* پنل بزرگ‌تر */
  --gta-edge: rgba(255,255,255,.75);       /* حاشیه‌ی شیشه */
  --gta-inset: rgba(255,255,255,.9);       /* هایلایت لبه‌ی بالا */

  /* ---- شیشه‌ی صفحات + متن روی شیشه (۲۰۲۶-۰۷-۲۱) ----
     هر صفحه‌ای این‌ها را بردارد، حالت شبش خودکار درست می‌شود و دیگر
     لازم نیست بلوک html.gta-dark جدا بنویسد. مقادیر روز = همان ظاهر فعلی. */
  --gta-glass: rgba(255,255,255,.55);        /* پنل شیشه‌ای صفحه */
  --gta-glass-strong: rgba(255,255,255,.62); /* سر گرادیان پنل پررنگ‌تر */
  --gta-glass-2: rgba(255,255,255,.34);      /* ته همان گرادیان */
  --gta-glass-border: rgba(255,255,255,.7);  /* حاشیه‌ی پنل */
  --gta-glass-item: rgba(255,255,255,.5);    /* کارت/ردیف داخل پنل */
  --gta-glass-item-2: rgba(255,255,255,.62); /* کپسول/چیپ داخل پنل */
  --gta-glass-item-hover: #fff;
  --gta-glass-sel: rgba(23,92,57,.10);       /* مورد انتخاب‌شده */
  --gta-glass-sel-border: var(--mud-palette-primary);
  --gta-glass-shadow: 0 10px 34px rgba(23,92,57,.12);
  --gta-on-glass: #3a4a44;                   /* متن اصلی روی شیشه */
  --gta-on-glass-soft: #556A61;              /* لیبل/متن فرعی (یک پله تیره‌تر از #5c7268 تا روی
                                                زمینه‌ی نعنایی aurora از حد WCAG AA رد شود) */
  --gta-on-glass-title: var(--mud-palette-primary);
  --gta-on-glass-sel: var(--mud-palette-primary);
  --gta-on-glass-weight: 400;                /* در شب پررنگ‌تر می‌شود */
  --gta-field-bg: rgba(255,255,255,.85);     /* input/select روی شیشه */
  --gta-field-border: rgba(0,0,0,.12);

  --gta-radius: 18px;        /* کارت/دیالوگ بزرگ */
  --gta-radius-card: 16px;   /* کارت/باکس معمول صفحات */
  --gta-radius-ctl: 12px;    /* کنترل/دکمه/آیتم لیست */
  --gta-radius-sm: 8px;      /* المان ریز (بج/چیپ کوچک) */
  --gta-shadow: 0 8px 24px rgba(15,42,28,.07);
  --gta-shadow-h: 0 14px 34px rgba(15,42,28,.11);

  /* عدد منفی (بدهی انبار/کسری) — عمداً از Error تم تیره‌تر است: Error روز (#C2606A)
     روی ردیف قرمزِ کم‌رنگ فقط ۳٫۵ کنتراست می‌داد و حد AA (۴٫۵) را رد می‌کرد.
     مقدار زیر ۵٫۲ می‌دهد؛ نسخه‌ی شب پایین‌تر در html.gta-dark ست می‌شود. */
  --gta-negative: #A93F4B;

  /* ---- سه رنگ معنایی «رشد / هشدار / افت» (۲۰۲۶-۰۸-۰۹) ----
     داشبورد مدیر این سه مفهوم را با هگزِ ثابت می‌نوشت (#157347 / #9a6f14 / #a64853) و
     در حالت شب روی سطحِ تیره محو می‌شد. هر صفحه‌ای این‌ها را بردارد، شبش خودکار درست است.
     هر جفت = رنگ متن + زمینه‌ی کم‌رنگِ همان (برای قرص/بج). کنتراست هر دو حالت ≥ ۴٫۵. */
  --gta-pos: #157347;                       /* سبزِ رشد (متن) */
  --gta-pos-bg: rgba(23,92,57,.11);         /* زمینه‌ی قرصِ رشد */
  /* ⭐ سه رنگِ زیر ۲۰۲۶-۰۸-۱۰ یک پله تیره‌تر شدند (فقط روز). دلیل: روی زمینه‌ی
     کم‌رنگِ خودشان (قرصِ کهربایی/قرمز) که آن هم روی شیشه‌ی روز می‌نشیند، کنتراست
     ۴٫۱۶–۴٫۴۳ می‌شد — زیرِ حد AA. مقادیرِ تازه ۵٫۲ تا ۵٫۴ می‌دهند. حالتِ شب
     دست‌نخورده است (هر سه در html.gta-dark بازتعریف می‌شوند). */
  --gta-warn: #7E5810;                      /* کهربایی هشدار (متن) — بود #8A6312 */
  --gta-warn-bg: rgba(200,145,28,.15);
  --gta-neg: #8E3541;                       /* قرمزِ افت (متن) — بود var(--gta-negative) */
  --gta-neg-text: #8E3541;                  /* همان، ولی برای جایی که دو لایه‌ی قرمز روی هم می‌افتد */
  --gta-neg-bg: rgba(194,96,106,.13);
  --gta-neg-border: rgba(194,96,106,.35);
  --gta-flat-bg: rgba(120,120,120,.12);     /* «بدون تغییر» — خنثی */
  --gta-brand-soft: rgba(23,92,57,.055);    /* تینتِ خیلی کم‌رنگِ برند: hover/نوار/سلول */
  --gta-bg: rgba(230,241,234,.78);          /* زمینه‌ی نوارهای چسبان (روی aurora با blur) */

  /* گرادیان‌های برند — به‌جای نوشتنِ دوباره‌ی هگز در هر صفحه */
  --gta-grad-brand: linear-gradient(140deg,#2A7D52,#15583A);   /* چیپ فعال/دکمه‌ی پررنگ */
  --gta-grad-bar: linear-gradient(90deg,#2A7D52,#175C39);      /* پرکنِ نوار افقی */
  --gta-grad-bar-gold: linear-gradient(90deg,#D9A83A,#C8911C);
}

/* پس‌زمینه‌ی aurora — یک لایه‌ی ثابت پشت همه‌چیز (قطعی، فارغ از لایه‌های MudBlazor) */
html {
  min-height: 100%;
  background-color: #E6F1EA !important;
  background-image:
    radial-gradient(680px 520px at 0% -3%, rgba(46,139,91,.32), transparent 58%),
    radial-gradient(600px 500px at 100% 0%, rgba(206,160,52,.24), transparent 57%),
    radial-gradient(800px 700px at 102% 103%, rgba(24,160,130,.28), transparent 58%),
    radial-gradient(720px 620px at -2% 103%, rgba(31,122,75,.24), transparent 58%),
    radial-gradient(560px 460px at 72% 26%, rgba(120,220,205,.16), transparent 60%),
    radial-gradient(1300px 920px at 50% 48%, rgba(255,255,255,.20), transparent 64%),
    linear-gradient(135deg,#E6F1EA 0%,#E4EFE8 45%,#F1EBDD 100%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}
/* aurora روی html می‌نشیند تا همیشه کل صفحه (حتی پایین‌تر محتوای کوتاه) پر باشد */
.mud-layout { background: transparent !important; min-height: 100vh !important; }
body { background: transparent !important; min-height: 100vh; }
.mud-main-content,
.mud-drawer-content,
.mud-content,
.mud-main-content > .mud-container { background: transparent !important; background-color: transparent !important; }

/* نوار بالا (AppBar): کارت شیشه‌ای شناور گوشه‌گرد عین دمو (نه نوار سرتاسری چسبیده) */
.mud-appbar {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  color: var(--gta-ink) !important;
  top: 14px !important;
  inset-inline-start: 258px !important;   /* جا برای کارت برند جدا (گوشه‌ی راست در RTL) */
  inset-inline-end: 18px !important;
  width: auto !important;
  height: 62px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 12px 34px rgba(15,42,28,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
  overflow: visible !important;            /* کرکره‌ی منوی بالا باید بیرون نوار دیده شود */
}
.mud-appbar .mud-toolbar { overflow: visible !important; }
/* toolbar هدر را دقیقاً هم‌ارتفاع و وسط نوار کن + فاصله‌ی راست لوگو را کم کن */
.mud-appbar .mud-toolbar.mud-toolbar-appbar {
  height: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  padding-inline-start: 12px !important;
}
/* محتوا را پایین‌تر بیاور تا زیر کارت شناور بالا نرود */
.mud-main-content { padding-top: 92px !important; }
.mud-appbar .mud-icon-button,
.mud-appbar .mud-icon-root,
.mud-appbar .mud-typography { color: #3B4654 !important; }

/* منوی کناری (Drawer): شیشه‌ای */
.mud-drawer {
  background: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  border-inline-start: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: -8px 0 30px rgba(15,42,28,.05) !important;
}
.mud-nav-link {
  border-radius: 12px !important;
  margin: 2px 8px;
  transition: .18s;
}
.mud-nav-link.active,
.mud-nav-link.mud-nav-link-active {
  background: linear-gradient(140deg,#2a7d52,#15583a) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(23,92,57,.28) !important;
}
.mud-nav-link.active .mud-icon-root,
.mud-nav-link.mud-nav-link-active .mud-icon-root { color: #fff !important; }
.mud-nav-link:not(.active):hover { background: rgba(23,92,57,.08) !important; }

/* کارت‌ها و سطوح: شیشه‌ای ملایم + گوشه‌گرد + سایه‌ی نرم + هایلایت لبه */
.mud-paper,
.mud-card {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--gta-radius) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: var(--gta-shadow), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: box-shadow .2s ease, transform .2s ease;
}
.mud-card:hover { box-shadow: var(--gta-shadow-h), inset 0 1px 0 rgba(255,255,255,.9) !important; }
/* منوها/دیالوگ‌ها (mud-paper) خواناتر بمانند */
.mud-popover, .mud-menu .mud-paper, .mud-dialog .mud-paper { background: rgba(255,255,255,.92) !important; }

/* ===========================================================
   واترمارک آرم GTA — سراسری، پشت هر صفحه‌ی سامانه (مثل بخش ثبت نگین)
   یک <div class="gta-watermark"> در AdminLayout می‌آید؛ این استایلش است.
   =========================================================== */
/* ⚠️ ۲۰۲۶-۰۸-۱۷: واترمارک وسطِ صفحه بود و دقیقاً پشتِ متنِ کارتِ «کارها» می‌افتاد
   (شیشه‌ی کارت نیم‌شفاف است و آرم از میانِ نوشته رد می‌شد). حالا گوشه‌ی پایین-چپ و
   خیلی کم‌رنگ‌تر — حسِ برند می‌ماند، خوانایی به‌هم نمی‌خورد.
   ⚠️ ۲۰۲۶-۰۸-۱۹: پایین-چپ دقیقاً روی ماندالای html::before می‌افتاد (دو لایه‌ی جدا،
   یک گوشه). حالا پایین-راست — ماندالای آن سمت بالاست، پس تداخلی نیست. */
.gta-watermark {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; user-select: none;
}
.gta-watermark img {
  position: absolute; bottom: 3vh; right: calc(80px + 2.5vw); /* 80px = ریلِ کناریِ راست؛ آرم زیرِ ریل نرود */
  width: min(26vw, 320px); height: auto;
  opacity: .04; filter: saturate(115%);
}
html.gta-dark .gta-watermark img { opacity: .045; filter: saturate(120%) brightness(1.7); }
/* روی موبایل کوچک‌تر و محوتر تا حواس‌پرت نباشد */
@media (max-width: 960px) {
  .gta-watermark img { width: min(40vw, 150px); opacity: .03; bottom: 1.5vh; right: 2vw; }
  html.gta-dark .gta-watermark img { opacity: .035; }
}
/* همه‌ی محتوای صفحه روی واترمارک بنشیند (واترمارک z-index:0 است، محتوا z-index:1) */
.mud-main-content > *:not(.gta-watermark) { position: relative; z-index: 1; }

/* آواتارِ کاربر در نوارِ بالا: بدونِ عکس، حرفِ اولِ نام روی زمینه‌ی برند */
.gta-user-av { background: linear-gradient(140deg,#2a7d52,#15583a) !important; color: #fff !important; }
.gta-user-initials { font-size: 1.05rem; font-weight: 800; letter-spacing: .5px; line-height: 1; }

/* ===========================================================
   انیمیشنِ ورودِ نرمِ کادرها و بخش‌ها — فقط داخل محتوای صفحه.
   منو/دیالوگ/پاپ‌اور بیرونِ mud-main-content رندر می‌شوند، پس دست‌نخورده می‌مانند.
   =========================================================== */
@keyframes gtaRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mud-main-content .mud-paper,
.mud-main-content .mud-card {
  animation: gtaRise .38s cubic-bezier(.22, 1, .36, 1) both;
}
/* استگرِ ملایمِ چند کادرِ نخستِ صفحه تا یک‌جا بالا نپرند (اگر ساختار match نشد، بی‌ضرر همه با هم می‌آیند) */
.mud-main-content .mud-container > .mud-paper:nth-of-type(2),
.mud-main-content .mud-container > .mud-grid > .mud-grid-item:nth-of-type(2) .mud-paper { animation-delay: .05s; }
.mud-main-content .mud-container > .mud-paper:nth-of-type(3),
.mud-main-content .mud-container > .mud-grid > .mud-grid-item:nth-of-type(3) .mud-paper { animation-delay: .10s; }
.mud-main-content .mud-container > .mud-paper:nth-of-type(4),
.mud-main-content .mud-container > .mud-grid > .mud-grid-item:nth-of-type(4) .mud-paper { animation-delay: .15s; }
/* احترام به کاربری که «کاهش حرکت» را روشن کرده */
@media (prefers-reduced-motion: reduce) {
  .mud-main-content .mud-paper,
  .mud-main-content .mud-card { animation: none !important; }
}

/* دکمه‌ها: گوشه‌گرد + گرادیان زمرد ژرف برای primary */
.mud-button-root { border-radius: 12px !important; text-transform: none !important; font-weight: 600; }
.mud-button-filled.mud-button-filled-primary {
  background: linear-gradient(140deg,#2a7d52,#15583a) !important;
  box-shadow: 0 8px 20px rgba(23,92,57,.28) !important;
  color: #fff !important;
}
.mud-button-filled.mud-button-filled-primary .mud-icon-root { color: #fff !important; }

/* جدول‌ها: شیشه‌ای + راه‌راه (zebra) + ردیف‌های گوشه‌گرد جدا، هماهنگ با تم */
/* پهنای ستون = اندازه‌ی محتوا (نه کشیده). جدول به اندازه‌ی نیازش پهن می‌شود،
   نه کل عرض کارت — تا ستون کم‌محتوا (مثل کد ملی خالی) باریک بماند و
   جدول بی‌خود گنده/دارای اسکرول افقی نشود. */
.mud-table-container { background: transparent !important; width: 100% !important; }
.mud-table-root {
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 7px !important;
  width: auto !important;
  min-width: min(100%, 1500px) !important;  /* در صفحه‌ی پهن لاغر نشود، در صفحه‌ی باریک هم سرریز نکند */
  max-width: 100% !important;
  margin-inline: auto !important;            /* وسط کارت بنشیند، نه چسبیده به یک طرف */
  table-layout: auto !important;
}
.mud-data-grid, .mud-data-grid .mud-table-container { width: 100% !important; }
.mud-data-grid table {
  width: auto !important;
  min-width: min(100%, 1500px) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}
/* سرستون چسبان: مات + بلور تا متن ردیف زیرش از پشت دیده نشود */
.mud-table-head { position: relative; z-index: 4 !important; }
.mud-table-head .mud-table-row { background: transparent !important; }
.mud-table-head .mud-table-cell {
  background: #E3EEE7 !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  color: var(--gta-green) !important;
  font-weight: 800 !important; border: 0 !important;
  box-shadow: 0 4px 10px rgba(15,42,28,.06) !important;
}
.mud-table-head .mud-table-row .mud-table-cell:first-child { border-start-start-radius: 13px; border-end-start-radius: 13px; }
.mud-table-head .mud-table-row .mud-table-cell:last-child  { border-start-end-radius: 13px;  border-end-end-radius: 13px; }
.mud-table-body .mud-table-cell {
  border: 0 !important; color: var(--gta-ink) !important;
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
}
.mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell { background: rgba(23,92,57,.06) !important; }
.mud-table-body .mud-table-row:hover .mud-table-cell { background: rgba(23,92,57,.13) !important; }
.mud-table-body .mud-table-row .mud-table-cell:first-child { border-start-start-radius: 13px; border-end-start-radius: 13px; }
.mud-table-body .mud-table-row .mud-table-cell:last-child  { border-start-end-radius: 13px;  border-end-end-radius: 13px; }
.mud-table-pagination { background: transparent !important; border: 0 !important; }

/* دکمه‌های آیکونی سرستون DataGrid (مرتب‌سازی/فیلتر/تنظیمات ستون) همیشه ~۱۴۰px
   جا می‌گرفتند و هر ستون را بی‌خود پهن می‌کردند. حالا از جریان چیدمان خارج
   (absolute) و فقط هنگام hover روی همان سرستون دیده می‌شوند → پهنای ستون =
   اندازه‌ی محتوای واقعی، بدون پرش چیدمان.

   ⚠️ ۲۰۲۶-۰۷-۲۱: این پنهان‌سازی باید فقط روی دستگاه ماوس‌دار باشد. روی گوشی و
   تبلت اصلاً hover وجود ندارد، پس مرتب‌سازی و فیلتر و منوی ستون‌ها هیچ‌وقت
   ظاهر نمی‌شدند و همه‌ی قابلیت‌های جدول عملاً فقط دسکتاپی بود. حالا روی لمسی
   دکمه‌ها در جریان عادی و همیشه دیده می‌شوند (ستون کمی پهن‌تر، ولی قابل استفاده). */
.mud-data-grid .column-header { position: relative !important; }
.mud-data-grid .column-options {
  background: #E3EEE7 !important; border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(15,42,28,.12) !important;
}
/* ⚠️ شرط با کلاسِ gta-touch است نه media query — روی لپ‌تاپِ صفحه‌لمسی (pointer:fine) رد
   می‌شد و دکمه‌های ستون همیشه پیدا بودند (باگِ ۱۱-۱۲ آگوست، همان خانواده‌ی باگِ ریل). */
html:not(.gta-touch) .mud-data-grid .column-options {
  position: absolute !important; inset-inline-end: 0 !important; top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .12s ease !important; z-index: 3 !important;
}
html:not(.gta-touch) .mud-data-grid th:hover .column-options,
html:not(.gta-touch) .mud-data-grid .column-options:focus-within { opacity: 1 !important; pointer-events: auto !important; }
.mud-data-grid .sortable-column-header { padding-inline-end: 4px !important; }

/* چیپ‌ها */
.mud-chip { border-radius: 999px !important; }

/* آیکون آماری در داشبورد (اگر استفاده شد) */
.mud-elevation-2 { box-shadow: var(--gta-shadow) !important; }

/* ===========================================================
   کلاس‌های سفارشی داشبورد (سازگاری با Index.razor قبلی)
   =========================================================== */
.gta-stat-card {
  background: rgba(255,255,255,.72); backdrop-filter: blur(12px);
  border-radius: var(--gta-radius); box-shadow: var(--gta-shadow), inset 0 1px 0 rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.85); padding: 22px 24px; height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.gta-stat-card:hover { box-shadow: var(--gta-shadow-h); transform: translateY(-2px); }
.gta-stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(23,92,57,.10); color: var(--gta-green); }
.gta-stat-value { font-size: 1.9rem; font-weight: 700; color: var(--gta-ink); line-height: 1.1; }
.gta-stat-label { font-size: .85rem; color: var(--gta-muted); margin-top: 2px; }
.gta-trend-up { color: var(--gta-green); font-weight: 600; }
.gta-trend-down { color: var(--gta-accent); font-weight: 600; }
.gta-section-title { font-size: 1.15rem; font-weight: 700; color: var(--gta-ink); }
.gta-section-sub { font-size: .85rem; color: var(--gta-muted); }

/* ===========================================================
   rail آیکونی دایره‌ای/مربع گوشه‌گرد شیشه‌ای جدا (عین دمو)
   روی MudDrawer در حالت Mini
   =========================================================== */
/* --- حالت بسته (فقط وقتی hover نشده): ریل پیل‌های آیکونی شیشه‌ای --- */
.mud-drawer-mini.mud-drawer--closed {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  width: 76px !important;
  top: 88px !important;                       /* از زیر کارت برند گوشه شروع شود */
  height: calc(100vh - 88px) !important;
}
.mud-drawer-mini.mud-drawer--closed .mud-navmenu { padding: 6px 0; background: transparent !important; }
.mud-drawer-mini.mud-drawer--closed .mud-nav-item { display: flex; justify-content: center; }
/* هر آیتم منو → یک مربع گوشه‌گرد شیشه‌ای شناور جدا (فقط بسته) */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link,
.mud-drawer-mini.mud-drawer--closed .mud-nav-group > .mud-nav-link {
  width: 48px !important; height: 48px !important;
  min-width: 48px !important; max-width: 48px !important;
  margin: 8px auto !important; padding: 0 !important;
  border-radius: 15px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 6px 18px rgba(15,42,28,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: .18s !important;
}
.mud-drawer-mini.mud-drawer--closed .mud-nav-link.active,
.mud-drawer-mini.mud-drawer--closed .mud-nav-link.mud-nav-link-active {
  background: linear-gradient(140deg,#2a7d52,#15583a) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 8px 20px rgba(23,92,57,.34) !important;
}
.mud-drawer-mini.mud-drawer--closed .mud-nav-link .mud-nav-link-icon { margin: 0 !important; color: inherit !important; }
.mud-drawer-mini.mud-drawer--closed .mud-nav-link.active .mud-icon-root { color: #fff !important; }
/* متن منو در حالت بسته مخفی (فقط آیکون) */
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-text,
.mud-drawer-mini.mud-drawer--closed .mud-nav-link-expand-icon,
.mud-drawer-mini.mud-drawer--closed .mud-list-subheader { display: none !important; }

/* --- حالت باز (hover یا کلیک همبرگر): کارت شیشه‌ای شناور گوشه‌گرد، از زیر نوار بالا --- */
.mud-drawer-mini.mud-drawer--open,
.mud-drawer-mini.mud-drawer--open {
  width: 258px !important;
  top: 88px !important;
  height: auto !important;                    /* به‌اندازه‌ی محتوا، نه کشیده تا ته (رفع فضای خالی عظیم) */
  max-height: calc(100vh - 104px) !important;
  inset-inline-start: 14px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.86) !important;
  backdrop-filter: blur(26px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 18px 44px rgba(15,42,28,.16), inset 0 1px 0 rgba(255,255,255,.9) !important;
  overflow-x: hidden !important; overflow-y: auto !important;
}
.mud-drawer-mini.mud-drawer--open .mud-nav-link,
.mud-drawer-mini.mud-drawer--open .mud-nav-link,
.mud-drawer-mini.mud-drawer--open .mud-nav-group > .mud-nav-link,
.mud-drawer-mini.mud-drawer--open .mud-nav-group > .mud-nav-link {
  width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important;
  margin: 2px 10px !important; padding: 10px 14px !important;
  justify-content: flex-start !important; border-radius: 12px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important;
}
.mud-drawer-mini.mud-drawer--open .mud-nav-link:hover,
.mud-drawer-mini.mud-drawer--open .mud-nav-link:hover { background: rgba(23,92,57,.08) !important; }
.mud-drawer-mini.mud-drawer--open .mud-nav-link.active,
.mud-drawer-mini.mud-drawer--open .mud-nav-link.active,
.mud-drawer-mini.mud-drawer--open .mud-nav-link.mud-nav-link-active,
.mud-drawer-mini.mud-drawer--open .mud-nav-link.mud-nav-link-active {
  background: linear-gradient(140deg,#2a7d52,#15583a) !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(23,92,57,.28) !important;
}
.mud-drawer-mini.mud-drawer--open .mud-nav-link.active .mud-icon-root,
.mud-drawer-mini.mud-drawer--open .mud-nav-link.active .mud-icon-root { color: #fff !important; }

/* ===========================================================
   کارت برند جدا (لوگو + نام) — مستطیل شیشه‌ای مستقل، گوشه‌ی بالا-راست
   =========================================================== */
.gta-brand-card {
  position: fixed; top: 14px; inset-inline-start: 18px;
  width: 226px; height: 62px; z-index: 1301;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 12px 34px rgba(15,42,28,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.gta-brand-card img { height: 40px; width: auto; display: block; }
.gta-brand-card b { font-weight: 800; font-size: 16px; letter-spacing: -.3px; color: var(--gta-ink); white-space: nowrap; }

/* ===========================================================
   منوی بالا: گزینه‌های بخش انتخاب‌شده در ریل راست + کرکره‌ی هاوری
   =========================================================== */
.gta-topnav { display: flex; align-items: center; gap: 4px; margin: 0 auto; height: 100%; }
/* برچسب نام بخش فعال (اول منو) */
.gta-top-cat {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--gta-green);
  background: rgba(23,92,57,.09); border: 1px solid rgba(23,92,57,.14);
  padding: 6px 13px; border-radius: 999px; margin-inline-end: 8px; white-space: nowrap;
}
.gta-top-cat .mud-icon-root { color: var(--gta-green) !important; font-size: 1.05rem !important; }
.gta-top-soon { font-size: 14px; font-weight: 600; color: var(--gta-muted); padding: 6px 10px; }
/* لینک‌های منوی بالا */
/* تبِ غیرفعال هم قابِ ملایمِ خودش را دارد، وگرنه مثل «متنِ ساده» دیده می‌شد و
   کاربر نمی‌فهمید کلیک‌کردنی است (۲۰۲۶-۰۸-۱۷). */
.gta-top-link {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 16px; border-radius: 12px;
  color: var(--gta-muted); text-decoration: none !important;
  font-size: 15.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: rgba(20,26,34,.04); border: 1px solid rgba(20,26,34,.08); transition: .18s;
}
.gta-top-link:hover { color: var(--gta-ink); background: rgba(20,26,34,.05); }
.gta-top-link.active {
  background: linear-gradient(140deg,#2a7d52,#15583a);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(23,92,57,.30);
}
.gta-top-link.active .mud-icon-root { color: #fff !important; }
.gta-top-caret .mud-icon-root, .gta-top-link .mud-icon-root { color: inherit !important; transition: transform .18s; }
/* گروه کرکره‌ای: هاور → پنل زیرش باز می‌شود (پل نامرئی تا منطقه‌ی مرده نباشد) */
.gta-top-grp { position: relative; height: 100%; display: flex; align-items: center; }
html:not(.gta-touch) .gta-top-grp:hover .gta-top-caret { transform: rotate(180deg); }
.gta-top-dd {
  position: absolute; top: calc(100% - 8px); inset-inline-start: 0;
  min-width: 214px; padding: 6px; padding-top: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 16px 40px rgba(15,42,28,.20);
  z-index: 1400;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
/* فقط موس‌دار — روی لمسی tap هاور را گیر می‌اندازد و کرکره باز می‌ماند */
html:not(.gta-touch) .gta-top-grp:hover .gta-top-dd { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
/* آیتم فعال داخل کرکره */
.gta-top-dd .gta-fly-item.active { background: rgba(23,92,57,.12); color: var(--gta-green); }
/* روی موبایل منوی افقی پنهان (drawer جایش را می‌گیرد) */
@media (max-width: 960px) {
  .gta-topnav { display: none; }
  .gta-brand-card { display: none; }
  .mud-appbar { inset-inline-start: 18px !important; }

  /* 📱 منوی کناری مثل اپ موبایل: از لبه راست با حرکت نرم می‌آید تو، پشتش پرده تیره.
     قبلا منوی بسته display:none بود و برای همین هیچ انیمیشنی اجرا نمی‌شد (یهو ظاهر/غیب).
     حالا منو همیشه رندر می‌ماند ولی با transform بیرون قاب صفحه پارک می‌شود، تا باز و
     بسته‌شدنش با translateX روان انیمیت شود (روی GPU، بدون تغییر width و بدون پرش چیدمان). */
  /* لنگر فیزیکی راست (نه inset-inline-*): محتوای منو RTL است ولی <html> همچنان ltr،
     پس خاصیت منطقی روی محور اشتباه می‌افتد و منو را به چپ می‌برد. با right/left فیزیکی
     منو همیشه چسبیده به لبه راست است و translateX مثبت آن را کامل بیرونِ راست پارک می‌کند. */
  .mud-drawer.mud-drawer-mini {
    display: block !important;
    right: 0 !important; left: auto !important;
    top: 0 !important; height: 100vh !important; height: 100dvh !important;
    /* قاعده‌ی دسکتاپِ «منوی باز» max-height: calc(100vh - 104px) دارد؛ روی گوشی همان سقف
       منو را ۱۰۴px کوتاه‌تر از صفحه می‌کرد و صفحه‌ی زیرش از پایین دیده می‌شد (تستِ WebKit/آیفون ۱۵ آگوست) */
    max-height: none !important;
    width: min(84vw, 360px) !important; max-width: 360px !important;
    border-radius: 22px 0 0 22px !important;
    box-shadow: -18px 0 55px rgba(15,42,28,.30) !important;
    overflow: hidden !important;
    z-index: 1401 !important;
    /* پس‌زمینه‌ی مات و بدون backdrop-filter: بلورِ شیشه‌ای روی پنلِ در حال حرکت، روی GPU موبایل
       هر فریم دوباره محاسبه می‌شود و اسلاید را زمخت/پرشی می‌کند. اینجا مات می‌کنیم تا کاملاً روان بلغزد. */
    background: #f5f8f6 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transform: translateX(105%);
    transition: transform .34s cubic-bezier(.22,.61,.36,1) !important;
    will-change: transform;
  }
  html.gta-dark .mud-drawer.mud-drawer-mini { background: #101613 !important; }
  .mud-drawer.mud-drawer-mini.mud-drawer--closed { transform: translateX(105%); pointer-events: none; }
  .mud-drawer.mud-drawer-mini.mud-drawer--open  { transform: translateX(0);     pointer-events: auto; }
  /* 📌 محتوای منو به «ارتفاع صفحه منهای نوار بالا» محدود شود تا خودش اسکرول شود (نه اینکه از
     قاب بیرون بزند و آیتم‌های پایین بریده/دست‌نیافتنی شوند). height:100% به‌خاطر زنجیره‌ی ارتفاع
     والدها نگرفت؛ این calc مستقیم به ارتفاع صفحه گره خورده و متغیر نوار بالای خود MudBlazor را
     می‌گیرد (top قاب هم دقیقاً همین است). overscroll هم جلوی سرایت اسکرول به صفحه‌ی زیر را می‌گیرد. */
  .mud-drawer.mud-drawer-mini .mud-drawer-content {
    max-height: 100vh !important; max-height: 100dvh !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    overscroll-behavior: contain;
  }
  /* کانتینر واقعیِ اسکرولِ صفحه خودِ html (document.scrollingElement) است — موقع باز بودن منو
     قفلش کن تا صفحه‌ی زیر (و لمس روی پرده) اصلاً تکان نخورد. */
  html:has(.mud-drawer-mini.mud-drawer--open),
  html:has(.mud-drawer-mini.mud-drawer--open) body { overflow: hidden !important; }

  /* منوی پارک‌شده بیرون قاب نباید اسکرول افقی بسازد (clip قاب می‌گیرد، بی‌آنکه اسکرول عمودی/جدول‌ها بشکند) */
  .mud-layout { overflow-x: clip; }

  .mud-main-content {
    margin-inline-start: 0 !important; margin-inline-end: 0 !important;
  }
}

/* پرده تیره پشت منوی موبایل: با فید نرم می‌آید و با لمسش منو بسته می‌شود */
.gta-drawer-scrim {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(10,20,15,.45);
  /* backdrop-filter عمداً نیست: بلور روی پرده هنگام فید، اسلاید را روی موبایل زمخت می‌کرد */
  opacity: 0; visibility: hidden;
  transition: opacity .34s ease, visibility .34s ease;
  /* کشیدن انگشت روی پرده، صفحه‌ی زیر را حرکت ندهد (لمس برای بستن هنوز کار می‌کند) */
  touch-action: none; overscroll-behavior: contain;
}
.gta-drawer-scrim.show { opacity: 1; visibility: visible; }
/* روی دسکتاپ اصلا پرده‌ای نیست (ناوبری با ریل و هاور است) */
@media (min-width: 961px) { .gta-drawer-scrim { display: none !important; } }
/* همبرگر فقط روی موبایل/تبلت؛ روی دسکتاپ ریل آیکونی راست + هاور کافی است (نیازی به باز کردن drawer نیست) */
@media (min-width: 961px) { .gta-burger-bar { display: none !important; } }
/* مربع ریل وقتی <a> است (داشبورد/محصولات): بدون زیرخط/رنگ لینک */
.gta-rail-sq, a.gta-rail-sq { text-decoration: none !important; }
a.gta-rail-sq, a.gta-rail-sq:visited { color: var(--gta-ink); }

/* ===========================================================
   پولیش منوی راست (drawer) — شیک و هماهنگ با تم شیشه‌ای
   =========================================================== */
/* --- کارت کاربر در حالت باز: کارت زمردی پرکار با گرادیان و حلقه --- */
.mud-drawer-mini.mud-drawer--open .mud-card,
.mud-drawer-mini.mud-drawer--open .mud-card {
  background: linear-gradient(135deg, #1f7a4b 0%, #0f4429 100%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 18px !important;
  margin: 14px 12px 10px !important;
  box-shadow: 0 10px 26px rgba(15,68,41,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
  overflow: hidden;
  position: relative;
}
/* درخشش ملایم گوشه (لوکس) */
.mud-drawer-mini.mud-drawer--open .mud-card::after,
.mud-drawer-mini.mud-drawer--open .mud-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120px 80px at 88% -10%, rgba(200,145,28,.30), transparent 60%);
}
.mud-drawer-mini.mud-drawer--open .mud-card .mud-card-header,
.mud-drawer-mini.mud-drawer--open .mud-card .mud-card-header { padding: 14px 16px !important; position: relative; z-index: 1; }
.mud-drawer-mini.mud-drawer--open .mud-card .mud-avatar,
.mud-drawer-mini.mud-drawer--open .mud-card .mud-avatar {
  border: 2.5px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.14) !important;
}
/* نام و کد کاربر سفید و خوانا روی کارت سبز */
.mud-drawer-mini.mud-drawer--open .mud-card .mud-typography,
.mud-drawer-mini.mud-drawer--open .mud-card .mud-typography { color: #fff !important; }
.mud-drawer-mini.mud-drawer--open .mud-card .mud-card-header-content .mud-typography:first-child,
.mud-drawer-mini.mud-drawer--open .mud-card .mud-card-header-content .mud-typography:first-child {
  font-weight: 800 !important; font-size: 1rem !important;
}
.mud-drawer-mini.mud-drawer--open .mud-card .mud-card-header-content .mud-typography:last-child,
.mud-drawer-mini.mud-drawer--open .mud-card .mud-card-header-content .mud-typography:last-child {
  color: rgba(255,255,255,.75) !important;
}
/* خط جداکننده‌ی ته کارت حذف (تمیزتر) */
.mud-drawer-mini.mud-drawer--open .mud-card .mud-divider,
.mud-drawer-mini.mud-drawer--open .mud-card .mud-divider { display: none !important; }

/* --- زیرعنوان (مثل «مدیر سیستم»): برچسب ظریف بزرگ‌نوشت --- */
.mud-drawer-mini.mud-drawer--open .mud-list-subheader,
.mud-drawer-mini.mud-drawer--open .mud-list-subheader {
  font-size: .68rem !important; letter-spacing: .09em !important; text-transform: uppercase !important;
  color: var(--gta-muted) !important; font-weight: 700 !important;
  padding: 14px 20px 4px !important; opacity: .8;
}

/* --- عنوان گروه‌های منو (مدیریت کاربران/تنظیمات/درباره) --- */
.mud-drawer-mini.mud-drawer--open .mud-nav-group .mud-nav-link,
.mud-drawer-mini.mud-drawer--open .mud-nav-group .mud-nav-link { font-weight: 600 !important; }
.mud-drawer-mini.mud-drawer--open .mud-nav-link .mud-icon-root,
.mud-drawer-mini.mud-drawer--open .mud-nav-link .mud-icon-root {
  color: var(--gta-green) !important; font-size: 1.3rem !important;
}
.mud-drawer-mini.mud-drawer--open .mud-nav-link.active .mud-icon-root,
.mud-drawer-mini.mud-drawer--open .mud-nav-link.active .mud-icon-root { color: #fff !important; }
/* زیرلینک‌های داخل گروه: کمی تورفته و ظریف */
.mud-drawer-mini.mud-drawer--open .mud-nav-group .mud-nav-item .mud-nav-link,
.mud-drawer-mini.mud-drawer--open .mud-nav-group .mud-nav-item .mud-nav-link {
  font-weight: 500 !important; font-size: 13.5px !important; padding-block: 8px !important;
}
/* فاصله‌ی منو از بالا کمتر، ته منو نرم */
.mud-drawer-mini.mud-drawer--open .mud-navmenu,
.mud-drawer-mini.mud-drawer--open .mud-navmenu { padding: 4px 4px 14px !important; }

/* --- حالت بسته (ریل آیکونی): کارت کاربر را پنهان کن تا ریل تمیز فقط-آیکون شود (عین دمو) --- */
.mud-drawer-mini.mud-drawer--closed .mud-card { display: none !important; }

/* ===========================================================
   ریل فلایوتی هاور خالص CSS: موس روی مربع → زیرمنوش کنارش
   (بدون MudMenu، بدون منطقه‌ی مرده، ناوبری تضمینی)
   =========================================================== */
.gta-rail-groups { display: flex; flex-direction: column; align-items: center; gap: 0; }

.gta-rail-grp { position: relative; }
/* هر بخش = یک کارت شیشه‌ای با آیکون در بالا و نام کوتاه بخش زیرش (مثل آیکون‌های گوشی) */
.gta-rail-sq {
  width: 62px; min-height: 44px; margin: 4px auto; cursor: pointer;
  border-radius: 15px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 3px 5px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(15,42,28,.08), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--gta-ink);
  transition: .18s;
}
/* نام زیر آیکون: کوچک، حداکثر دو خط، وسط‌چین */
.gta-rail-sq-label {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%; text-align: center;
  font-size: 9.5px; line-height: 1.12; font-weight: 700;
  color: inherit; letter-spacing: 0;
}
/* ⚠️ شرطِ «موس‌دار» با کلاسِ html.gta-touch است نه media query — توضیح در بلوکِ پایینِ فایل.
   (لپ‌تاپِ صفحه‌لمسیِ علیرضا در media query «لمسی» شمرده می‌شد و منو کلاً می‌مرد.) */
html:not(.gta-touch) .gta-rail-grp:hover .gta-rail-sq {
  transform: translateY(-2px); color: var(--gta-green);
  box-shadow: 0 10px 24px rgba(15,42,28,.13), inset 0 1px 0 rgba(255,255,255,.9);
}
.gta-rail-sq .mud-icon-root { color: inherit !important; }
.gta-rail-sq.active {
  background: linear-gradient(140deg,#2a7d52,#15583a);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 8px 20px rgba(23,92,57,.34);
  color: #fff;
}
.gta-rail-sq.active .mud-icon-root { color: #fff !important; }

/* پنجره‌ی فلایوت: چپ مربع، با padding-right پل تا «منطقه‌ی مرده» نباشد */
.gta-rail-flyout {
  position: absolute; top: 50%; right: 100%;
  transform: translateY(-50%);
  min-width: 214px;
  padding: 6px; padding-right: 16px;   /* پل هاور: جعبه تا خود آیکون می‌رسد */
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 16px 40px rgba(15,42,28,.20);
  z-index: 1400;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* بستن با ~۱۸۰ms تأخیر تا لغزشِ کوچکِ موس منو را نپراند؛ بازشدن (پایین‌تر) بی‌تأخیر است */
  transition: opacity .15s ease .18s, visibility .15s ease .18s;
}
/* فقط وقتی کاربر دارد با موس کار می‌کند (html.gta-touch نباشد) — روی لمسِ واقعی
   tap هاور را گیر می‌انداخت و فلایوت لبِ صفحه می‌ماند.
   :focus-within = ناوبری با کیبورد (Tab روی مربع‌ها، Enter برای رفتن، Tab داخلِ فلایوت). */
html:not(.gta-touch) .gta-rail-grp:hover .gta-rail-flyout,
.mud-drawer-mini.mud-drawer--closed .gta-rail-grp:focus-within .gta-rail-flyout {
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}
/* لمسی: تپِ اول روی مربع فلایوت را باز می‌کند (کلاسِ fly-open را JS در index.html می‌گذارد)،
   تپ روی آیتم می‌رود، تپِ بیرون می‌بندد. بدونِ این، کاربرِ انگشتی به زیرمنو راه نداشت. */
html.gta-touch .mud-drawer-mini.mud-drawer--closed .gta-rail-grp.fly-open .gta-rail-flyout {
  display: block !important;
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}
/* حلقه‌ی فوکوسِ مرئی برای کیبورد (فقط focus-visible تا با کلیکِ موس حلقه نیاید) */
.gta-rail-sq:focus-visible {
  outline: 2px solid var(--gta-green); outline-offset: 2px;
}

.gta-flyout-h {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gta-muted); font-weight: 800;
  padding: 6px 12px 8px; border-bottom: 1px solid rgba(15,42,28,.07); margin-bottom: 4px;
}
/* ردیفِ «اخیراً» بالای فلایوت: میان‌بُر به صفحه‌هایی از همین بخش که تازه رفته‌ای */
.gta-fly-recent {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px 8px; margin-bottom: 4px;
  border-bottom: 1px dashed rgba(15,42,28,.10);
}
.gta-fly-recent-tag {
  font-size: .62rem; font-weight: 800; color: var(--gta-gold);
  letter-spacing: .05em; flex: 0 0 auto;
}
.gta-fly-recent a {
  font-size: 12px; font-weight: 700; color: var(--gta-green);
  text-decoration: none; padding: 3px 9px; border-radius: 999px;
  background: rgba(23,92,57,.08); transition: .15s;
}
.gta-fly-recent a:hover { background: rgba(23,92,57,.16); }
html.gta-dark .gta-fly-recent { border-bottom-color: rgba(255,255,255,.10); }
html.gta-dark .gta-fly-recent a { background: rgba(63,166,113,.16); color: #7fd0a5; }
.gta-fly-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 2px 0; border-radius: 11px;
  color: var(--gta-ink); text-decoration: none;
  font-weight: 600; font-size: 13.7px;
  transition: .15s; cursor: pointer;
}
.gta-fly-item:hover { background: rgba(23,92,57,.09); color: var(--gta-green); }
.gta-fly-item .mud-icon-root { color: var(--gta-green) !important; font-size: 1.15rem; }
/* بخش بدون صفحه: پیام «به‌زودی» داخل فلایوت */
.gta-fly-soon {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; color: var(--gta-muted);
  font-weight: 600; font-size: 13.2px; cursor: default;
}
.gta-fly-soon .mud-icon-root { color: var(--gta-muted) !important; font-size: 1.1rem; }

/* آیتم نقشه‌ی راه (planned): کم‌رنگ، غیرکلیک‌پذیر، با برچسب «به‌زودی» */
.gta-fly-planned { opacity: .5; cursor: default !important; }
.gta-fly-planned:hover { background: transparent !important; color: var(--gta-ink) !important; }
.gta-fly-planned .mud-icon-root { color: var(--gta-muted) !important; }
.gta-planned-tag {
  margin-inline-start: auto; flex: 0 0 auto;
  font-size: .64rem; font-weight: 800; color: var(--gta-gold);
  background: rgba(200,145,28,.13); border: 1px solid rgba(200,145,28,.28);
  padding: 1px 7px; border-radius: 999px;
}
.gta-top-planned { opacity: .5; cursor: default !important; gap: 7px; }
.gta-top-planned:hover { background: transparent !important; color: var(--gta-muted) !important; }

/* badge عددی روی مربع ریل (مثلاً فاکتورهای امروز) */
/* نشانِ عددی باید *بیرونِ* گوشه‌ی مربع بنشیند؛ با top:-4px روی خودِ آیکن می‌افتاد
   و عدد و آیکن هر دو ناخوانا می‌شدند (نقدِ چشمیِ علیرضا ۲۰۲۶-۰۸-۱۱). */
/* ⚠️ ۲۰۲۶-۰۸-۱۷: با -8px نشان کاملاً بیرونِ کادر می‌افتاد و بینِ دو آیکون شناور
   به‌نظر می‌رسید (معلوم نبود مالِ کدام است). حالا روی گوشه‌ی خودِ کادر می‌نشیند. */
.gta-rail-badge {
  position: absolute; top: 2px; inset-inline-end: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; line-height: 1;
  color: #fff; background: linear-gradient(140deg,#d8a127,#a8760f);
  border: 1.5px solid rgba(255,255,255,.9); border-radius: 999px;
  box-shadow: 0 3px 8px rgba(140,95,10,.35);
  pointer-events: none; z-index: 2;
}
.gta-rail-sq { position: relative; }
/* در حالت باز drawer (لیست لیبل‌دار) badge کنار متن بنشیند نه گوشه‌ی شناور */
.mud-drawer-mini.mud-drawer--open .gta-rail-badge {
  position: static; margin-inline-start: auto;
}

/* مانیتور کوتاه: ریل خودکار فشرده‌تر تا همه‌ی بخش‌ها بدون اسکرول جا شوند (نام حفظ می‌شود) */
@media (max-height: 820px) {
  .gta-rail-sq { width: 58px; min-height: 40px; margin: 3px auto; border-radius: 13px; padding: 4px 3px 4px; gap: 1px; }
  .gta-rail-sq .mud-icon-root { font-size: 1.2rem !important; }
  .gta-rail-sq-label { font-size: 9px; }
}
@media (max-height: 700px) {
  .gta-rail-sq { width: 54px; min-height: 34px; margin: 2px auto; border-radius: 11px; padding: 3px 2px 3px; }
  .gta-rail-sq .mud-icon-root { font-size: 1.05rem !important; }
  .gta-rail-sq-label { font-size: 8.5px; -webkit-line-clamp: 2; }
  .gta-rail-badge { min-width: 16px; height: 16px; font-size: .6rem; }
}

/* ریل باید بگذارد فلایوت بیرون ۷۶px نمایش داده شود (نه clip) */
.mud-drawer-mini.mud-drawer--closed,
.mud-drawer-mini.mud-drawer--closed .mud-drawer-content,
.mud-drawer-mini.mud-drawer--closed .mud-navmenu { overflow: visible !important; }

/* هنگام هاور یک گروه: نوار بالا + محتوا مات شوند (ریل و فلایوت شفاف/برجسته).
   فقط وقتی کاربر با موس کار می‌کند — روی لمسِ واقعی tap حالتِ hover را گیر می‌انداخت. */
html:not(.gta-touch) body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-appbar,
html:not(.gta-touch) body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-main-content {
  /* ۳px به‌جای ۵px (انتخابِ ۱۲ آگوست): چشم کمتر خسته می‌شود و رندرِ blur هم سبک‌تر است؛
     brightness جزئی عمقِ ازدست‌رفته‌ی ۲px را جبران می‌کند. */
  filter: blur(3px) brightness(.94);
  transition: filter .2s ease;
}
/* ولی وقتی منو (drawer) باز است، مات‌کردن محتوا را خنثی کن (فلایوت داخل پنل است نه شناور) */
body:has(.mud-drawer-mini.mud-drawer--open) .mud-appbar,
body:has(.mud-drawer-mini.mud-drawer--open) .mud-main-content { filter: none !important; }

/* ===========================================================
   حالت باز (drawer): گروه «مدیریت کاربران» به‌صورت منوی کامل لیبل‌دار
   با زیرلینک‌های همیشه‌باز (نه آیکون تنهای هاوری) — منوی تمیز و خوانا
   =========================================================== */
.mud-drawer-mini.mud-drawer--open .gta-rail-groups { align-items: stretch; width: 100%; padding: 8px 8px 10px; }
.mud-drawer-mini.mud-drawer--open .gta-rail-grp { width: 100%; position: static; }
/* سرگروه «مدیریت کاربران» = عنوان ظریف گروه (نه دکمه‌ی کلیک‌پذیر هم‌وزن آیتم‌ها) */
.mud-drawer-mini.mud-drawer--open .gta-rail-sq {
  width: 100% !important; max-width: none !important; height: auto !important;
  flex-direction: row !important; min-height: 0 !important;
  margin: 2px 0 0 !important; justify-content: flex-start !important; gap: 8px;
  padding: 8px 12px 4px !important; border-radius: 10px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; cursor: default;
}
.mud-drawer-mini.mud-drawer--open .gta-rail-sq:hover { transform: none !important; background: transparent !important; }
.mud-drawer-mini.mud-drawer--open .gta-rail-sq-label {
  display: inline; -webkit-line-clamp: unset; overflow: visible; text-align: start;
  font-weight: 800; font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gta-muted);
}
.mud-drawer-mini.mud-drawer--open .gta-rail-sq .mud-icon-root { color: var(--gta-muted) !important; font-size: 1.05rem !important; }
.mud-drawer-mini.mud-drawer--open .gta-rail-sq.active { background: transparent !important; }
.mud-drawer-mini.mud-drawer--open .gta-rail-sq.active .gta-rail-sq-label,
.mud-drawer-mini.mud-drawer--open .gta-rail-sq.active .mud-icon-root { color: var(--gta-green) !important; }
/* زیرلینک‌ها: تورفته + خط راهنمای عمودی سمت راست تا سلسله‌مراتب واضح باشد */
.mud-drawer-mini.mud-drawer--open .gta-rail-flyout {
  position: static !important; opacity: 1 !important; visibility: visible !important;
  pointer-events: auto !important; transform: none !important; min-width: 0 !important;
  box-shadow: none !important; background: transparent !important;
  margin-inline-start: 18px !important; padding: 2px 8px 2px 0 !important;
  border: 0 !important; border-inline-start: 2px solid rgba(23,92,57,.14) !important;
}
.mud-drawer-mini.mud-drawer--open .gta-flyout-h { display: none !important; }
.mud-drawer-mini.mud-drawer--open .gta-fly-item { padding: 8px 10px; margin-inline-start: 0; font-size: 13.7px; border-radius: 9px; }

/* ===========================================================
   📱 منوی باز موبایل = آکاردئون (۲۰۲۶-۰۷-۲۱)
   قبلاً همه‌ی بخش‌ها با همه‌ی زیرمجموعه‌هایشان باز بودند و فهرست بی‌انتها می‌شد.
   حالا اول فقط بخش‌ها دیده می‌شوند؛ با کلیک روی هر بخش (کلاس open از _Sidebar)
   زیرمجموعه‌هایش باز می‌شود. ریل دسکتاپ (drawer بسته + هاور) دست‌نخورده است.
   =========================================================== */
.mud-drawer-mini.mud-drawer--open .gta-rail-flyout { display: none !important; }
.mud-drawer-mini.mud-drawer--open .gta-rail-grp.open .gta-rail-flyout { display: block !important; }
/* سر بخش حالا دکمه است، نه عنوان تزئینی: هدف لمسی درست‌تر + فلش باز/بسته */
.mud-drawer-mini.mud-drawer--open .gta-rail-sq {
  cursor: pointer !important; position: relative;
  padding: 11px 12px 11px 34px !important; margin: 1px 0 !important;
}
/* فلش با خاصیت فیزیکی (left/border-right) نوشته شده، نه منطقی:
   محتوای drawer از MudRTLProvider راست‌چین می‌شود ولی <html> همچنان ltr است،
   پس inset-inline-start/border-inline-end روی محور اشتباه می‌افتادند و فلش دیده نمی‌شد. */
.mud-drawer-mini.mud-drawer--open .gta-rail-sq::after {
  content: ''; position: absolute; left: 14px; top: 50%; margin-top: -6px;
  width: 7px; height: 7px; border-right: 2px solid var(--gta-muted);
  border-bottom: 2px solid var(--gta-muted); transform: rotate(45deg);
  transition: transform .18s ease, border-color .18s ease;
}
/* بخش لینک خارجی (بارکد/نقره خام) زیرمجموعه ندارد → فلش باز/بسته هم ندارد */
.mud-drawer-mini.mud-drawer--open a.gta-rail-sq::after,
.mud-drawer-mini.mud-drawer--open .gta-rail-sq.no-sub::after { display: none; }
.mud-drawer-mini.mud-drawer--open .gta-rail-grp.open .gta-rail-sq::after {
  transform: rotate(-135deg); margin-top: -1px; border-color: var(--mud-palette-primary);
}
.mud-drawer-mini.mud-drawer--open .gta-rail-grp.open .gta-rail-sq {
  background: rgba(23,92,57,.06) !important; border-radius: 10px !important;
}
.mud-drawer-mini.mud-drawer--open .gta-rail-grp.open .gta-rail-sq-label,
.mud-drawer-mini.mud-drawer--open .gta-rail-grp.open .gta-rail-sq .mud-icon-root { color: var(--mud-palette-primary) !important; }
html.gta-dark .mud-drawer-mini.mud-drawer--open .gta-rail-grp.open .gta-rail-sq { background: rgba(63,166,113,.14) !important; }

/* ===========================================================
   📱 هدر منوی موبایل: لوگوی کوچک شرکت (نشانِ گرد سفید) + نام کاربر، سمت راست و مرتب.
   منو از بالای صفحه شروع می‌شود، پس هدر بالاترین چیزِ منوست. پیش‌فرض مخفی؛
   فقط روی موبایل و وقتی منو باز است دیده می‌شود.
   =========================================================== */
.gta-appmenu-head { display: none; }
@media (max-width: 960px) {
  .mud-drawer-mini.mud-drawer--open .gta-appmenu-head {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
    position: relative; overflow: hidden;
    margin: 0 0 8px;
    padding: 16px 16px 16px; padding-top: max(16px, env(safe-area-inset-top));
    background: linear-gradient(150deg, #1f7a4b 0%, #0f4429 100%);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 22px rgba(15,68,41,.26);
  }
  /* نشانِ گرد سفید که لوگوی شرکت را واضح روی هدر سبز نشان می‌دهد.
     اندازه با width+height ثابت و object-fit:contain قفل است تا هیچ‌وقت بزرگ نشود. */
  .gta-appmenu-logo {
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.22);
  }
  .gta-appmenu-logo img { width: 34px; height: 34px; object-fit: contain; display: block; }
  /* نام کاربر: کنار لوگو و سمت راست (نه وسط)، سفید و خوانا */
  .gta-appmenu-name {
    flex: 1 1 auto; min-width: 0;
    color: #fff; font-weight: 800; font-size: 16px; text-align: start;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* لیست تخت و تمیز: خط‌جداکننده‌ی نازک بین بخش‌ها */
  .mud-drawer-mini.mud-drawer--open .gta-rail-grp:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.06); }
  html.gta-dark .mud-drawer-mini.mud-drawer--open .gta-rail-grp:not(:last-child) { border-bottom-color: rgba(255,255,255,.07); }
}

/* ریل بالای نوار بالا تا فلایوت رویش بیفتد نه پشتش (فقط موس‌دار) */
html:not(.gta-touch) body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-drawer { z-index: 1402 !important; }

/* ===========================================================
   نوار فراست بالای صفحه — محتوایی که موقع اسکرول به بالای نوار/گپ بالای آن
   می‌رسد مات شود تا با محتوای نوار بالا قاطی نشود (نوار خودش z=1300 رویش می‌نشیند)
   =========================================================== */
.mud-layout::before {
  content: "";
  position: fixed;
  top: 0; inset-inline: 0;
  height: 90px;
  z-index: 1299;
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  pointer-events: none;
}

/* ===========================================================
   صفحه‌ی «دسترسی کاربران» — کارت + ردیف‌های سوییچی تلگرام‌وار
   =========================================================== */
.gta-access-card {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(15,42,28,.10), inset 0 1px 0 rgba(255,255,255,.9);
  padding: 20px 22px 22px; max-width: 580px; margin: 0 auto;
}
.gta-access-head { display:flex; align-items:center; gap:13px; margin-bottom:8px; }
.gta-access-ic { width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#2a7d52,#15583a); box-shadow:0 8px 18px rgba(23,92,57,.30); }
.gta-access-ic .mud-icon-root{ color:#fff!important; }
.gta-access-title{ font-weight:800; font-size:1.18rem; color:var(--gta-ink); }
.gta-access-sub{ font-size:.82rem; color:var(--gta-muted); }

.gta-access-user{ display:flex; align-items:center; gap:13px; margin:16px 0 8px; padding:13px 15px;
  background:linear-gradient(135deg,#1f7a4b 0%,#0f4429 100%); border-radius:16px; color:#fff;
  box-shadow:0 10px 24px rgba(15,68,41,.28), inset 0 1px 0 rgba(255,255,255,.18); position:relative; overflow:hidden; }
.gta-access-user::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120px 80px at 92% -10%, rgba(200,145,28,.30), transparent 60%); }
.gta-access-user .mud-avatar{ border:2.5px solid rgba(255,255,255,.9); background:rgba(255,255,255,.14)!important; z-index:1; }
.gta-access-uinfo{ display:flex; flex-direction:column; z-index:1; }
.gta-access-uinfo b{ font-weight:800; font-size:1.02rem; color:#fff; }
.gta-access-uinfo span{ font-size:.8rem; opacity:.82; color:#fff; }
.gta-access-user .mud-icon-button .mud-icon-root{ color:#fff !important; }

.gta-access-grp{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gta-muted);
  font-weight:800; margin:18px 4px 4px; }
.gta-sw-row{ display:flex; align-items:center; justify-content:space-between;
  padding:7px 6px 7px 2px; border-bottom:1px solid rgba(15,42,28,.06); border-radius:12px; }
.gta-sw-row:last-of-type{ border-bottom:0; }
.gta-sw-row:hover { background: rgba(23,92,57,.05); }
.gta-sw-label{ font-weight:600; font-size:.96rem; color:var(--gta-ink); }

.gta-access-note{ display:flex; align-items:flex-start; gap:8px; margin-top:14px; padding:11px 13px;
  background:rgba(23,92,57,.06); border:1px solid rgba(23,92,57,.12); border-radius:13px;
  font-size:.82rem; color:var(--gta-muted); line-height:1.75; }
.gta-access-note .mud-icon-root{ color:var(--gta-green)!important; margin-top:1px; flex:0 0 auto; }
.gta-access-note-custom{ background:rgba(200,145,28,.09); border-color:rgba(200,145,28,.24); }
.gta-access-note-custom .mud-icon-root{ color:var(--gta-gold)!important; }

.gta-access-actions{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.gta-access-empty{ display:flex; flex-direction:column; align-items:center; gap:11px; padding:34px 10px; color:var(--gta-muted); }
.gta-access-empty .mud-icon-root{ color:var(--gta-green)!important; opacity:.5; }

/* ===========================================================
   چیدمان دو-ستونه‌ی صفحه‌ی دسترسی کاربران (راست=کاربر/نقش، چپ=دسترسی‌ها)
   تا همه‌چی در یک نگاه و بدون اسکرول جا شود
   =========================================================== */
.gta-access-head { max-width: 1000px; margin: 0 auto 16px; }
.gta-access-grid { display: flex; gap: 18px; align-items: flex-start; justify-content: center; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; }
.gta-access-grid .gta-access-card { max-width: none !important; margin: 0 !important; }
.gta-access-side { flex: 0 0 340px; }
.gta-access-main { flex: 1 1 400px; }
.gta-access-main .gta-access-grp:first-child { margin-top: 2px; }
.gta-access-side .gta-access-empty { padding: 26px 6px 10px; }
@media (max-width: 860px) {
  .gta-access-side { flex-basis: 100%; }
  .gta-access-main { flex-basis: 100%; }
}

/* ===========================================================
   ماندالای پس‌زمینه‌ی صفحات (مثل لاگین، ولی ملایم‌تر) — پشت همه‌چیز
   روی pseudoهای html با z-index:-1 تا زیر محتوا بماند و opacity قابل‌تنظیم باشد
   =========================================================== */
html::before, html::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  background: url('img/mandala.webp') no-repeat; background-size: contain;
  filter: saturate(1.25); opacity: .16;
}
/* بزرگ، گوشه‌ی پایین-چپ (فقط ربعش دیده شود) */
html::before { width: min(720px,64vw); height: min(720px,64vw); left: min(-290px,-19vw); bottom: min(-290px,-19vw); }
/* کوچیک‌تر، گوشه‌ی بالا-راست (متوازن) */
html::after { width: min(430px,40vw); height: min(430px,40vw); right: min(-175px,-12vw); top: min(-140px,-10vw); }

/* ===========================================================
   صفحه‌ی دسترسی کاربران — پولیش نسخه‌ی نهایی (سرچ/آواتار/آیکون سوییچ/دکمه‌ها)
   =========================================================== */
/* گزینه‌های autocomplete کاربر */
.gta-uopt { display:flex; align-items:center; gap:11px; padding:3px 0; }
.gta-uopt-av { width:34px; height:34px; border-radius:50%; flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1f7a4b,#0f4429); color:#fff; font-weight:800; font-size:.78rem; }
.gta-uopt-av img { width:100%; height:100%; object-fit:cover; }
.gta-uopt-name { font-weight:700; font-size:.92rem; color:var(--gta-ink); }
.gta-uopt-meta { font-size:.74rem; color:var(--gta-muted); }

/* آواتار کارت کاربر (عکس یا حروف اول) */
.gta-access-av { width:54px; height:54px; border-radius:50%; overflow:hidden; flex:0 0 auto; z-index:1;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid rgba(255,255,255,.9); background:rgba(255,255,255,.16);
  color:#fff; font-weight:800; font-size:1.1rem; box-shadow:0 4px 14px rgba(0,0,0,.22); }
.gta-access-av img { width:100%; height:100%; object-fit:cover; }

/* سرعنوان گروه + دکمه‌های همه‌روشن/خاموش */
.gta-access-grphead { display:flex; align-items:center; justify-content:space-between; margin:6px 4px 4px; }
.gta-access-grphead .gta-access-grp { margin:0; }
.gta-access-allbtns { display:flex; align-items:center; gap:4px; }
.gta-mini-btn { background:none; border:0; cursor:pointer; font:inherit; font-size:.74rem; font-weight:700;
  color:var(--gta-green); padding:3px 6px; border-radius:8px; transition:.15s; }
.gta-mini-btn:hover { background:rgba(23,92,57,.10); }
.gta-mini-sep { color:var(--gta-line); font-size:.7rem; }

/* ردیف سوییچ با آیکون */
.gta-sw-l { display:flex; align-items:center; gap:11px; }
.gta-sw-ic { width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:rgba(23,92,57,.09); }
.gta-sw-ic .mud-icon-root { color:var(--gta-green) !important; font-size:1.15rem; }
.gta-sw-row { padding:8px 4px 8px 2px; }

/* نشانگر تغییر ذخیره‌نشده */
.gta-dirty { font-size:.76rem; font-weight:700; color:var(--gta-gold);
  background:rgba(200,145,28,.10); border:1px solid rgba(200,145,28,.25);
  padding:4px 9px; border-radius:999px; margin-inline-end:4px; }

/* ===========================================================
   ساختار درختی دسترسی‌ها (والد «مدیریت کاربران» → باز شدن → زیرمجموعه‌ها)
   =========================================================== */
.gta-tree { border:1px solid rgba(15,42,28,.08); border-radius:14px; margin-top:10px; overflow:hidden;
  background:rgba(255,255,255,.4); transition:.2s; }
.gta-tree.open { background:rgba(23,92,57,.05); border-color:rgba(23,92,57,.16); }
/* سر والد */
.gta-tree-phead { display:flex; align-items:center; gap:11px; padding:10px 12px; cursor:pointer; user-select:none; }
.gta-tree-phead:hover { background:rgba(23,92,57,.05); }
.gta-tree-chev { display:flex; transition:transform .2s; color:var(--gta-muted); }
.gta-tree.open .gta-tree-chev { transform:rotate(-90deg); }
.gta-tree-chev .mud-icon-root { color:var(--gta-muted) !important; }
.gta-tree-pic { background:rgba(23,92,57,.12) !important; }
.gta-tree-plabel { font-weight:800 !important; font-size:1rem !important; flex:1; }
.gta-tree-count { font-size:.74rem; font-weight:700; color:var(--gta-muted);
  background:rgba(15,42,28,.06); padding:2px 8px; border-radius:999px; margin-inline-end:6px; }
/* زیرمجموعه‌ها (تورفته، با خط راهنما) */
.gta-tree-children { padding:2px 10px 8px; }
.gta-tree-child { padding:7px 6px 7px 2px !important; margin-inline-start:18px;
  border-bottom:1px solid rgba(15,42,28,.05); }
.gta-tree-child:last-child { border-bottom:0; }
.gta-tree-child .gta-sw-ic { width:30px; height:30px; }
.gta-tree-child .gta-sw-label { font-weight:600; font-size:.92rem; }

/* ===========================================================
   فونت بزرگ‌تر و خواناتر (علیرضا: «فونت‌ها خیلی ریزن») + ردیف‌های بلندتر جدول
   =========================================================== */
/* ارتفاع سطر کم‌تر و جمع‌وجور (علیرضا: «ارتفاع سطرها زیاده»)؛ فونت بزرگ می‌ماند.
   padding افقی کم‌تر هم ستون‌ها را باریک‌تر می‌کند. */
.mud-table-body .mud-table-cell { font-size: 1rem !important; padding-top: 7px !important; padding-bottom: 7px !important; padding-inline: 18px !important; }
.mud-table-head .mud-table-cell { font-size: .92rem !important; padding-top: 8px !important; padding-bottom: 8px !important; padding-inline: 18px !important; }
.mud-input-root, .mud-input-slot, input.mud-input-root, .mud-select-input { font-size: 1rem !important; }
.mud-input-label, .mud-form-control label { font-size: .95rem !important; }
.mud-typography-body1 { font-size: 1rem !important; }
.mud-typography-body2 { font-size: .92rem !important; }
.gta-fly-item { font-size: 15px !important; }
.gta-topnav .mud-nav-link { font-size: 15.5px !important; }
.gta-sw-label { font-size: 1rem !important; }
.gta-uopt-name { font-size: .98rem !important; }
.mud-button-root { font-size: .95rem !important; }

/* ===========================================================
   استفاده از کل ارتفاع صفحه: کارت جدول‌دار تا ته صفحه کشیده شود
   (فقط کارت‌هایی که MudTable دارند؛ داشبورد/کارت‌های آماری دست‌نخورده)
   =========================================================== */
.mud-card:has(.mud-table) {
  min-height: calc(100vh - 210px) !important;
  display: flex !important; flex-direction: column !important;
}
.mud-card:has(.mud-table) .mud-card-actions {
  flex: 1 1 auto !important; display: flex !important; flex-direction: column !important;
  align-items: stretch !important; padding: 6px 12px 12px !important;
}
.mud-card:has(.mud-table) .mud-table { flex: 1 1 auto !important; display: flex; flex-direction: column; background: transparent !important; box-shadow: none !important; border: 0 !important; }
.mud-card:has(.mud-table) .mud-table-container { flex: 1 1 auto !important; max-height: none !important; }

/* دونات CSS «ترکیب فروش» داشبورد (جایگزین MudChart Donut که رندر نمی‌شد) */
.gd-donut-wrap { display:flex; align-items:center; justify-content:center; gap:26px; margin-top:18px; flex-wrap:wrap; }
.gd-donut { width:172px; height:172px; border-radius:50%; position:relative; box-shadow:0 10px 24px rgba(15,42,28,.15); }
.gd-donut-hole { position:absolute; inset:31%; background:rgba(255,255,255,.94); border-radius:50%;
  box-shadow:inset 0 1px 4px rgba(15,42,28,.08); }
.gd-legend { display:flex; flex-direction:column; gap:11px; font-size:.95rem; color:var(--gta-ink); font-weight:600; }
.gd-legend > div { display:flex; align-items:center; gap:10px; }
.gd-legend span { width:14px; height:14px; border-radius:5px; display:inline-block; flex:0 0 auto; }

/* لاگ ورود/خروج در دیالوگ جزئیات کاربر */
.gta-log-list { display:flex; flex-direction:column; gap:8px; }
.gta-log-row { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px;
  background:rgba(255,255,255,.55); border:1px solid rgba(15,42,28,.06); }
.gta-log-ic { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.gta-log-ic.in { background:rgba(23,92,57,.12); }
.gta-log-ic.in .mud-icon-root { color:var(--gta-green) !important; }
.gta-log-ic.out { background:rgba(194,96,106,.14); }
.gta-log-ic.out .mud-icon-root { color:#C2606A !important; }
.gta-log-label { font-weight:700; color:var(--gta-ink); min-width:42px; }
.gta-log-date { margin-inline-start:auto; font-size:.88rem; color:var(--gta-muted); font-weight:600; direction:ltr; }

/* کاربر غیرفعال: ردیف کم‌رنگ + برچسب «غیرفعال» */
.mud-table-body .mud-table-row.gta-row-inactive .mud-table-cell { opacity: .5; }
.gta-inactive-tag { display:inline-block; margin-inline-start:8px; font-size:.7rem; font-weight:800;
  color:#C2606A; background:rgba(194,96,106,.13); border:1px solid rgba(194,96,106,.3);
  padding:1px 8px; border-radius:999px; vertical-align:middle; }

/* دکمه‌های عملیات جدول همه در یک ردیف (نه شکستن به خط بعد).
   ⚠️ display:flex فقط وقتی که آخرین ستون واقعاً ستون «عملیات» است (دکمه دارد).
   اگر آخرین ستون داده‌ی معمولی باشد (مثل «کد ملی» در جدول مشتریان)، flex
   سلول را از حالت table-cell خارج کرده و striping/پس‌زمینه را می‌شکست. */
.mud-table-body .mud-table-cell:last-child,
.mud-table-head .mud-table-cell:last-child { white-space: nowrap !important; }
.mud-table-body .mud-table-cell:last-child:has(.mud-button-root, .mud-icon-button, button) {
  display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 2px;
}
.mud-table-cell:last-child .mud-icon-button { padding: 6px !important; }
.mud-table-cell:last-child .mud-icon-button .mud-icon-root { font-size: 1.2rem; }

/* تولتیپ (متن راهنمای دکمه‌ها): پس‌زمینه‌ی تیره + متن سفید (قبلاً سفید روی سفید=نامرئی) */
.mud-tooltip,
.mud-popover.mud-tooltip,
.mud-tooltip-root .mud-tooltip {
  background: rgba(20,26,34,.94) !important;
  color: #fff !important;
  font-size: .82rem !important; font-weight: 600 !important;
  padding: 6px 11px !important; border-radius: 9px !important;
  box-shadow: 0 8px 22px rgba(15,42,28,.22) !important;
}
.mud-tooltip * { color: #fff !important; }
.mud-tooltip-arrow:before { background-color: rgba(20,26,34,.94) !important; }

/* کارت باز-شونده (GtaExpandCard) — الگوی عمومی: خلاصه همیشه دیده می‌شود، فلش کارت را کامل باز می‌کند.
   هر کارت با accent رنگی خودش (نوار کناری + پس‌زمینه‌ی هدر + آیکون) از بقیه جدا و قابل‌تشخیص است. */
.gta-xcard { border-radius: 16px !important; margin-bottom: 16px; overflow: hidden;
  border-width: 1px !important; box-shadow: 0 2px 10px rgba(15,42,28,.05); position: relative;
  border-inline-start-width: 4px !important; }
.gta-xcard:last-child { margin-bottom: 0; }
.gta-xcard-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer;
  user-select: none; }
.gta-xcard-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; }
.gta-xcard-ic .mud-icon-root { color: #fff !important; }
.gta-xcard-titles { display: flex; flex-direction: column; min-width: 0; }
.gta-xcard-title { font-weight: 800; font-size: 1rem; color: var(--gta-ink); }
.gta-xcard-subtitle { font-size: .8rem; color: var(--gta-muted); }
.gta-xcard-actions { display: flex; align-items: center; gap: 4px; }
.gta-xcard-arrow { margin-inline-start: auto; flex: 0 0 auto; }
.gta-xcard-summary { padding: 0 16px 14px 16px; }
.gta-xcard-body { padding: 14px 16px 18px 16px; }

/* انیمیشن نرم بازشدن/بسته‌شدن بدنه‌ی کارت (به‌جای ظاهر/محو یهویی) */
.gta-xcard-collapse { max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease; }
.gta-xcard-collapse--open { max-height: 2400px; opacity: 1;
  transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .32s ease .04s; }
.gta-xcard-arrow .mud-icon-root { transition: transform .22s ease; }

/* رنگ‌بندی هر accent: نوار کناری + پس‌زمینه‌ی هدر + گرادیان آیکون */
.gta-xcard--green { border-color: rgba(31,122,75,.35) !important; border-inline-start-color: #1f7a4b !important; }
.gta-xcard--green .gta-xcard-head { background: rgba(31,122,75,.06); }
.gta-xcard--green .gta-xcard-head:hover { background: rgba(31,122,75,.11); }
.gta-xcard--green .gta-xcard-ic { background: linear-gradient(135deg,#1f7a4b,#0f4429); }

.gta-xcard--blue { border-color: rgba(41,98,166,.35) !important; border-inline-start-color: #2962A6 !important; }
.gta-xcard--blue .gta-xcard-head { background: rgba(41,98,166,.06); }
.gta-xcard--blue .gta-xcard-head:hover { background: rgba(41,98,166,.11); }
.gta-xcard--blue .gta-xcard-ic { background: linear-gradient(135deg,#2962A6,#173e66); }

.gta-xcard--purple { border-color: rgba(122,60,153,.35) !important; border-inline-start-color: #7A3C99 !important; }
.gta-xcard--purple .gta-xcard-head { background: rgba(122,60,153,.06); }
.gta-xcard--purple .gta-xcard-head:hover { background: rgba(122,60,153,.11); }
.gta-xcard--purple .gta-xcard-ic { background: linear-gradient(135deg,#7A3C99,#4a2160); }

.gta-xcard--gold { border-color: rgba(200,145,28,.35) !important; border-inline-start-color: #C8911C !important; }
.gta-xcard--gold .gta-xcard-head { background: rgba(200,145,28,.08); }
.gta-xcard--gold .gta-xcard-head:hover { background: rgba(200,145,28,.14); }
.gta-xcard--gold .gta-xcard-ic { background: linear-gradient(135deg,#C8911C,#8a5f0f); }

/* اسکلت لودینگ کارت‌ها (به‌جای خالی‌بودن لحظه‌ای موقع بازشدن مودال) */
@keyframes gta-shimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } }
.gta-skeleton-ic, .gta-skeleton-bar {
  border-radius: 8px; background: linear-gradient(90deg, rgba(15,42,28,.08) 25%, rgba(15,42,28,.15) 37%, rgba(15,42,28,.08) 63%);
  background-size: 480px 100%; animation: gta-shimmer 1.4s ease-in-out infinite;
}
.gta-skeleton-ic { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; }
.gta-skeleton-bar { height: 14px; margin: 5px 0; }
.gta-skeleton-bar--sm { height: 11px; opacity: .7; }

/* ===========================================================
   فاز۲ (۲۰۲۶-۰۷-۱۶) — پوشش برند برای کامپوننت‌هایی که تا حالا
   استایل خام MudBlazor می‌ماندند: Tabs / Alert / Badge / Switch /
   Radio / Checkbox / Select / Autocomplete / Popover / Chip / Progress
   =========================================================== */

/* ── MudTabs: نوار تب شیشه‌ای + تب فعال قرص زمردی (هم‌خانواده‌ی تب‌های لاگین) ── */
.mud-tabs .mud-tabs-tabbar {
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.6) !important;
  border-radius: 14px !important;
}
.mud-tabs .mud-tabs-tabbar-content { padding: 4px; }
.mud-tabs .mud-tab {
  border-radius: 11px !important; margin: 3px; min-height: 40px;
  font-weight: 700; color: var(--gta-muted); text-transform: none !important;
  transition: background .18s, color .18s;
}
.mud-tabs .mud-tab:hover { background: rgba(23,92,57,.07) !important; color: var(--gta-green-d); }
.mud-tabs .mud-tab.mud-tab-active {
  background: linear-gradient(140deg,#2a7d52,#15583a) !important; color: #fff !important;
  box-shadow: 0 8px 18px rgba(23,92,57,.26);
}
.mud-tabs .mud-tab-slider { display: none !important; } /* خط زیر تب لازم نیست؛ خود قرص فعال کافی است */

/* ── MudAlert: گوشه‌گرد + سایه‌ی نرم؛ رنگ معنایی خطا/هشدار می‌ماند، موفقیت=سبز برند ── */
.mud-alert { border-radius: 14px !important; box-shadow: var(--gta-shadow); font-weight: 600; }
.mud-alert-filled-success { background: linear-gradient(140deg,#2a7d52,#15583a) !important; color: #fff !important; }
.mud-alert-text-success { background: rgba(23,92,57,.10) !important; color: var(--gta-green-d) !important; }
.mud-alert-outlined-success { border-color: var(--gta-green) !important; color: var(--gta-green-d) !important; }
.mud-alert-text-success .mud-alert-icon, .mud-alert-outlined-success .mud-alert-icon { color: var(--gta-green) !important; }

/* ── MudBadge ── */
.mud-badge { font-weight: 700; font-family: inherit; }

/* ── MudSwitch: روشن = زمرد برند (حتی وقتی Color تعیین نشده) ── */
.mud-switch:has(input:checked) .mud-switch-track { background-color: var(--gta-green) !important; opacity: 1 !important; }
.mud-switch:has(input:checked) .mud-icon-button { color: #fff !important; }

/* ── MudCheckbox / MudRadio: تیک‌خورده = زمرد برند ── */
.mud-checkbox:has(input:checked) .mud-icon-root { color: var(--gta-green) !important; }
.mud-radio:has(input:checked) .mud-icon-root { color: var(--gta-green) !important; }

/* ── Popover (منوی Select/Autocomplete/Menu/DatePicker): کارت شیشه‌ای گوشه‌گرد ── */
.mud-popover {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--gta-shadow-h) !important;
  overflow: hidden;
}
/* تقویم بازشوی DatePicker نباید هم‌عرض فیلد باریکش بریده شود — عرض طبیعی تقویم */
.mud-popover.mud-picker-popover { min-width: 310px !important; }
.mud-popover .mud-list { padding: 6px; }
.mud-popover .mud-list-item { border-radius: 10px; margin: 1px 0; }
.mud-popover .mud-list-item:hover { background: rgba(23,92,57,.07) !important; }
.mud-popover .mud-list-item.mud-selected-item {
  background: rgba(23,92,57,.12) !important; color: var(--gta-green-d) !important; font-weight: 700;
}
.mud-popover .mud-list-item.mud-selected-item .mud-icon-root { color: var(--gta-green) !important; }

/* ── MudChip: گوشه‌ی نرم هماهنگ ── */
.mud-chip { border-radius: 10px !important; font-weight: 600; }

/* ── Progress: پیش‌فرض هم سبز برند ── */
.mud-progress-linear.mud-default .mud-progress-linear-bar,
.mud-progress-circular.mud-default circle.mud-progress-circular-circle { color: var(--gta-green); background-color: var(--gta-green); }

/* ===========================================================
   🌙 حالت شب برند (۲۰۲۶-۰۷-۱۶)
   کلاس html.gta-dark را AdminLayout با JS ست می‌کند (هماهنگ با IsDarkMode).
   توکن‌ها این‌جا بازتعریف می‌شوند تا هر قانونی که از var می‌خواند خودکار تیره شود؛
   سطوح سفید هاردکد (شیشه‌ها/جدول/نوار) صریح override می‌شوند.
   =========================================================== */
html.gta-dark {
  --gta-ink:#E8EFEA; --gta-muted:#9FB0A7; --gta-line:#26332C;
  --gta-surface: rgba(22,32,27,.74); --gta-surface-2: rgba(20,29,24,.7);
  --gta-edge: rgba(255,255,255,.09); --gta-inset: rgba(255,255,255,.05);
  --gta-shadow:0 8px 24px rgba(0,0,0,.38); --gta-shadow-h:0 14px 34px rgba(0,0,0,.5);
  --gta-negative: #DA7F89;   /* روی ردیف منفیِ شب کنتراست ۴٫۹ می‌دهد */
  /* شیشه‌ی شب: همان شیشه، فقط تیره — و متن روی آن سفید/یشمی پررنگ */
  --gta-glass: rgba(28,40,34,.72);
  --gta-glass-strong: rgba(28,40,34,.76);
  --gta-glass-2: rgba(20,29,24,.62);
  --gta-glass-border: rgba(255,255,255,.10);
  --gta-glass-item: rgba(255,255,255,.055);
  --gta-glass-item-2: rgba(255,255,255,.075);
  --gta-glass-item-hover: rgba(63,166,113,.16);
  --gta-glass-sel: rgba(63,166,113,.22);
  --gta-glass-sel-border:#3FA671;
  --gta-glass-shadow: 0 14px 40px rgba(0,0,0,.45);
  --gta-on-glass:#E8EFEA;
  --gta-on-glass-soft:#9FB0A7;
  --gta-on-glass-title:#8FD4AF;
  --gta-on-glass-sel:#A9E3C4;
  --gta-on-glass-weight: 600;
  --gta-field-bg: rgba(255,255,255,.06);
  --gta-field-border: rgba(255,255,255,.16);
  /* سه رنگ معنایی در شب: متن روشن‌تر، زمینه‌ی قرص از خودِ همان رنگ (نه سفید) */
  --gta-pos:#5FBE8D;   --gta-pos-bg: rgba(95,190,141,.16);
  --gta-warn:#E3B457;  --gta-warn-bg: rgba(227,180,87,.16);
  /* ⚠️ لازم است: از ۲۰۲۶-۰۸-۱۰ نسخه‌ی روزِ --gta-neg هگزِ تیره است، پس اگر این‌جا
     به قرمزِ روشنِ شب برنگردد، متنِ افت در حالتِ شب محو می‌شود. */
  --gta-neg: var(--gta-negative);
  --gta-neg-bg: rgba(218,127,137,.16);
  --gta-neg-border: rgba(218,127,137,.38);
  /* یک پله روشن‌تر از --gta-negative: جایی که قرصِ قرمز روی ردیفِ قرمزِ کم‌رنگ می‌نشیند،
     دو لایه روی هم زمینه را به rgb(76,55,55) می‌برند و #DA7F89 فقط ۳٫۸۳ می‌دهد. این ۵٫۵. */
  --gta-neg-text: #E8A7AE;
  --gta-flat-bg: rgba(255,255,255,.10);
  --gta-brand-soft: rgba(95,190,141,.09);
  --gta-bg: rgba(12,18,16,.80);
  /* ⚠️ توقفِ روشن قبلاً #2E8B5B بود؛ متنِ سفیدِ روی آن فقط ۴٫۲۳ می‌داد (حد ۴٫۵).
     دیده نمی‌شد چون ابزارِ کنتراست گرادیان را اصلاً نمی‌خواند (فیکس ۱۰ آگوست).
     #2A7D52 همان توقفِ حالتِ روز است و ۵٫۰۶ می‌دهد. */
  --gta-grad-brand: linear-gradient(140deg,#2A7D52,#175C39);
  --gta-grad-bar: linear-gradient(90deg,#3FA671,#217A4C);
  --gta-grad-bar-gold: linear-gradient(90deg,#E3B457,#C8911C);
  background-color:#0C1210 !important;
  background-image:
    radial-gradient(680px 520px at 0% -3%, rgba(46,139,91,.22), transparent 58%),
    radial-gradient(600px 500px at 100% 0%, rgba(200,145,28,.10), transparent 57%),
    radial-gradient(800px 700px at 102% 103%, rgba(24,160,130,.15), transparent 58%),
    radial-gradient(720px 620px at -2% 103%, rgba(31,122,75,.15), transparent 58%),
    linear-gradient(135deg,#0C1210 0%,#0E1512 55%,#131310 100%) !important;
}

/* نوار بالا + آیکون‌هایش */
html.gta-dark .mud-appbar {
  background: rgba(18,26,22,.74) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html.gta-dark .mud-appbar .mud-icon-button,
html.gta-dark .mud-appbar .mud-icon-root,
html.gta-dark .mud-appbar .mud-typography { color:#C8D5CE !important; }

/* کارت برند گوشه + منوی بالا */
html.gta-dark .gta-brand-card {
  background: rgba(18,26,22,.8); border-color: rgba(255,255,255,.09);
  box-shadow: 0 12px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
html.gta-dark .gta-top-link { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
html.gta-dark .gta-top-link:hover { color: var(--gta-ink); background: rgba(255,255,255,.10); }
html.gta-dark .gta-top-link.active { border-color: transparent; }
html.gta-dark .gta-top-cat { color:#7FC9A2; background: rgba(63,166,113,.14); border-color: rgba(63,166,113,.22); }
html.gta-dark .gta-top-cat .mud-icon-root { color:#7FC9A2 !important; }
html.gta-dark .gta-top-dd {
  background: rgba(20,29,24,.98); border-color: rgba(255,255,255,.09);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
html.gta-dark .gta-top-dd .gta-fly-item.active { background: rgba(63,166,113,.18); color:#8FD4AF; }

/* منوی کناری: ریل بسته + کارت باز */
html.gta-dark .mud-drawer { background: rgba(16,23,19,.6) !important; border-color: rgba(255,255,255,.07) !important; }
html.gta-dark .mud-drawer-mini.mud-drawer--closed .mud-nav-link,
html.gta-dark .mud-drawer-mini.mud-drawer--closed .mud-nav-group > .mud-nav-link {
  background: rgba(24,34,28,.74) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html.gta-dark .mud-drawer-mini.mud-drawer--open {
  background: rgba(17,24,20,.94) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html.gta-dark .mud-drawer-mini.mud-drawer--open .mud-nav-link:hover { background: rgba(63,166,113,.13) !important; }
html.gta-dark .mud-nav-link:not(.active):hover { background: rgba(63,166,113,.13) !important; }

/* کارت‌ها و سطوح */
html.gta-dark .mud-paper,
html.gta-dark .mud-card {
  background: rgba(22,32,27,.74) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: var(--gta-shadow), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html.gta-dark .mud-card:hover { box-shadow: var(--gta-shadow-h), inset 0 1px 0 rgba(255,255,255,.05) !important; }
html.gta-dark .mud-popover,
html.gta-dark .mud-menu .mud-paper,
html.gta-dark .mud-dialog .mud-paper { background: rgba(20,29,24,.97) !important; border-color: rgba(255,255,255,.09) !important; }

/* جدول‌ها */
html.gta-dark .mud-table-head .mud-table-cell {
  background:#182720 !important; color:#7FC9A2 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.3) !important;
}
/* گارد: راه‌راه سفید پیش‌فرض MudBlazor روی خود <tr> در شب (زبرا را سلول‌ها می‌سازند) */
html.gta-dark .mud-table-body .mud-table-row { background-color: transparent !important; }
html.gta-dark .mud-table-body .mud-table-cell { background: rgba(255,255,255,.045) !important; color: var(--gta-ink) !important; }
html.gta-dark .mud-table-body .mud-table-row:nth-of-type(even) .mud-table-cell { background: rgba(46,139,91,.10) !important; }
html.gta-dark .mud-table-body .mud-table-row:hover .mud-table-cell { background: rgba(46,139,91,.20) !important; }
html.gta-dark .mud-data-grid .column-options { background:#182720 !important; box-shadow: 0 2px 8px rgba(0,0,0,.45) !important; }

/* کارت‌های آماری و عناوین */
html.gta-dark .gta-stat-card {
  background: rgba(22,32,27,.74); border-color: rgba(255,255,255,.08);
  box-shadow: var(--gta-shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
html.gta-dark .gta-stat-icon { background: rgba(63,166,113,.15); color:#5FBE8D; }

/* تب‌ها، popover-list، سوییچ/چک‌باکس، alert موفقیت */
html.gta-dark .mud-tabs .mud-tabs-tabbar { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.09) !important; }
html.gta-dark .mud-tabs .mud-tab:hover { background: rgba(63,166,113,.13) !important; color:#8FD4AF; }
html.gta-dark .mud-popover .mud-list-item:hover { background: rgba(63,166,113,.13) !important; }
html.gta-dark .mud-popover .mud-list-item.mud-selected-item { background: rgba(63,166,113,.2) !important; color:#8FD4AF !important; }
html.gta-dark .mud-popover .mud-list-item.mud-selected-item .mud-icon-root { color:#5FBE8D !important; }
html.gta-dark .mud-switch:has(input:checked) .mud-switch-track { background-color:#3FA671 !important; }
html.gta-dark .mud-checkbox:has(input:checked) .mud-icon-root,
html.gta-dark .mud-radio:has(input:checked) .mud-icon-root { color:#5FBE8D !important; }
html.gta-dark .mud-alert-text-success { background: rgba(63,166,113,.16) !important; color:#8FD4AF !important; }
html.gta-dark .mud-elevation-2 { box-shadow: var(--gta-shadow) !important; }

/* ریل آیکونی راست (gta-rail-sq — مربع‌های سفارشی، نه mud-nav-link) */
html.gta-dark .gta-rail-sq {
  background: rgba(24,34,28,.74);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
html.gta-dark .gta-rail-grp:hover .gta-rail-sq {
  color:#8FD4AF;
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
/* .gta-rail-sq.active گرادیان زمردی دارد — تو شب هم درست است، دست نمی‌خورد */
html.gta-dark .gta-rail-flyout {
  background: rgba(20,29,24,.98);
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
html.gta-dark .gta-flyout-h { border-bottom-color: rgba(255,255,255,.08); }
html.gta-dark .gta-fly-item:hover { background: rgba(63,166,113,.13); color:#8FD4AF; }
html.gta-dark .gta-fly-item .mud-icon-root { color:#5FBE8D !important; }
html.gta-dark .gta-rail-badge { border-color: rgba(20,29,24,.9); }

/* آواتار اپراتور تو نوار بالا (placeholder سفید پیش‌فرض) */
html.gta-dark .mud-appbar .mud-avatar {
  background: rgba(255,255,255,.08) !important;
  color:#C8D5CE !important;
  border: 1px solid rgba(255,255,255,.12);
}
html.gta-dark .mud-appbar .mud-avatar .mud-icon-root { color:#C8D5CE !important; }

/* داشبورد (کلاس‌های gd-*) — کنتراست سبز/طلا در شب */
html.gta-dark .gd-ic { background: rgba(63,166,113,.15); color:#5FBE8D; }
html.gta-dark .gd-ic.gold { background: rgba(217,166,46,.15); color:#E4B95B; }
html.gta-dark .gd-up { color:#8FD4AF; background: rgba(63,166,113,.16); }
html.gta-dark .gd-down { color:#E9A5AE; background: rgba(218,127,137,.16); }
html.gta-dark .gd-pill.ok { background: rgba(63,166,113,.18); color:#8FD4AF; }
html.gta-dark .gd-pill.no { background: rgba(218,127,137,.18); color:#E9A5AE; }
html.gta-dark .gd-table tr:hover td { background: rgba(63,166,113,.10); }

/* ─── autofill (پرکردن خودکار مرورگر) — سراسری ───────────────────────────
   کروم موقع autofill پس‌زمینه‌ی سفید/آبی داخلی خودش را روی input می‌کشد که
   از CSS معمولی قوی‌تر است و در حالت شب لکه‌ی سفید می‌سازد. ترفند: انیمیشن
   background-color را عملاً بی‌نهایت عقب می‌اندازیم تا هیچ‌وقت paint نشود. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  transition:background-color 999999s ease-in-out 0s;
  -webkit-text-fill-color:#141A22;
  caret-color:#141A22;
}
html.gta-dark input:-webkit-autofill,
html.gta-dark input:-webkit-autofill:hover,
html.gta-dark input:-webkit-autofill:focus,
html.gta-dark textarea:-webkit-autofill,
html.gta-dark select:-webkit-autofill{
  -webkit-text-fill-color:#E4EDE7;
  caret-color:#E4EDE7;
}

/* ===========================================================
   📱 پولیش سراسری موبایل (۲۰۲۶-۰۸-۰۷)
   ۱) تب‌ها (MudTabs): min-width پیش‌فرض ۱۶۰px است و روی گوشی فقط یک تب
      دیده می‌شد (بقیه پشت فلش اسکرول گم بودند) — جمع‌وجور تا همه جا شوند.
   ۲) جدول‌های MudTable/MudDataGrid در حالت پشته‌ایِ xs: قبلاً همه‌ی ردیف‌ها
      به هم چسبیده بودند و مرز رکوردها معلوم نبود — هر ردیف یک کارت جدا.
   ۳) سلول‌های خالی (مقدار ندارند) در حالت پشته‌ای حذف تا کارت‌ها قدکوتاه شوند.
   =========================================================== */
@media (max-width: 959.95px) {
  .mud-tabs .mud-tab {
    min-width: 0 !important;
    padding: 8px 13px !important;
    font-size: 13.5px;
  }
  /* iOS Safari روی input با فونت زیر ۱۶px موقع فوکوس کل صفحه را زوم می‌کند */
  .mud-input > input, .mud-input > textarea, .mud-select-input { font-size: 16px !important; }
}

/* حالت پشته‌ای جدول‌ها زیر 600px فعال می‌شود (breakpoint داخلی MudBlazor برای xs) */
@media (max-width: 599.95px) {
  /* هر ردیف = یک کارت شیشه‌ای جدا (توکن glass در شب خودکار تیره می‌شود) */
  .mud-table.mud-xs-table .mud-table-body .mud-table-row {
    display: block;
    margin: 0 2px 12px;
    background: var(--gta-glass, rgba(255,255,255,.85)) !important;
    border: 1px solid var(--gta-glass-border, rgba(15,42,28,.09));
    border-radius: var(--gta-radius-card);
    box-shadow: 0 6px 16px rgba(15,42,28,.07);
    overflow: hidden;
    padding: 4px 0;
  }
  /* راه‌راه/هاور جدولی داخل کارت بی‌معنی است — همرنگ خود کارت */
  .mud-table.mud-xs-table.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd),
  .mud-table.mud-xs-table.mud-table-hover .mud-table-body .mud-table-row:hover,
  .mud-table.mud-xs-table .mud-table-body .mud-table-row td {
    background: transparent !important;
  }
  .mud-table.mud-xs-table .mud-table-body .mud-table-cell {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; text-align: start;
    border: 0 !important;
    padding: 8px 14px !important;
    font-weight: 600;
  }
  .mud-table.mud-xs-table .mud-table-body .mud-table-cell:not(:last-child) {
    border-bottom: 1px dashed rgba(15,42,28,.08) !important;
  }
  html.gta-dark .mud-table.mud-xs-table .mud-table-body .mud-table-cell:not(:last-child) {
    border-bottom-color: rgba(255,255,255,.09) !important;
  }
  /* برچسب ستون ظریف و کم‌رنگ؛ مقدار پررنگ می‌ماند */
  .mud-table.mud-xs-table .mud-table-body .mud-table-cell::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .74rem; font-weight: 700; color: var(--gta-muted);
    margin: 0;
  }
  /* سلول بی‌مقدار (فقط برچسب) حذف — کارت کوتاه و تمیز.
     (:empty با کامنت‌مارکرهای Blazor هم می‌گیرد؛ سلول آیکون/دکمه‌دار خالی نیست) */
  .mud-table.mud-xs-table .mud-table-body .mud-table-cell:empty { display: none !important; }
  /* سلکتِ «مرتب‌سازی» که MudTable در حالت پشته‌ای بالای جدول می‌گذارد بی‌لیبل و
     گیج‌کننده بود (همان ▼ سرگردانِ صفحه‌ی کاربران) — حذف به‌خواست علیرضا */
  .mud-table-smalldevices-sortselect { display: none !important; }
  /* پیجر: در عرض گوشی نچسبد و بشکند */
  .mud-table.mud-xs-table .mud-table-pagination-toolbar {
    height: auto; min-height: 0; flex-wrap: wrap; gap: 2px; padding: 8px 10px;
  }
  .mud-table.mud-xs-table .mud-table-pagination-caption { font-size: .78rem; }
  /* آیکون تب‌ها در گوشی حذف — هر ۴ تب (مثل صفحه‌ی نگین‌ها) کامل جا شوند */
  .mud-tabs .mud-tab .mud-icon-root { display: none !important; }
  /* 📱 قطعِ فلایوتِ هاوری و blur روی لمسی: از ۲۰۲۶-۰۸-۱۱ از این‌جا (شرطِ عرض) به
     بلوکِ بعد از همین media query منتقل شد تا شرطش «دستگاهِ لمسی» باشد نه «عرضِ کم». */
  /* قاب اسکرول داخلی جدول (FixedHeader/Height ثابت قالب قدیمی مثل «کاربر») در حالت
     کارتی بی‌معنی است — کل صفحه یک اسکرول داشته باشد */
  .mud-table.mud-xs-table .mud-table-container {
    max-height: none !important; height: auto !important; overflow: visible !important;
  }
}

/* ===========================================================
   📱 «کارتِ فشرده‌ی موبایل» — الگوی واحد برای جدول‌های ساده (۲۰۲۶-۰۸-۱۹)
   MudSimpleTable (جدولِ HTML خام) از قابلیتِ پشته‌ایِ MudTable بی‌بهره بود، پس روی
   گوشیِ ۳۹۰ فقط ۳-۴ ستونِ اول دیده می‌شد و مبلغ/مانده/وضعیت/دکمه‌ها بیرونِ کادر
   می‌افتادند (ممیزیِ ۱۷ آگوست: سفارش‌ها، پست، دیجی‌کالا، فروشگاه‌ها، گزارش‌ها).
   کافی است روی <MudSimpleTable> کلاسِ `gta-cards` بگذاری و هر <td> یک
   `data-label="نامِ ستون"` داشته باشد؛ سلولِ کم‌اهمیت را `data-more` بزن تا
   پشتِ دکمه‌ی «جزئیات» برود (بازشدن با :has، بدونِ هیچ کدِ C#).
   =========================================================== */
.gta-more { display: none; }

@media (max-width: 599.95px) {
  .gta-cards { white-space: normal !important; overflow-x: visible !important; }
  .gta-cards thead { display: none; }
  .gta-cards tbody, .gta-cards tbody tr, .gta-cards tbody td { display: block; }
  .gta-cards tbody tr {
    margin: 0 0 12px;
    background: var(--gta-glass, rgba(255,255,255,.85));
    border: 1px solid var(--gta-glass-border, rgba(15,42,28,.09));
    border-radius: var(--gta-radius-card);
    box-shadow: 0 6px 16px rgba(15,42,28,.07);
    overflow: hidden;
    padding: 4px 0;
  }
  .gta-cards tbody tr:hover { background: var(--gta-glass, rgba(255,255,255,.85)) !important; }
  .gta-cards tbody td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; text-align: start;
    border: 0 !important;
    padding: 7px 14px !important;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
  }
  .gta-cards tbody td:not(:last-child) { border-bottom: 1px dashed rgba(15,42,28,.08) !important; }
  html.gta-dark .gta-cards tbody td:not(:last-child) { border-bottom-color: rgba(255,255,255,.09) !important; }
  .gta-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .74rem; font-weight: 700; color: var(--gta-muted);
  }
  .gta-cards tbody td:empty { display: none !important; }
  /* max-width اینلاینِ ستونِ ورودی (مثلِ انبارگردانیِ نگین) در کارت باعث می‌شد کلِ ردیف
     ۱۴۰px پهنا بگیرد؛ در حالتِ کارتی هر سلول تمام‌عرض است و ورودی باید انگشت‌خور باشد. */
  .gta-cards tbody td { max-width: none !important; }
  .gta-cards tbody td .mud-input-control { min-width: 128px; }
  /* ستونِ چسبانِ دسکتاپ (os-sticky-end، ستونِ اولِ digi-months …) در کارت بی‌معنی است */
  .gta-cards tbody td, .gta-cards tbody th { position: static !important; box-shadow: none !important; }
  /* سلول‌های کم‌اهمیت تا وقتی «جزئیات» زده نشده پنهان‌اند ⇒ کارت کوتاه می‌ماند */
  .gta-cards tbody tr:not(:has(.gta-more-tgl:checked)) td[data-more] { display: none !important; }
  .gta-more {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer; user-select: none;
    font-size: .78rem; font-weight: 700;
    color: var(--mud-palette-primary);
    padding: 6px 8px; position: relative;
    min-height: 32px; border-radius: var(--gta-radius-sm);
  }
  .gta-more .gta-more-tgl { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .gta-more::after { content: "جزئیات ▾"; }
  .gta-more:has(.gta-more-tgl:checked)::after { content: "بستن ▴"; }
  .gta-more:has(.gta-more-tgl:focus-visible) { outline: 2px solid var(--mud-palette-primary); }

  /* ── همان الگو برای MudTable/MudDataGrid (حالتِ پشته‌ایِ xs) ──────────────
     ممیزیِ ۱۷ آگوست: هر معامله/مشتری/کالا روی گوشی کارتی با ۸ تا ۱۱ ردیفِ
     برچسب/مقدار می‌شد ⇒ ارتفاعِ صفحه ۸٬۰۰۰ تا ۱۳٬۰۰۰ پیکسل برای ۲۰ ردیف.
     ستونِ کم‌اهمیت را `CellClass="gta-sec"` بزن تا پشتِ دکمه‌ی «جزئیات» برود؛
     دکمه را با <label class="gta-more"><input type="checkbox" class="gta-more-tgl"/></label>
     داخلِ سلولِ اولِ همان ردیف بگذار (روی دسکتاپ اصلاً دیده نمی‌شود). */
  .mud-table.mud-xs-table .mud-table-body .mud-table-row:not(:has(.gta-more-tgl:checked)) .gta-sec {
    display: none !important;
  }
  /* سلولِ اول: مقدار + دکمه‌ی جزئیات کنارِ هم بمانند */
  .mud-table.mud-xs-table .mud-table-body .mud-table-cell:has(.gta-more) { flex-wrap: wrap; }

  /* نودهای درختِ مجوز روی ۳۹۰ بریده می‌شدند («bard») — بشکنند، نه ببرند */
  .mud-treeview-item-label, .mud-treeview-item-content { white-space: normal !important; word-break: break-word; }

  /* ── کارت‌های آمار روی گوشی: دو-ستونه و کوتاه ──────────────────────────
     قبلاً هر کارتِ آمار تمام‌عرض و ~۱۷۰px بود ⇒ ۴ تا ۶ کارت یعنی ۷۰۰ تا ۱۲۰۰
     پیکسل اسکرول تا رسیدن به خودِ فهرست. حالا ۲×۲ و نصفِ ارتفاع. */
  .mud-grid-item:has(> .gta-stat) { flex: 0 0 50% !important; max-width: 50% !important; padding: 5px !important; }
  .gta-stat { padding: 10px 11px !important; gap: 8px !important; }
  .gta-stat .mud-icon-root { font-size: 1.45rem !important; }
  .gta-stat .mud-typography-h5 { font-size: 1.08rem !important; line-height: 1.35; }
  .gta-stat .mud-typography-body2, .gta-stat .mud-typography-caption { font-size: .72rem !important; line-height: 1.35; }
}

/* 📱 باگ ۷ آگوست: روی دستگاهِ لمسی، tap حالتِ :hover را گیر می‌اندازد؛ بعدِ بستنِ منو
   فلایوتِ ریل به‌صورت باریکه‌ی سفیدِ لبِ راست می‌ماند و کلِ صفحه blur می‌شود. آن‌جا
   فلایوتِ هاوری و blur بی‌معنی‌اند (ناوبری با آکاردئونِ منوی باز است) — هر دو قطع.
   ⚠️⚠️ ۱۱ آگوست — ریشه‌ی نهایی: شرط «دستگاهِ موس‌دار» با media query
   (hover: hover) and (pointer: fine) نوشته شده بود. **لپ‌تاپِ خودِ علیرضا صفحه‌لمسی است**،
   پس ویندوز/کروم ورودیِ اصلی را coarse گزارش می‌کند و آن media query روی لپ‌تاپِ او false
   می‌شد ⇒ هم فلایوت هم blur کاملاً مرده بودند (ولی تولتیپِ title می‌آمد، چون به این ربطی
   ندارد). قابلیتِ دستگاه جوابگو نیست؛ ملاک شد **آخرین ورودیِ واقعیِ کاربر**:
   اسکریپتِ کوچکی در index.html با pointerType کلاسِ `gta-touch` را روی <html> می‌گذارد/برمی‌دارد
   (موس/قلم → برمی‌دارد، انگشت → می‌گذارد). حالتِ اولیه فقط روی دستگاهی که هیچ اشاره‌گرِ
   دقیقی ندارد (گوشی) لمسی است. مسیرِ قبلیِ «عرضِ زیر ۹۶۰px» هم غلط بود و حذف شد. */
html.gta-touch .mud-drawer-mini.mud-drawer--closed .gta-rail-flyout { display: none !important; }
html.gta-touch body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-appbar,
html.gta-touch body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-main-content { filter: none !important; }
/* 🍎 کمربندِ دوم (۱۵ آگوست ۲۰۲۶ — آیفونِ فخرایی): سافاریِ iOS گاهی برای تپ رویدادِ pointer با
   pointerType «mouse» می‌فرستد و اسکریپت کلاسِ gta-touch را برمی‌داشت ⇒ همان blur/فلایوتِ گیرکرده
   با ظاهرِ «صفحه مات و کمی تیره شد، انگار هنگ کرد». اسکریپت اصلاح شد، ولی این‌جا هم مستقل از JS
   می‌بندیم: دستگاهی که *هیچ* ورودیِ هاورداری ندارد، هرگز مات یا فلایوتِ هاوری نگیرد.
   (لپ‌تاپِ لمسیِ علیرضا any-hover:hover دارد چون موس/تاچ‌پد دارد ⇒ دست‌نخورده.) */
@media (any-hover: none) {
  body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-appbar,
  body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-main-content { filter: none !important; }
  html:not(.gta-touch) .mud-drawer-mini.mud-drawer--closed .gta-rail-grp:hover .gta-rail-flyout { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  html:not(.gta-touch) .gta-top-grp:hover .gta-top-dd { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}

/* ===========================================================
   📲 بنر یک‌باره‌ی «نصب روی گوشی» (PWA) — فقط موبایل، JS در index.html
   =========================================================== */
.gta-pwa-banner {
  position: fixed; z-index: 1360;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 12px; right: 12px;
  display: flex; align-items: center; gap: 11px;
  direction: rtl;
  padding: 12px 14px;
  border-radius: var(--gta-radius-card);
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(23,92,57,.16);
  box-shadow: 0 16px 40px rgba(15,42,28,.25);
  font-family: inherit;
}
.gta-pwa-banner img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.gta-pwa-banner .t { flex: 1 1 auto; font-size: .86rem; font-weight: 600; color: var(--gta-ink); line-height: 1.6; }
.gta-pwa-banner button { font-family: inherit; cursor: pointer; border-radius: 999px; font-weight: 700; }
.gta-pwa-banner .i {
  border: 0; color: #fff; padding: 8px 18px; font-size: .88rem;
  background: linear-gradient(140deg,#2a7d52,#15583a);
  box-shadow: 0 6px 16px rgba(23,92,57,.3);
}
.gta-pwa-banner .x { border: 0; background: transparent; color: var(--gta-muted); padding: 8px 6px; font-size: .82rem; }
html.gta-dark .gta-pwa-banner { background: rgba(22,32,27,.97); border-color: rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.5); }
@media (min-width: 960px) { .gta-pwa-banner { display: none !important; } }

/* دکمه‌ی شناور اکشن اصلی (FAB) — المانِ جدا در ته صفحه (بیرون از کارت‌های شیشه‌ای،
   چون backdrop-filter والد، fixed را نسبت به همان کارت لنگر می‌کند نه صفحه).
   پیش‌فرض مخفی؛ فقط در گوشی ظاهر و شناور می‌شود — دکمه‌ی عادیِ تولبار سر جایش است. */
.gta-fab-mobile { display: none !important; }
/* همراهِ FAB: دکمه‌ی عادیِ تولبار که روی گوشی تکراری می‌شود (و گاهی روی دکمه‌ی
   کناری‌اش می‌افتد) با این کلاس زیرِ ۶۰۰px پنهان می‌شود — یک اکشن، یک دکمه. */
@media (max-width: 599.95px) {
  .gta-hide-mobile { display: none !important; }
}
@media (max-width: 599.95px) {
  .gta-fab-mobile {
    display: inline-flex !important;
    position: fixed !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    left: 16px !important;
    z-index: 1350 !important;
    border-radius: 999px !important;
    padding: 12px 20px !important;
    box-shadow: 0 12px 30px rgba(15,68,41,.40), 0 3px 10px rgba(0,0,0,.22) !important;
  }
}

/* ═══ چاپ (سراسری) ═══
   قاب سایت نباید روی برگه‌ی چاپ بیاید. این قانون عمداً این‌جاست نه در فایل scoped
   صفحه‌ی چاپ: Blazor به آخرین سلکتور اتریبیوت [b-xxx] می‌چسباند و `:global(header)`
   را به سلکتور نامعتبر تبدیل می‌کرد، پس کل بلوک بی‌اثر بود و منو/ریل چاپ می‌شد. */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-overlay,
    .mud-snackbar-provider,
    .gta-brand-card,
    header, nav, footer,
    .no-print { display: none !important; }

    .mud-main-content { margin: 0 !important; padding: 0 !important; }
    body, .mud-layout, .mud-container { background: #fff !important; }

    @page { size: A4; margin: 10mm; }
}


/* نوارِ ابزارِ بالای برگه‌های چاپی (OsSheetView / OsSheetBatchView) —
   روی صفحه دیده می‌شود، سرِ چاپ محو. باقیِ کلاس‌های .os-print-* با حذفِ
   صفحه‌های چاپِ قدیمی (OsPrintView/OsPrintBatchView) در ۲۰۲۶-۰۸-۱۰ برداشته شدند. */
@media print {
    .os-print-toolbar { display: none !important; }
}

/* بندانگشتیِ عکسِ فیش — مشترکِ فرمِ ثبت و فهرستِ تراکنش‌ها */
.os-receipt-thumb {
    height: 40px; width: 40px; object-fit: cover; cursor: pointer;
    border-radius: var(--gta-radius-sm);
    border: 1px solid var(--mud-palette-lines-default);
    display: inline-block; vertical-align: middle;
}

/* ───── یک کلاسِ لینک برای کلِ ماژول ─────
   قبلاً سه کلاسِ تقریباً یکسان بود (.os-tel-link سراسری، .os-store-link و .os-stat-link
   هرکدام scoped در فایلِ خودشان). با اضافه‌شدنِ لینکِ «شهر» و «موبایلِ گیرنده» می‌شد پنج‌تا،
   پس همه به یکی خلاصه شدند: نامِ فروشگاه، شهر، شماره‌ی تماس، عددِ داخلِ کارت. */
.os-link {
    cursor: pointer; color: inherit;
    text-decoration: underline dotted; text-underline-offset: 3px;
}
/* ⚠️ هاور با شرطِ gta-touch (نه media query) — روی لپ‌تاپِ لمسی media query هاور را می‌کشت. */
html:not(.gta-touch) .os-link:hover { color: var(--mud-palette-primary); }

/* ───── کارتِ آماریِ کلیک‌شدنی ─────
   ⚠️ عمداً این‌جاست، نه در OsDashboardView.razor.css: این کلاس روی <MudPaper> می‌نشیند و
   Blazor اتریبیوتِ scope را به خروجیِ کامپوننتِ فرزند نمی‌چسباند، پس نسخه‌ی scoped هیچ‌وقت
   اعمال نمی‌شد. نتیجه‌اش در تستِ چشمیِ ۱۰ آگوست دیده شد: هر ۳ کارت @onclick داشتند ولی
   cursor:auto بودند — یعنی کاربر اصلاً نمی‌فهمید کلیک‌شدنی‌اند. (همان ریشه‌ی باگِ KalaView.) */
.os-stat-clickable {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
html:not(.gta-touch) .os-stat-clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--gta-glass-shadow, 0 6px 18px rgba(0,0,0,.12));
}

/* ───── ستونِ دکمه‌های چسبان در جدول‌های پهن ─────
   درسِ ۱۰ آگوست: جدولِ سفارش‌ها ۱۵۳۸px بود و کادر ۱۳۶۲px، پس ویرایش/چاپ کاملاً بیرونِ
   دید می‌افتاد. حالا هر چقدر هم جدول پهن شود این ستون سرِ جایش می‌ماند.
   جهتِ صفحه RTL است، پس «انتهای» جدول سمتِ چپ است ⇒ left:0. */
.os-sticky-end {
    position: sticky; left: 0; z-index: 2;
    background: var(--mud-palette-surface);
    box-shadow: 6px 0 8px -6px rgba(0,0,0,.18);
}
.mud-table-hover tbody tr:hover .os-sticky-end { background: var(--mud-palette-action-default-hover); }

/* ───── کارت «امروز» در فهرست فاکتورها (دکمه‌ی دوحالته‌ی فیلتر) ─────
   کارتی که کلیک‌پذیر است باید کلیک‌پذیر هم به نظر برسد؛ بدون این، کاربر
   نمی‌فهمد قابلِ زدن است. رنگ‌ها از توکن‌های خودِ MudBlazor می‌آیند تا در
   حالت شب هم خودکار درست دربیایند (رنگِ خام ننویسید).
   ⚠️ این‌جا (سراسری) نوشته شده نه در .razor.css — کلاسِ scoped روی ریشه‌ی
   MudPaper نمی‌نشیند (گوتچای ثبت‌شده‌ی ۹ آگوست). */
.gta-today-card {
    cursor: pointer;
    border: 1px solid transparent;
    transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

.gta-today-card:hover {
    box-shadow: var(--mud-elevation-6);
}

/* حالت فعال: هم‌خانواده‌ی آیکون کارت (Warning) تا با بقیه‌ی سامانه نخواند */
.gta-today-card--on {
    border-color: var(--mud-palette-warning);
    background: var(--mud-palette-warning-hover);
}

/* نشانه‌ی فوکوس برای کاربرِ کیبورد — بدون این، Tab نامرئی می‌شود */
.gta-today-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════
   ⭐ برگه‌ی A4 سه‌تکه‌ی «فروش اینترنتی» (OsSheet.razor)
   یک کاغذ = فاکتور (راست) + برچسبِ ارسال (چپ-بالا) + آماده‌سازی (چپ-پایین).

   🎨 این نسخه عمداً کپیِ بصریِ طرحِ اصلیِ فایلِ ورد است (سبزِ تیره‌ی گردگوشه،
   خانه‌های خاکستریِ روشن، نقشِ محوِ اسلیمی، شماره‌های داخلِ دایره‌ی سبز).
   اگر خواستی رنگ عوض کنی، فقط متغیّرهای زیر را دست بزن.

   ⚠️ عمداً سراسری است نه scoped: هم صفحه‌ی تکی (OsSheetView) هم دسته‌ای
   (OsSheetBatchView) از یک کامپوننتِ مشترک استفاده می‌کنند و CSSِ scoped
   فقط روی کامپوننتِ خودش می‌افتد.

   ⚠️ حاشیه‌ی چاپ باید صفر باشد تا هدر/فوترِ کروم نیاید و حاشیه داخلِ خودِ برگه
   داده می‌شود. اما @page سراسری هنوز ۱۰mm است (صفحاتِ چاپِ دیگر — فاکتور،
   چارتِ سازمانی، فروشگاه — به آن وابسته‌اند)، پس این صفحه موقعِ باز شدن با
   osSheetPrintMode(true) یک @page موقت تزریق می‌کند و موقعِ خروج برش می‌دارد.
   ═══════════════════════════════════════════════════════════════════ */

/* میزِ نمایش روی صفحه (در چاپ بی‌اثر می‌شود) */
.os-sheet-stage { padding: 16px 8px 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; }

.os-sheet {
    /* ⭐ رنگ‌های طرحِ اصلی — از خودِ تصویرِ مرجع برداشته شده */
    --rf-green: #15532E;      /* سبزِ تیره‌ی سرشناسه‌ها */
    --rf-green-dk: #0E4224;
    --rf-gray: #D7D7D7;       /* خانه‌های ورودی */
    --rf-ink: #16202A;

    /* ⚠️ افقی (landscape) — عینِ طرحِ اصلی */
    width: 297mm;
    height: 210mm;
    box-sizing: border-box;
    padding: 3.5mm;
    background: #fff;
    color: var(--rf-ink);
    direction: rtl;
    /* ⚠️ نقشِ اسلیمی عمداً از لبه بیرون می‌زند (rf-orn-b تا ~۸۰mm بیرونِ کاغذ).
       بدونِ این خط، همان سرریز عرض/ارتفاعِ صفحه‌ی چاپ را زیاد می‌کرد و کروم
       صفحه‌ی اضافه می‌ساخت. برشِ لبه دقیقاً همان کاریست که چاپِ واقعی می‌کند. */
    overflow: hidden;
    font-size: 8pt;
    line-height: 1.5;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;   /* در RTL: ستونِ ۱ = راست = فاکتور */
    grid-template-rows: 71mm 1fr;
    /* 🔴 بدونِ این دو خط، سبزها و خاکستری‌ها اصلاً چاپ نمی‌شوند */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* روی صفحه شبیهِ کاغذ دیده شود */
@media screen {
    .os-sheet { box-shadow: 0 4px 24px rgba(0,0,0,.18); border-radius: 2px; }
}

/* هر خانه‌ی عددی/کدپستی/موبایل باید LTR باشد وگرنه ارقام جابه‌جا دیده می‌شوند.
   ⚠️ display را این‌جا دست نزن: همین کلاس روی خانه‌های چیدمانِ گرید هم می‌نشیند
   و inline-block کردنش چیدمانِ جدولِ فاکتور را می‌پاشاند (روی سایتِ زنده دیده شد). */
.os-sheet .ltr { direction: ltr; unicode-bidi: isolate; }

/* ───────── نقشِ محوِ اسلیمیِ پس‌زمینه (مثلِ طرحِ اصلی) ───────── */
/* ⚠️ خودِ فایلِ mandala.webp از قبل بسیار کم‌رنگ است (خطوطِ ~#DDE7DE روی سفید)؛
   opacity اضافه آن را کاملاً نامرئی می‌کرد — روی برگه‌ی زنده هیچ نقشی دیده نمی‌شد.
   پس opacity کامل می‌ماند و فقط کمی خاکستری/تیره می‌شود تا مثلِ طرحِ اصلی درآید. */
/* در طرحِ اصلی نقشِ اسلیمی *روی* خانه‌های خاکستری هم دیده می‌شود، نه فقط روی سفید.
   با z-index پایین، کادرهای خاکستریِ بزرگ کاملاً رویش می‌افتادند و نقش گم می‌شد.
   mix-blend-mode: multiply همان اثرِ طرحِ اصلی را می‌دهد و چون خطوطِ نقش تقریباً
   سفیدند، متنِ تیره‌ی زیرش دست‌نخورده و خوانا می‌ماند. */
.rf-orn { position: absolute; z-index: 2; opacity: 1; filter: grayscale(.6) brightness(.95);
          mix-blend-mode: multiply; pointer-events: none; user-select: none; }
/* ⚠️ right/left این‌جا فیزیکی‌اند، نه منطقی — نیمه‌ی راستِ کاغذ = فاکتور
   📐 اعداد از روی خودِ طرحِ اصلی اندازه‌گیری شده (کاغذ ۲۹۷×۲۱۰mm). در طرحِ اصلی
   دقیقاً ۳ نقش هست و هر سه مرکزشان *روی لبه‌ی کاغذ* است، یعنی نصفشان بریده می‌شود.
   مبنا (مرکز و قطر بر حسبِ mm از لبه‌های کاغذ):
     d → مرکز (۳ , ۷۲)  قطر ۹۴      — لبه‌ی چپ، پشتِ کادرِ آدرسِ برچسب
     b → مرکز (۴ , ۲۱۰) قطر ۱۶۰     — گوشه‌ی پایین-چپِ کاغذ (بزرگ‌ترین)
     c → مرکز (۲۹۳, ۱۲۹) قطر ۱۲۶    — لبه‌ی راست، پشتِ جدولِ فاکتور و قوانین
   چون مبدأ مکان‌یابی padding-box است (۳.۵mm تورفتگی) و تصویر مربع نیست
   (۷۸۲×۷۱۳ ⇒ ارتفاع = عرض ÷ ۱.۰۹۷)، افست‌ها همین‌جا حساب‌شده نوشته شده‌اند. */
.rf-orn-d { width: 94mm;  left: -43.9mm; top: 29.7mm; }     /* لبه‌ی چپ، پشتِ کادرِ آدرس */
.rf-orn-b { width: 160mm; left: -76.2mm; bottom: -73.0mm; } /* گوشه‌ی پایین-چپِ کاغذ */
.rf-orn-c { width: 126mm; right: -59.5mm; top: 71.7mm; }    /* لبه‌ی راست، پشتِ فاکتور */

.os-sheet-a { grid-column: 1; grid-row: 1 / 3; padding: 0 0 0 5mm; border-left: 1px dashed #9AA4AE;
              overflow: hidden; position: relative; z-index: 1; display: flex; flex-direction: column; }
.os-sheet-b { grid-column: 2; grid-row: 1; padding: 0 5mm 3mm 0; border-bottom: 1px dashed #9AA4AE;
              overflow: hidden; position: relative; z-index: 1; }
.os-sheet-c { grid-column: 2; grid-row: 2; padding: 3.5mm 5mm 0 0; overflow: hidden;
              position: relative; z-index: 1; display: flex; flex-direction: column; }

/* ═════════ آجرهای مشترکِ طرحِ اصلی ═════════ */

/* برچسبِ سبزِ قرص‌مانند */
.rf-pill {
    background: var(--rf-green); color: #fff; border-radius: 999px;
    padding: 1mm 3.5mm; font-size: 8pt; font-weight: 700; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; line-height: 1.25;
}

/* خانه‌ی خاکستریِ ورودی (همان‌که قبلاً دستی پر می‌شد) */
.rf-box {
    background: var(--rf-gray); border-radius: 999px; padding: 1mm 3.5mm;
    font-size: 8pt; font-weight: 600; min-height: 5.6mm; line-height: 1.3;
    display: flex; align-items: center; overflow: hidden;
}
.rf-box.ltr { justify-content: flex-end; }
.rf-box-big { border-radius: 3.5mm; align-items: flex-start; font-weight: 500; padding: 2mm 3mm; }

/* ردیفِ «برچسب + خانه» */
.rf-row { display: flex; align-items: stretch; gap: 1.5mm; margin-bottom: 1.6mm; }
.rf-row > .rf-box { flex: 1 1 auto; min-width: 0; }

/* نوارِ سبزِ تمام‌عرضِ تیتر */
.rf-bar {
    background: var(--rf-green); color: #fff; border-radius: 999px; text-align: center;
    font-size: 9pt; font-weight: 700; padding: 1.3mm 3mm; margin-bottom: 1.4mm;
}

/* دایره‌ی سبزِ شماره */
.rf-num {
    background: var(--rf-green); color: #fff; border-radius: 999px;
    width: 5.4mm; height: 5.4mm; flex: 0 0 5.4mm;
    display: flex; align-items: center; justify-content: center;
    font-size: 7pt; font-weight: 700;
}
.rf-num-sm { width: 4.6mm; height: 4.6mm; flex: 0 0 4.6mm; font-size: 6.4pt; }

/* برچسبِ عمودیِ سبز (کنارِ کادرِ آدرس) */
.rf-vlabel {
    background: var(--rf-green); color: #fff; border-radius: 2.5mm;
    writing-mode: vertical-rl; text-orientation: mixed;
    display: flex; align-items: center; justify-content: center;
    font-size: 7.5pt; font-weight: 700; padding: 2mm .8mm; flex: 0 0 7.5mm;
}

/* ═════════ تکه (الف): فاکتور — نیمه‌ی راستِ کاغذ ═════════
   چیدمان مو‌به‌موی طرحِ اصلی: فیلدهای شماره/تاریخ بالا-راست، کارتِ لوگو بالا-چپ. */
.rf-a-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 3mm; }
.rf-a-headfields { flex: 0 0 41mm; }
.rf-a-headfields .rf-pill { flex: 0 0 15mm; }
.rf-a-logo { flex: 0 0 39mm; }
.rf-a-logo img { width: 39mm; display: block; border-radius: 4.5mm; }

.rf-a-parties { display: grid; grid-template-columns: auto 1.25fr auto 1fr; gap: 1.5mm; margin: 5mm 0 4.5mm; }

/* جدولِ فاکتور — گرید، نه <table>: هر خانه یک قرصِ جداست مثلِ طرحِ اصلی */
.rf-tbl { display: flex; flex-direction: column; gap: 1.5mm; }
.rf-tr { display: grid; grid-template-columns: 5.4mm 1fr 11mm 14mm 36mm; gap: 1.5mm; align-items: stretch; }
.rf-tr > .rf-pill, .rf-tr > .rf-box { min-height: 6.4mm; }
.rf-tr > .rf-box { justify-content: center; text-align: center; }
.rf-tr > .rf-box:nth-child(2) { justify-content: flex-start; text-align: right; }
.rf-th-desc { grid-column: 1 / 3; }
.rf-tfoot { margin-top: 1.5mm; align-items: start; }
.rf-tfoot .rf-total-lbl { grid-column: 3 / 5; }
/* ⚠️ min-height باید از `.rf-tr > .rf-box` (وزنِ ۰٬۲٬۱) قوی‌تر باشد وگرنه خانه‌ی
   «مهر و امضا» نصفِ ارتفاعِ طرحِ اصلی درمی‌آید — همین یک‌بار پیش آمد. */
.rf-tfoot > .rf-a-sign { grid-column: 1 / 3; min-height: 20mm; border-radius: 3.5mm; flex-direction: column;
             align-items: center !important; justify-content: center; gap: 1.5mm;
             color: #6E7A84; font-weight: 600; }
.rf-a-sign-sum { font-size: 7.2pt; color: #4A5760; }

.rf-rules { margin-top: auto; padding-top: 3mm; }
.rf-rule { display: flex; gap: 2mm; align-items: flex-start; margin-bottom: 1.6mm; }
.rf-rule p { margin: 0; font-size: 7.6pt; line-height: 1.62; text-align: justify; }

/* ═════════ تکه (ب): برچسبِ ارسال — روی مرسوله ═════════ */
.rf-b-banner {
    background: var(--rf-green); color: #fff; border-radius: 4.5mm;
    display: flex; align-items: center; gap: 3mm; padding: 2mm 4mm; margin-bottom: 2mm; height: 23mm;
}
.rf-b-banner img { height: 15mm; display: block; }
.rf-b-banner .rf-b-div { width: 0; border-right: 1pt solid rgba(255,255,255,.75); align-self: stretch; margin: 1mm 0; }
.rf-b-from { flex: 1 1 auto; min-width: 0; }
.rf-b-from-lbl { font-size: 9pt; font-weight: 700; }
.rf-b-from-name { font-size: 9.5pt; font-weight: 800; line-height: 1.3; color: #F2E2AE; }
.rf-b-from-addr { font-size: 7pt; line-height: 1.4; color: #DCE9E0; }

.rf-b-grid3 { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: 1.5mm; margin-bottom: 1.6mm; }
.rf-b-grid2 { display: grid; grid-template-columns: auto 2.4fr auto 1fr; gap: 1.5mm; margin-bottom: 1.6mm; }

.rf-b-addrwrap { display: flex; gap: 1.5mm; align-items: stretch; }
.rf-b-addrwrap .rf-box { flex: 1 1 auto; min-height: 25mm; flex-direction: column; }
.rf-b-name { font-size: 11pt; font-weight: 800; }
.rf-b-addr { font-size: 9pt; line-height: 1.6; }
.rf-b-track { font-size: 7.2pt; margin-top: 1mm; color: #3C4A56; }
.rf-b-cod { margin-top: 1.2mm; border-radius: 999px; background: #FFEBCB; color: #8A5600;
            border: 1pt solid #A96A00; padding: .8mm 3mm; font-size: 8.5pt; font-weight: 800; }

/* ═════════ تکه (ج): آماده‌سازی و بایگانی — داخلی ═════════ */
/* در طرحِ اصلی کادرِ «عکس سفارش» حدودِ ۲.۷ برابرِ کادرِ «توضیحات» است، پس کادرِ
   توضیحات به اندازه‌ی محتوایش می‌ماند و بقیه‌ی ارتفاع می‌رود به عکس‌ها. */
.rf-c-notes { flex: 0 0 auto; min-height: 24mm; display: flex; flex-direction: column; gap: 1mm;
              margin-bottom: 2mm; }
.rf-c-line { font-size: 7.6pt; color: #33404A; font-weight: 600; }
.rf-c-alert { border-radius: 2mm; padding: .6mm 2.5mm; font-size: 7pt; }
.os-c-alert-red { background: #FDE8E8; color: #8E1F1F; border: .8pt solid #C33; }
.os-c-alert-amber { background: #FFF6E5; color: #7A5200; border: .8pt solid #D9A441; }
.rf-c-check { display: flex; flex-wrap: wrap; gap: 0 3.5mm; font-size: 7.4pt; color: #3C4A56; margin-top: auto; }

/* بنرِ پرداخت باید از دو متری خوانده شود — تصمیمِ «پول بگیر / نگیر» همین‌جاست */
.rf-c-banner { border-radius: 999px; padding: .8mm 3mm; text-align: center; font-size: 9pt;
               font-weight: 800; }
.os-c-banner-green { background: #E4F3E9; color: #12603A; border: 1pt solid #1C7A4A; }
.os-c-banner-orange { background: #FFEBCB; color: #8A5600; border: 1pt solid #A96A00; }

/* ردیفِ «مبلغ واریز / سایز بندی» — در طرحِ اصلی از دو طرف تورفته است */
.rf-c-money { display: grid; grid-template-columns: auto 1.25fr auto 1fr; gap: 1.5mm;
              padding: 0 14mm 0 18mm; margin-bottom: 2mm; }

/* 🖼️ «عکسِ حداکثری» (۲۰۲۶-۰۸-۱۱): قبلاً هر قلم یک کارتِ افقی بود که عکسش فقط ۱۵mm
   می‌شد و روی کاغذ عملاً ناخوانا بود. حالا خودِ عکس کلِ کاشی را پر می‌کند و متن مثلِ
   زیرنویسِ تلگرام چسبیده به لبه‌ی پایینِ عکس می‌نشیند (position:absolute روی عکس).
   ⚠️ کادر ارتفاعِ ثابت دارد (بقیه‌ی تکه‌ی ج)، پس گرید با ۱fr سطر همه‌ی فضا را پر
   می‌کند و برگه هیچ‌وقت بلندتر از یک کاغذ نمی‌شود. */
/* ⚠️ align-items اجباری است: کلاسِ هم‌زمانِ .rf-box-big مقدارِ flex-start می‌گذارد و
   بدونِ این خط، گریدِ عکس‌ها به عرضِ ۵ پیکسل جمع می‌شد (روی خروجیِ چاپ دیده شد). */
.rf-c-items { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
              align-items: stretch; gap: 1.2mm; overflow: hidden; padding: 1.2mm; }
.rf-c-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: 1.2mm; grid-auto-rows: 1fr; }
.rf-c-tile { position: relative; overflow: hidden; border-radius: 2.5mm; background: #EFEFEF;
             min-height: 0; }
/* cover و نه contain: کاشی‌ها تقریباً مربع‌اند و عکسِ محصول همیشه وسط‌چین است؛
   با contain نوارِ خاکستریِ کناری می‌ماند و عکس کوچک‌تر دیده می‌شود — دقیقاً همان
   چیزی که علیرضا از آن شکایت داشت. cover کلِ کاشی را پر می‌کند و جزئیاتِ وسطِ
   قطعه (که ملاکِ تشخیص است) بزرگ‌ترین حالتِ ممکن را می‌گیرد. */
.rf-c-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-c-cap2 { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(12,20,16,.78);
             color: #fff; padding: .7mm 2mm; display: flex; flex-wrap: wrap; align-items: baseline;
             gap: 0 1.5mm; line-height: 1.35; }
.rf-c-capchk { font-size: 8.5pt; }
.rf-c-capname { font-size: 8pt; font-weight: 800; }
.rf-c-capspec { font-size: 7pt; color: #E3EDE6; }
.rf-c-capnote { font-size: 6.6pt; color: #F0DFA8; width: 100%; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
/* نوارِ باریکِ قلم‌های بی‌عکس — جای خالیِ بزرگ نمی‌سازد */
.rf-c-strip { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .8mm 2mm; }
.rf-c-chip { font-size: 7pt; color: #33404A; background: #fff; border-radius: 999px;
             padding: .3mm 2mm; }
/* سفارشِ بی‌عکس: کادر خالیِ گنگ نماند، یک خطِ توضیح وسطش بنشیند */
.rf-c-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
              font-size: 8pt; color: #8A8A8A; }

/* ───────── QR (SVG از رمزگذارِ خودمان) ───────── */
.os-qr svg { display: block; }
.os-qr-sm svg { width: 14mm; height: 14mm; }
.os-qr-xs svg { width: 13mm; height: 13mm; background: #fff; padding: .8mm; border-radius: 1.5mm; }

/* ردیف‌های صفِ «آماده‌ی چاپ» */
.os-queue-row { padding: 4px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.os-queue-row:last-child { border-bottom: none; }

/* ───────── چاپ ───────── */
@media print {
    /* 🔴 ریشه‌ی باگِ «۲ صفحه به‌جای ۱» (۲۰۲۶-۰۸-۱۱):
       قابِ MainLayout برگه را داخلِ <div class="mud-container ... --gutters mt-4">
       می‌گذارد. یعنی ۱۶px حاشیه‌ی بالا (mt-4) + ۲۴px کناره (gutters). برگه دقیقاً
       اندازه‌ی یک کاغذ است (۲۹۷×۲۱۰mm)، پس همان ۱۶px اضافه، ارتفاع را از کاغذ
       بیشتر می‌کرد و کروم یک صفحه‌ی دوم می‌ساخت؛ ۲۴px کناره هم برگه را از لبه
       بیرون می‌زد. قبلاً فقط .mud-main-content ری‌ست می‌شد، نه .mud-container.
       ⚠️ با کلاسِ body محدود شده تا چاپِ فاکتور/چارتِ سازمانی دست‌نخورده بماند. */
    body.os-sheet-printing,
    body.os-sheet-printing .mud-rtl-provider,
    body.os-sheet-printing .mud-layout,
    body.os-sheet-printing .mud-main-content,
    body.os-sheet-printing .mud-container {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* 🔴🔴 قانونِ فراگیرِ «هیچ لایه‌ی شناوری روی کاغذ نیاید» (۲۰۲۶-۰۸-۱۱).
       تاریخچه‌ی این دسته باگ: اول نوارِ زنگِ سفارش (.gta-oa-bar) ارتفاع اضافه کرد و
       برگه دو صفحه شد؛ بعد توستِ «خوش آمدید» (mud-snackbar) نیمه‌شفاف افتاد روی
       نوارِ فرستنده و لوگوی فاکتور و حتی ضربدرِ بستنش کنارِ مونوگرام چاپ شد.
       به‌جای فهرست‌کردنِ تک‌تکِ مقصرها، هر چیزی که *بیرونِ برگه* شناور است پنهان
       می‌شود: توست، دیالوگ، اورلی، پاپ‌اور/منو/تولتیپ، نوارِ پیشرفت، دکمه‌ی شناور.
       ⚠️ محدود به بدنه‌ی برگه‌ی سه‌تکه است (body.os-sheet-printing) پس چاپِ فاکتور و
       چارتِ سازمانی و بقیه‌ی سامانه دست‌نخورده می‌ماند.
       ⚠️ خودِ .os-sheet-stage نباید قربانی شود، برای همین سلکتورها هدفمندند. */
    body.os-sheet-printing .mud-snackbar-provider,
    body.os-sheet-printing .mud-snackbar,
    body.os-sheet-printing .mud-dialog-container,
    body.os-sheet-printing .mud-dialog-provider,
    body.os-sheet-printing .mud-overlay,
    body.os-sheet-printing .mud-popover-provider,
    body.os-sheet-printing .mud-popover,
    body.os-sheet-printing .mud-tooltip,
    body.os-sheet-printing .mud-menu-popover,
    body.os-sheet-printing .mud-appbar,
    body.os-sheet-printing .mud-drawer,
    body.os-sheet-printing .mud-drawer-overlay,
    body.os-sheet-printing .mud-fab,
    body.os-sheet-printing .mud-progress-linear-indeterminate,
    body.os-sheet-printing .gta-oa-bar,
    /* توری ایمنی: هر عنصرِ چسبیده/شناورِ ناشناخته‌ای که *بیرونِ* برگه باشد.
       (چیزهای داخلِ .os-sheet خودشان absolute نسبت به برگه‌اند و دست نمی‌خورند.) */
    body.os-sheet-printing > *:not(#app):not(script):not(style) {
        display: none !important;
    }

    .os-sheet-stage { padding: 0 !important; gap: 0 !important; display: block !important; }
    .os-sheet {
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        break-after: page;
        page-break-after: always;
    }
    /* برگه‌ی آخر نباید یک صفحه‌ی سفیدِ اضافه بیرون بدهد */
    .os-sheet:last-child { break-after: auto; page-break-after: auto; }
    .os-sheet-a, .os-sheet-b, .os-sheet-c { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════
   دو ایرادِ سراسری — ۲۰۲۶-۰۸-۱۱
   ═══════════════════════════════════════════════════════════════════ */

/* ۱) توستِ «خوش آمدید» روی نوارِ منوی بالا می‌افتاد و آیتم‌های منو را
   می‌پوشاند. موقعیتِ «بالا-وسط» عمدی است (پایین، دکمه‌ی شناورِ موبایل را
   می‌پوشاند) پس فقط از زیرِ نوار شروع می‌شود، نه روی آن. */
/* ⚠️ کلاسِ واقعیِ ظرف در این نسخه‌ی MudBlazor `mud-snackbar-location-top-*` است و
   کلاسِ `mud-snackbar-provider` روی آن نیست — با سلکتورِ اشتباه اصلاً اعمال نمی‌شد
   (اندازه‌گیریِ زنده: توست در ۴۰px و پایینِ نوار در ۷۶px ⇒ همپوشانی). */
.mud-snackbar-location-top-center,
.mud-snackbar-location-top-right,
.mud-snackbar-location-top-left {
    padding-top: 86px !important;
    pointer-events: none;   /* ناحیه‌ی خالیِ بالای توست کلیک‌ها را نبلعد */
}

    .mud-snackbar-location-top-center .mud-snackbar,
    .mud-snackbar-location-top-right .mud-snackbar,
    .mud-snackbar-location-top-left .mud-snackbar {
        pointer-events: auto;
    }

@media (max-width: 960px) {
    .mud-snackbar-location-top-center,
    .mud-snackbar-location-top-right,
    .mud-snackbar-location-top-left {
        padding-top: 70px !important;
    }
}

/* ۲) ریلِ کناری روی نمایشگرهای کوتاه/۱۰۲۴ فشرده می‌شد و برچسب‌ها روی هم
   می‌افتادند. ریشه: `.gta-rail-groups` یک ستونِ flex است و آیتم‌ها با
   `flex-shrink` پیش‌فرض له می‌شدند. حالا هیچ آیتمی کوچک‌تر از اندازه‌ی
   خودش نمی‌شود و اگر جا نشد، ریل اسکرول می‌خورد. */
/* ⚠️⚠️ ۱۱ آگوست: همین `overflow-x: hidden` فلایوتِ زیرمنو را می‌بُرید. فلایوت
   `position:absolute; right:100%` است، یعنی *بیرونِ* جعبه‌ی ریل می‌نشیند؛ به‌محضِ اینکه
   ریل ظرفِ اسکرول شد، هرچه بیرونش بود نامرئی شد (رندر می‌شد، opacity هم ۱ بود، ولی
   بریده می‌شد — برای همین چکِ محاسباتیِ opacity/filter این باگ را نمی‌گیرد؛ باید
   `document.elementFromPoint` وسطِ فلایوت را تست کرد یا چشمی دید).
   ⚠️ `overflow-x: clip` + `overflow-clip-margin` جواب نداد: وقتی یک محور scroll/auto باشد
   مرورگر محورِ دیگر را از `clip` به `hidden` برمی‌گرداند (تستِ زنده، کروم).
   پس اسکرول فقط روی نمایشگرِ واقعاً کوتاه می‌ماند — با پله‌های فشرده‌سازیِ زیر، ۱۴ گروه
   تا ارتفاعِ ~۷۶۰px جا می‌شوند، یعنی روی لپ‌تاپ‌های معمول اصلاً اسکرول لازم نیست و
   فلایوت آزادانه بیرون می‌زند. */
.gta-rail-groups {
    overflow: visible;
    max-height: none;
}
@media (max-height: 760px) {
    .gta-rail-groups {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        max-height: 100%;
    }
    /* این‌جا ریل ظرفِ اسکرول است و فلایوتِ absolute بریده می‌شد ⇒ فلایوت «شناور» (fixed)
       می‌شود و از برشِ ریل درمی‌آید. مختصاتش را JS (index.html، pointerover) در متغیرهای
       --fly-y/--fly-x می‌گذارد: y = وسطِ مربعِ هاورشده، x = لبه‌ی چپِ ریل.
       clamp نمی‌گذارد لبِ بالا/پایینِ صفحه بیرون بزند؛ اگر بلندتر از صفحه بود اسکرول دارد. */
    .mud-drawer-mini.mud-drawer--closed .gta-rail-flyout {
        position: fixed;
        top: var(--fly-top, 96px);
        right: calc(100vw - var(--fly-x, 90px));
        transform: none;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

.gta-rail-grp {
    flex: 0 0 auto;
}

/* یک پله‌ی فشرده‌سازیِ میانی تا در بیشترِ لپ‌تاپ‌ها اصلاً اسکرول لازم نشود */
@media (max-height: 940px) and (min-height: 821px) {
    .gta-rail-sq {
        min-height: 42px;
        margin: 3px auto;
        padding: 5px 3px 4px;
    }
}

/* ═══════ هشدارِ «نیازمندِ تأییدِ شما» — تقویمِ تعطیلات (۲۰۲۶-۰۸-۱۶) ═══════
   چرا این‌جا و نه در `GpSettingView.razor.css`: کلاسِ روی `<MudAlert>` روی div ای
   می‌نشیند که **MudBlazor** رندر می‌کند، پس اتریبیوتِ اسکوپِ CSS ما (`[b-xxx]`)
   را ندارد و قانونِ اسکوپ‌دار هیچ‌وقت match نمی‌کند.
   رنگِ پیش‌فرضِ هشدارِ MudBlazor در حالتِ روز کنتراستِ ۳٫۴۱ دارد (زیرِ AA=۴٫۵)؛
   `contrast_check.py` همین را می‌گرفت. */
.gta-unsure-alert {
    color: #5E3D0A;
}

html.gta-dark .gta-unsure-alert {
    color: #F5D08A;
}

/* ═══════ حالتِ خالیِ استاندارد — `GtaEmptyState` (۲۰۲۶-۰۸-۱۹) ═══════
   خوشه‌ی «ماژول‌های خالی/مرده»: صفحه‌های بی‌داده یا هیچی نشان نمی‌دادند یا یک نوارِ
   باریکِ بی‌دکمه. حالا یک کادرِ وسط‌چین با آیکون + جمله + دکمه‌ی اقدام.
   ⚠️ عمداً سراسری است نه `*.razor.css` — کامپوننت در RCLِ Views.Base است و همین
   کلاس‌ها را چند صفحه‌ی مختلف مصرف می‌کنند. */
.gta-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 40px 20px;
    max-width: 560px;      /* سطرِ ۱۲۰۰px خوانا نیست — متن کوتاه می‌ماند */
    margin: 0 auto;
}

.gta-empty-ico {
    font-size: 56px !important;
    width: 56px;
    height: 56px;
    opacity: .45;
    color: var(--mud-palette-primary);
}

.gta-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* متنِ راهنما با توکنِ متنِ ثانویه — نه رنگِ برند. در حالتِ شب سبزِ کم‌رنگ روی
   مشکی ناخوانا می‌شد (ایرادِ تکرارشونده‌ی صفحه‌های HR در ممیزیِ ۱۷ آگوست). */
.gta-empty-desc,
.gta-empty-extra {
    font-size: .875rem;
    line-height: 1.9;
    color: var(--mud-palette-text-secondary);
}

.gta-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

html.gta-dark .gta-empty-title {
    color: #EAF3EE;
}

html.gta-dark .gta-empty-desc,
html.gta-dark .gta-empty-extra {
    color: rgba(234, 243, 238, .78);
}

html.gta-dark .gta-empty-ico {
    opacity: .6;
    color: #7FC3A0;
}

/* در صفحه‌ی خالی واترمارکِ بزرگِ آرم حسِ «صفحه خراب است» می‌داد. */
.gta-empty-page .gta-watermark {
    opacity: .03;
}

/* نوارهای اطلاع‌رسانیِ داخلِ صفحه‌ها (MudAlert) در حالتِ شب متنِ کم‌رنگ داشتند. */
html.gta-dark .mud-alert-text-info .mud-alert-message,
html.gta-dark .mud-alert-text-success .mud-alert-message {
    color: rgba(234, 243, 238, .88);
}

/* متنِ راهنمای زیرِ عنوان‌ها. قبلاً `opacity:.65` روی رنگِ برند بود ⇒ در حالتِ شب
   سبزِ کم‌رنگ روی مشکی و زیرِ آستانه‌ی WCAG (ممیزیِ ۱۷ آگوست، صفحه‌های HR). */
.gta-hint {
    color: var(--mud-palette-text-secondary);
}

html.gta-dark .gta-hint {
    color: rgba(234, 243, 238, .78);
}

/* کارت‌های «راهنمای سریع» — کلِ کارت باید حسِ کلیک‌شدنی بدهد. */
.tut-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.tut-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--gta-glass-shadow);
}