/* ===========================================================
   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;
  --gta-muted: #6B7686;
  --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;
}

/* پس‌زمینه‌ی 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(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  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; }

/* دکمه‌ها: گوشه‌گرد + گرادیان زمرد ژرف برای 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;
}
@media (hover: hover) and (pointer: fine) {
  .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;
  }
  .mud-data-grid th:hover .column-options,
  .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: 9px 17px; border-radius: 12px;
  color: var(--gta-muted); text-decoration: none !important;
  font-size: 15.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: transparent; 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;
  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; }
.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;
}
.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;
    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;
}
.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;
  transition: opacity .15s ease, visibility .15s ease;
}
.gta-rail-grp:hover .gta-rail-flyout { opacity: 1; visibility: visible; pointer-events: auto; }

.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-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 عددی روی مربع ریل (مثلاً فاکتورهای امروز) */
.gta-rail-badge {
  position: absolute; top: -4px; inset-inline-end: -5px;
  min-width: 19px; height: 19px; 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; }

/* هنگام هاور یک گروه: نوار بالا + محتوا مات شوند (ریل و فلایوت شفاف/برجسته) */
body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-appbar,
body:has(.gta-rail-grp:not(.no-flyout):hover) .mud-main-content {
  filter: blur(5px);
  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); }
}

/* ریل بالای نوار بالا تا فلایوت رویش بیفتد نه پشتش */
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.png') 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);
  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:hover { color: var(--gta-ink); background: rgba(255,255,255,.07); }
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;
}