/* ===========================================================
   GTA — زبان طراحی سامانه‌ی یکپارچه (سراسری روی کل MudBlazor)
   شیشه‌ای (Apple) + نور گرادیانی (Gemini) + سبزِ رسمیِ برند (Pantone 3292C)
   فقط CSS — بدون rebuild اعمال می‌شود
   ⭐ ۲۰۲۶-۰۹-۲۶ «سلیقه‌ی ۲۰۲۶-۰۹» (شاخه‌ی redesign/taste-2026-09): توکن‌های زیر بازتنظیم
   شدند (شبِ سیاهِ واقعی #000 + ظرفِ #1c1c1e، محتوا مات، شیشه فقط روی نوار/منو،
   سایه‌ی نرم به‌جای خط، گوشه‌ی گردتر). پوسته‌ی سراسریِ اجزای MudBlazor در فایلِ جدای
   gta-taste.css است که آخرِ همه بار می‌شود. مشخصه‌ی چشمی: Desktop/claude/erp-redesign-mockup
   =========================================================== */

:root {
  /* رنگ برند روی متغیرهای خود MudBlazor → همه‌جا (دکمه/آیکون/چارت/active) سبز می‌شود */
  --mud-palette-primary: #005432;
  --mud-palette-primary-rgb: 0,84,50;
  --mud-palette-primary-text: #ffffff;
  --mud-palette-primary-darken: #003B23;
  --mud-palette-primary-lighten: #177E4F;
  --mud-palette-secondary: #AA8D44;
  --mud-palette-secondary-rgb: 170,141,68;
  --mud-palette-tertiary: #177E4F;

  /* پس‌زمینه‌ی داخلی 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;

  /* رنگِ رسمیِ کتابِ هویتِ برند (Afra Design، آگوست ۲۰۲۵): سبز Pantone 3292C = #005432،
     طلایی Pantone 874C = #AA8D44. تا ۲۰۲۶-۰۸-۲۵ سامانه هگزهای دیگری داشت که رسمی نبودند. */
  --gta-green: #005432;
  --gta-green-d: #003B23;
  --gta-gold: #AA8D44;
  /* طلاییِ برند (#AA8D44) روی زمینه‌ی روشن فقط ۳٫۲ کنتراست می‌دهد — برای «متن»
     زیرِ حدِ AA است. هرجا طلایی «نوشته» می‌شود این توکن را بردارید، نه --gta-gold.
     روز ۴٫۹۶ روی سفید · شب روشن‌تر می‌شود. سطح/حاشیه/تزئین همان رنگِ رسمی می‌ماند. */
  --gta-gold-ink: #856D35;
  --gta-ink: #141A22;
  /* متنِ فرعی. ۲۰۲۶-۰۸-۱۰ یک پله تیره شد (#6B7686 → #586472): روی شیشه‌ی روز روی
     زمینه‌ی نعنایی aurora فقط ۳٫۹۵–۴٫۳۵ کنتراست می‌داد و ۵۰+ موردِ لب‌مرزیِ داشبورد
     مدیر همه از همین یک توکن می‌آمدند. حالا بدترین حالت ۵٫۲. (شب توکنِ خودش را دارد.) */
  --gta-muted: #586472;
  --gta-accent: #C2606A;
  --gta-line: rgba(60,60,67,.12);
  /* سطوح شیشه‌ای — تو حالت شب خودکار تیره می‌شوند؛ صفحات این‌ها را بردارند نه سفید ثابت */
  /* ۲۰۲۶-۰۹-۲۶: محتوا مات شد (شیشه فقط روی نوار/منو) و خطِ دورِ کارت رفت — مرز = سایه */
  --gta-surface: #ffffff;                  /* کارت آماری/باکس */
  --gta-surface-2: #ffffff;                /* پنل بزرگ‌تر */
  --gta-edge: transparent;                 /* حاشیه — دیگر خطِ دور نداریم */
  --gta-inset: transparent;                /* هایلایت لبه‌ی بالا */

  /* ---- شیشه‌ی صفحات + متن روی شیشه (۲۰۲۶-۰۷-۲۱) ----
     هر صفحه‌ای این‌ها را بردارد، حالت شبش خودکار درست می‌شود و دیگر
     لازم نیست بلوک html.gta-dark جدا بنویسد. مقادیر روز = همان ظاهر فعلی. */
  /* ⚠️ نامِ «glass» تاریخی است: از ۲۰۲۶-۰۹-۲۶ پنلِ صفحه مات است (سلیقه: محتوا مات) */
  --gta-glass: #ffffff;                      /* پنلِ صفحه */
  --gta-glass-strong: #ffffff;               /* سر گرادیان پنل */
  --gta-glass-2: #ffffff;                    /* ته همان گرادیان */
  --gta-glass-border: transparent;           /* حاشیه‌ی پنل — مرز = سایه‌ی نرم */
  --gta-glass-item: rgba(120,120,128,.06);   /* کارت/ردیف داخل پنل (تینتِ ملایم، نه جعبه) */
  --gta-glass-item-2: rgba(120,120,128,.10); /* کپسول/چیپ داخل پنل */
  --gta-glass-item-hover: rgba(120,120,128,.14);
  --gta-glass-sel: rgba(0,84,50,.10);       /* مورد انتخاب‌شده */
  --gta-glass-sel-border: var(--mud-palette-primary);
  --gta-glass-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.14);
  --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: #ffffff;                   /* input/select */
  --gta-field-border: rgba(60,60,67,.2);

  --gta-radius: 22px;        /* کارت/دیالوگ بزرگ (۱۸ → ۲۲؛ سلیقه: «خیلی گرد») */
  --gta-radius-card: 20px;   /* کارت/باکس معمول صفحات (۱۶ → ۲۰) */
  --gta-radius-ctl: 12px;    /* کنترل/دکمه/آیتم لیست */
  --gta-radius-sm: 8px;      /* المان ریز (بج/چیپ کوچک) */
  --gta-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.14);
  --gta-shadow-h: 0 2px 4px rgba(0,0,0,.05), 0 16px 36px -12px rgba(0,0,0,.20);

  /* ───── نردبانِ فاصله و اندازه‌ی متن — «قانونِ آرامش» (۲۰۲۶-۰۹-۰۶ · نسخه‌ی ۳: ۲۰۲۶-۰۹-۱۲) ─────
     ریشه‌ی «همه‌جا شلوغ است» این بود که تم نردبان نداشت: ۵۸ اندازه‌ی متن و ۲۴۱ حالتِ
     padding در ۵۶ فایل. از این به بعد فاصله و اندازه‌ی متن **فقط** از این پله‌ها:
       فاصله  ۴ · ۸ · ۱۲ · ۱۶ · ۲۴ · ۳۲ · ۴۸
       متن    ۱۲ · ۱۳ · ۱۴ · ۱۶ · ۲۰ · ۲۴ · ۳۲   (وزن فقط ۴۰۰ و ۶۰۰)
     عددِ خامِ px/rem برای فاصله یا اندازه‌ی متن در صفحه ننویسید؛ گاردِ آرامش
     (ops/checks/calm_check.py) هر اندازه‌ی خارج از نردبان را می‌شمارد. */
  --gta-space-1: 4px;
  --gta-space-2: 8px;
  --gta-space-3: 12px;
  --gta-space-4: 16px;
  --gta-space-5: 24px;
  --gta-space-6: 32px;
  --gta-space-7: 48px;
  --gta-fs-xs: 12px;    /* لیبلِ ریز، بجِ عدد */
  --gta-fs-sm: 13px;    /* متنِ فرعی، چیپ، سرستون */
  --gta-fs-md: 14px;    /* متنِ بدنه، سلولِ جدول */
  --gta-fs-lg: 16px;    /* عنوانِ کارت/بخش */
  --gta-fs-xl: 20px;    /* عنوانِ صفحه */
  --gta-fs-2xl: 24px;   /* عددِ شاخص */
  --gta-fs-3xl: 32px;   /* عددِ بزرگِ داشبورد/چاپ */
  --gta-fw-strong: 600;

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

  /* ---- سه رنگ معنایی «رشد / هشدار / افت» (۲۰۲۶-۰۸-۰۹) ----
     داشبورد مدیر این سه مفهوم را با هگزِ ثابت می‌نوشت (#157347 / #9a6f14 / #a64853) و
     در حالت شب روی سطحِ تیره محو می‌شد. هر صفحه‌ای این‌ها را بردارد، شبش خودکار درست است.
     هر جفت = رنگ متن + زمینه‌ی کم‌رنگِ همان (برای قرص/بج). کنتراست هر دو حالت ≥ ۴٫۵. */
  --gta-pos: #157347;                       /* سبزِ رشد (متن) */
  --gta-pos-bg: rgba(0,84,50,.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(0,84,50,.055);    /* تینتِ خیلی کم‌رنگِ برند: hover/نوار/سلول */
  --gta-bg: rgba(242,242,245,.82);          /* زمینه‌ی نوارهای چسبان (با blur) */

  /* گرادیان‌های برند — به‌جای نوشتنِ دوباره‌ی هگز در هر صفحه */
  --gta-grad-brand: linear-gradient(140deg,#0A6B41,#00492C);   /* چیپ فعال/دکمه‌ی پررنگ */
  --gta-grad-bar: linear-gradient(90deg,#0A6B41,#005432);      /* پرکنِ نوار افقی */
  --gta-grad-bar-gold: linear-gradient(90deg,#BE9F55,#AA8D44);

  /* ═══════ «سلیقه‌ی ۲۰۲۶-۰۹» — توکن‌های تازه (۲۰۲۶-۰۹-۲۶) ═══════
     صفحه‌ی تازه فقط از این‌ها بردارد؛ حالتِ شب خودکار است (پایین‌تر در html.gta-dark).
     کلاس‌های آماده‌ی صفحه‌ها (gta-card، gta-list، gta-sq، gta-pill، …) در gta-taste.css. */
  --gta-canvas: #eef3f0;  /* brand-check-ignore: تهِ سبزِ برند روی زمینه — خواسته‌ی علیرضا ۲۶ سپ */
  --gta-card: #ffffff;                      /* ظرفِ مات (کارت/جدول/دیالوگ) */
  --gta-card-2: #f1f6f3;  /* brand-check-ignore: تهِ سبزِ برند روی زمینه — خواسته‌ی علیرضا ۲۶ سپ */
  --gta-card-3: #e6eee9;  /* brand-check-ignore: تهِ سبزِ برند روی زمینه — خواسته‌ی علیرضا ۲۶ سپ */
  --gta-sep: rgba(60,60,67,.13);            /* خطِ نیم‌پیکسلیِ بینِ ردیف‌ها — تنها خطِ مجاز */
  --gta-text: #0d1210;
  --gta-text-2: rgba(60,60,67,.74);         /* متنِ فرعی */
  --gta-text-3: rgba(60,60,67,.46);         /* جای‌نگه‌دار/غیرفعال */
  --gta-accent: #005432;                    /* فعال/فوکوس/انتخاب */
  --gta-accent-ink: #005432;                /* متنِ پیوند/فعال */
  --gta-accent-soft: rgba(0,84,50,.09);     /* زمینه‌ی انتخاب/هاور */
  --gta-tonal: rgba(0,84,50,.085);          /* دکمه‌ی فرعی — با تهِ سبزِ برند */
  --gta-glass-bar: rgba(247,252,249,.70);   /* شیشه — فقط نوارِ بالا/ریل */
  --gta-glass-menu: rgba(255,255,255,.82);  /* شیشه — منو/پاپ‌اور/پیامِ کوتاه */
  --gta-glass-ring: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 .5px rgba(0,0,0,.07);
  --gta-blur: blur(22px) saturate(180%);
  --gta-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.14);
  --gta-shadow-float: 0 12px 36px -8px rgba(0,0,0,.22);
  --gta-scrim: rgba(0,0,0,.22);
  --gta-focus: 0 0 0 3px rgba(0,84,50,.28);  /* هاله‌ی فوکوسِ کیبورد */
  /* رنگِ وضعیت (پُر، متنِ سفید) */
  --gta-s-green: #34c759; --gta-s-red: #ff3b30; --gta-s-orange: #ff9500; --gta-s-blue: #007aff;  /* brand-check-ignore: رنگِ وضعیتِ سیستمی (سلیقه §۴)، عمداً غیربرند */
  --gta-s-purple: #5856d6; --gta-s-teal: #30b0c7; --gta-s-pink: #ff2d55; --gta-s-gray: #8e8e93;  /* brand-check-ignore: رنگِ وضعیتِ سیستمی (سلیقه §۴)، عمداً غیربرند */
  --gta-s-gold: #c9a24a; --gta-s-brown: #a2845e;  /* brand-check-ignore: رنگِ وضعیتِ سیستمی (سلیقه §۴)، عمداً غیربرند */
  /* شکل */
  --gta-r-card: 22px; --gta-r-sheet: 28px; --gta-r-menu: 18px; --gta-r-ctl: 12px;
  --gta-r-pill: 999px; --gta-r-icon: 8px;
  /* حرکت */
  --gta-ease: cubic-bezier(.32,.72,0,1);
  --gta-ease-spring: cubic-bezier(.3,1.25,.5,1);
  /* جدولِ متراکم ولی نرم */
  --gta-row-h: 36px;
  --gta-fs-name: 14.5px;                    /* نام در جدولِ متراکم (استثنای عمدیِ نردبان، خواسته‌ی علیرضا) */
  --gta-fs-num: 14px;                       /* عدد در جدول */
}

/* پس‌زمینه‌ی aurora — یک لایه‌ی ثابت پشت همه‌چیز (قطعی، فارغ از لایه‌های MudBlazor) */
html {
  min-height: 100%;
  /* ۲۰۲۶-۰۹-۲۶ علیرضا: «صفحه زیادی سفید و بی‌روحه» ⇒ aurora ی نعناییِ برند برگشت
     همان روز: «نعنایی رو کمتر کن، همه چیز سبز در سبز شد» (نوارِ بالا سبز شده بود) ⇒ شدتِ تابش‌ها ~۴۰٪ */
  background-color: #EEF3EF !important;
  background-image:
    radial-gradient(680px 520px at 0% -3%, rgba(23,126,79,.13), transparent 58%),
    radial-gradient(600px 500px at 100% 0%, rgba(190,159,85,.12), transparent 57%),
    radial-gradient(800px 700px at 102% 103%, rgba(24,160,130,.11), transparent 58%),
    radial-gradient(720px 620px at -2% 103%, rgba(10,107,65,.09), transparent 58%),
    radial-gradient(560px 460px at 72% 26%, rgba(120,220,205,.06), transparent 60%),
    radial-gradient(1300px 920px at 50% 48%, rgba(255,255,255,.35), transparent 64%),
    linear-gradient(135deg,#EFF4F0 0%,#EEF3EF 45%,#F4F1E9 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,#0A6B41,#00492C) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0,84,50,.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(0,84,50,.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) خواناتر بمانند */
:root { --gta-dlg-paper: #ffffff; }
.mud-popover, .mud-menu .mud-paper, .mud-dialog .mud-paper { background: var(--gta-dlg-paper) !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,#0A6B41,#00492C) !important; color: #fff !important; }
.gta-user-initials { font-size: 1rem; font-weight: 800; letter-spacing: .5px; line-height: 1; }
/* ⚠️ در حالتِ شب، قاعده‌ی عمومیِ «html.gta-dark .mud-appbar .mud-avatar» آواتارِ برند را
   خاکستری می‌کرد (دایره‌ی بی‌رنگ به‌جای سبزِ GTA). این قاعده اختصاصی‌تر است و برنده. */
html.gta-dark .mud-appbar .mud-avatar.gta-user-av {
  background: linear-gradient(140deg,#0A6B41,#00492C) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18);
}
html.gta-dark .mud-appbar .mud-avatar.gta-user-av .mud-icon-root { color: #fff !important; }

/* میزبانِ منوی کاربر فقط برای گرفتنِ Escape است — در چیدمان نامرئی */
.gta-user-menu-host { display: contents; }
/* فعال‌کننده‌ی منو: دکمه‌ی واقعی (Tab/Enter/Space) بدونِ ظاهرِ دکمه */
.gta-user-btn {
  background: none; border: 0; padding: 0; margin: 0; line-height: 0;
  border-radius: 50%; cursor: pointer; display: inline-flex;
}
.gta-user-btn:focus-visible { outline: 3px solid var(--gta-green, #005432); outline-offset: 2px; }
html.gta-dark .gta-user-btn:focus-visible { outline-color: #5FBE8D; }

/* قابِ منو: عرضِ ثابتِ راحت (نه ۱۹۰px لاغرِ قبلی) + فاصله‌ی کمِ چسبیده به آواتار */
.gta-user-menu.mud-popover {
  min-width: 268px !important;
  max-width: 300px !important;
  margin-top: 8px !important;            /* زیرِ کارتِ شناورِ نوارِ بالا بنشیند، نه رویش */
  border-radius: var(--gta-radius-card) !important;
  background: rgba(255,255,255,.985) !important;   /* مات‌تر ⇒ منو مثلِ مودالِ شیشه‌ای دیده نشود */
  backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%);
}
html.gta-dark .gta-user-menu.mud-popover { background: rgba(20,29,24,.99) !important; }

.gta-user-menu .mud-menu-list,
.gta-user-menu .mud-list { padding: 6px !important; }

/* ریتمِ یکنواختِ آیتم‌ها (قبلاً Dense بود: کارتِ بزرگ + آیتم‌های لاغر).
   ⚠️ اندازه‌گیریِ زنده‌ی ۲۰۲۶-۰۸-۲۲: ردیف ۵۲px درآمده بود نه ۴۴px — چون
   `<p class="mud-menu-item-text">` از خودِ MudBlazor `margin: 4px 0` دارد و
   روی padding ما سوار می‌شد (۱۰+۴+۲۴+۴+۱۰). حالا آن مارجین صفر می‌شود و
   ارتفاع فقط از `min-height` می‌آید ⇒ عددِ ردیف قابلِ پیش‌بینی و ثابت است. */
.gta-user-menu .mud-menu-item {
  border-radius: var(--gta-radius-ctl) !important;
  padding: 0 12px !important;
  min-height: 48px;                       /* هدفِ لمسِ راحت روی گوشی */
  font-weight: 600;
}
.gta-user-menu .mud-menu-item .mud-menu-item-text { margin: 0 !important; }
.gta-user-menu .mud-menu-item:hover { background: rgba(0,84,50,.09) !important; }
.gta-user-menu .mud-menu-item .mud-menu-item-icon { margin-inline-end: 12px; }
/* ⛔ ریشه‌ی اسکرولِ افقیِ منو (۲۰۲۶-۰۸-۲۲): MudBlazor به این خط‌جدا کلاسِ
   `mud-divider-fullwidth` می‌دهد که `width: 100%` است. با مارجینِ افقیِ ۴px،
   عرضِ جعبه‌اش می‌شد ۲۵۴+۸=۲۶۲ داخلِ محتوایی که فقط ۲۵۴ جا دارد ⇒ ۸px سرریز،
   و چون `.mud-menu-list` خودش `overflow-x: auto` است، نوارِ اسکرولِ افقی می‌آمد.
   `width: auto` یعنی خط‌جدا خودش را با مارجین‌هایش جمع می‌کند (۲۴۶px) ⇒ سرریزِ صفر.
   (این‌جا عمداً `overflow-x: hidden` نگذاشتیم — آن فقط سرریز را پنهان می‌کرد.) */
.gta-user-menu .mud-divider.gta-user-menu-sep {
  margin: 6px 4px !important;
  width: auto !important;
  opacity: .5;
}
html.gta-dark .gta-user-menu .mud-menu-item:hover { background: rgba(63,166,113,.14) !important; }

/* «خروج» تنها کارِ برگشت‌ناپذیرِ منوست ⇒ قرمزِ ملایمِ برند، نه هم‌رنگِ بقیه */
.gta-user-menu .mud-menu-item.gta-menu-danger { color: #B24A56 !important; }
.gta-user-menu .mud-menu-item.gta-menu-danger .mud-icon-root { color: #B24A56 !important; }
.gta-user-menu .mud-menu-item.gta-menu-danger:hover { background: rgba(194,96,106,.14) !important; }
html.gta-dark .gta-user-menu .mud-menu-item.gta-menu-danger,
html.gta-dark .gta-user-menu .mud-menu-item.gta-menu-danger .mud-icon-root { color: #F0A7B0 !important; }
html.gta-dark .gta-user-menu .mud-menu-item.gta-menu-danger:hover { background: rgba(218,127,137,.18) !important; }

/* کارتِ بالای منو = میان‌برِ «حساب کاربری» (بزرگ‌ترین هدفِ کلیک) */
.gta-usercard {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border: 0; background: transparent;
  border-radius: var(--gta-radius-ctl); cursor: pointer;
  text-align: start; font: inherit; color: inherit;
  transition: background .15s ease;
}
.gta-usercard:hover { background: rgba(0,84,50,.09); }
.gta-usercard:focus-visible { outline: 2px solid var(--gta-green, #005432); outline-offset: -2px; }
html.gta-dark .gta-usercard:hover { background: rgba(63,166,113,.14); }
html.gta-dark .gta-usercard:focus-visible { outline-color: #5FBE8D; }

.gta-usercard-av {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg,#0A6B41,#00492C); color: #fff;
  font-weight: 800; font-size: 1rem; letter-spacing: .5px;
}
.gta-usercard-av img { width: 100%; height: 100%; object-fit: cover; }

.gta-usercard-txt { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.gta-usercard-name {
  font-weight: 700; font-size: 1rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gta-usercard-sub {
  font-size: .75rem; line-height: 1.25; font-weight: 600; color: var(--gta-green-d, #003B23);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.gta-dark .gta-usercard-sub { color: #8FD4AF; }
/* بیمه‌ی خوانایی در شب: نامِ کارت به پالتِ MudBlazor وابسته نماند */
html.gta-dark .gta-user-menu .gta-usercard-name { color: #E8F1EB; }
/* پیکانِ «برو به حسابِ کاربری» — تا ۲۰۲۶-۰۸-۲۲ یک svgِ ۲۰px با opacity ۰٫۴ بود:
   آن‌قدر کم‌رنگ که نه دیده می‌شد نه معنی می‌داد. حالا یک چیپِ گردِ سبزِ برند است تا
   با یک نگاه بگوید «این ردیف کلیک‌پذیر است و تو را جایی می‌برد». در RTL پیکان به
   چپ = «جلو رفتن»، و روی هاور یک قدم به همان سمت می‌لغزد. */
.gta-usercard-go {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,84,50,.10); color: var(--gta-green, #005432);
  transition: background .15s ease, transform .15s ease;
}
.gta-usercard-go .mud-icon-root { font-size: 20px; width: 20px; height: 20px; color: inherit; }
.gta-usercard:hover .gta-usercard-go,
.gta-usercard:focus-visible .gta-usercard-go {
  background: rgba(0,84,50,.18); transform: translateX(-2px);
}
html.gta-dark .gta-usercard-go { background: rgba(95,190,141,.16); color: #8FD4AF; }
html.gta-dark .gta-usercard:hover .gta-usercard-go { background: rgba(95,190,141,.26); }
@media (prefers-reduced-motion: reduce) {
  .gta-usercard:hover .gta-usercard-go { transform: none; }
}

/* گاردِ «منو نباید مثلِ مودال باشد»: پرده‌ی پشتِ منو/پاپ‌اور هیچ‌وقت تیره یا مات نشود.
   (دیالوگ و منوی کناری استثنا هستند — پرده‌ی تیره‌شان عمدی است.) */
.mud-overlay:not(.mud-overlay-dialog):not(.mud-overlay-drawer) {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.mud-overlay:not(.mud-overlay-dialog):not(.mud-overlay-drawer) .mud-overlay-scrim:not(.mud-overlay-dark) {
  background-color: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* ===========================================================
   انیمیشنِ ورودِ نرمِ کادرها و بخش‌ها — فقط داخل محتوای صفحه.
   منو/دیالوگ/پاپ‌اور بیرونِ 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,#0A6B41,#00492C) !important;
  box-shadow: 0 8px 20px rgba(0,84,50,.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(0,84,50,.06) !important; }
.mud-table-body .mud-table-row:hover .mud-table-cell { background: rgba(0,84,50,.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(0,84,50,.10); color: var(--gta-green); }
.gta-stat-value { font-size: 2rem; font-weight: 700; color: var(--gta-ink); line-height: 1.1; }
.gta-stat-label { font-size: .875rem; 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.125rem; font-weight: 700; color: var(--gta-ink); }
.gta-section-sub { font-size: .875rem; 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; height: calc(100dvh - 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,#0A6B41,#00492C) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 8px 20px rgba(0,84,50,.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; max-height: calc(100dvh - 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(0,84,50,.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,#0A6B41,#00492C) !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(0,84,50,.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(0,84,50,.09); border: 1px solid rgba(0,84,50,.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: 1rem !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: 16px; 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,#0A6B41,#00492C);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(0,84,50,.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(0,84,50,.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, #0A6B41 0%, #003B23 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(0,59,35,.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(170,141,68,.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: .6875rem !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.25rem !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: 13px !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: 10px; 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,#0A6B41,#00492C);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 8px 20px rgba(0,84,50,.34);
  color: #fff;
}
.gta-rail-sq.active .mud-icon-root { color: #fff !important; }

/* پنجره‌ی فلایوت: چپ مربع، با padding-right پل تا «منطقه‌ی مرده» نباشد */
.gta-rail-flyout {
  position: absolute; top: 50%; right: 100%;
  /* --fly-shift را JS (index.html، placeFly) می‌گذارد: اگر فلایوتِ بلند (مثلِ «تنظیمات») از
     لبِ پایین/بالای صفحه بیرون می‌زد، به اندازه‌ی لازم جابه‌جا می‌شود — ۲۴ سپتامبر ۲۰۲۶:
     روی نمایشگرِ ۹۵۰ آیتم‌های آخرِ «تنظیمات» زیرِ لبه‌ی صفحه بودند و با موس نمی‌رسیدند. */
  transform: translateY(calc(-50% + var(--fly-shift, 0px)));
  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: .75rem; 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: .625rem; 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(0,84,50,.08); transition: .15s;
}
.gta-fly-recent a:hover { background: rgba(0,84,50,.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(0,84,50,.09); color: var(--gta-green); }
.gta-fly-item .mud-icon-root { color: var(--gta-green) !important; font-size: 1.125rem; }
/* بخش بدون صفحه: پیام «به‌زودی» داخل فلایوت */
.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.125rem; }

/* آیتم نقشه‌ی راه (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: .625rem; font-weight: 800; color: var(--gta-gold);
  background: rgba(170,141,68,.13); border: 1px solid rgba(170,141,68,.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: .6875rem; 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.25rem !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: 1rem !important; }
  .gta-rail-sq-label { font-size: 8.5px; -webkit-line-clamp: 2; }
  .gta-rail-badge { min-width: 16px; height: 16px; font-size: .625rem; }
}

/* ریل باید بگذارد فلایوت بیرون ۷۶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: .75rem; 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: 1rem !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(0,84,50,.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(0,84,50,.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, #0A6B41 0%, #003B23 100%);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 8px 22px rgba(0,59,35,.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,#0A6B41,#00492C); box-shadow:0 8px 18px rgba(0,84,50,.30); }
.gta-access-ic .mud-icon-root{ color:#fff!important; }
.gta-access-title{ font-weight:800; font-size:1.125rem; color:var(--gta-ink); }
.gta-access-sub{ font-size:.8125rem; 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,#0A6B41 0%,#003B23 100%); border-radius:16px; color:#fff;
  box-shadow:0 10px 24px rgba(0,59,35,.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(170,141,68,.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:1rem; color:#fff; }
.gta-access-uinfo span{ font-size:.8125rem; opacity:.82; color:#fff; }
.gta-access-user .mud-icon-button .mud-icon-root{ color:#fff !important; }

.gta-access-grp{ font-size:.75rem; 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(0,84,50,.05); }
.gta-sw-label{ font-weight:600; font-size:1rem; color:var(--gta-ink); }

.gta-access-note{ display:flex; align-items:flex-start; gap:8px; margin-top:14px; padding:11px 13px;
  background:rgba(0,84,50,.06); border:1px solid rgba(0,84,50,.12); border-radius:13px;
  font-size:.8125rem; 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(170,141,68,.09); border-color:rgba(170,141,68,.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; }
/* r2-hr-payroll-9: در شب کارت شیشه‌ی سفید می‌ماند و متنِ روشنِ شب رویش خوانده نمی‌شد. */
html.gta-dark .gta-access-card { background: var(--gta-card); border-color: transparent; box-shadow: var(--gta-shadow-card); }
html.gta-dark .gta-sw-row { border-bottom-color: var(--gta-sep); }
html.gta-dark .gta-sw-row:hover { background: rgba(255,255,255,.05); }
html.gta-dark .gta-access-note { background: var(--gta-tonal); border-color: var(--gta-sep); }
html.gta-dark .gta-access-note-custom { background: rgba(170,141,68,.14); border-color: rgba(170,141,68,.30); }

/* ===========================================================
   چیدمان دو-ستونه‌ی صفحه‌ی دسترسی کاربران (راست=کاربر/نقش، چپ=دسترسی‌ها)
   تا همه‌چی در یک نگاه و بدون اسکرول جا شود
   =========================================================== */
.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.6); opacity: .6;   /* ۲۶ سپ علیرضا: ماندالا دیده شود — آلفای خودِ فایل حداکثر ۳۰٪ است */
}
/* بزرگ، گوشه‌ی پایین-چپ (فقط ربعش دیده شود) */
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,#0A6B41,#003B23); color:#fff; font-weight:800; font-size:.75rem; }
.gta-uopt-av img { width:100%; height:100%; object-fit:cover; }
.gta-uopt-name { font-weight:700; font-size:.875rem; color:var(--gta-ink); }
.gta-uopt-meta { font-size:.75rem; 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.125rem; 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:.75rem; font-weight:700;
  color:var(--gta-green); padding:3px 6px; border-radius:8px; transition:.15s; }
.gta-mini-btn:hover { background:rgba(0,84,50,.10); }
.gta-mini-sep { color:var(--gta-line); font-size:.6875rem; }

/* ردیف سوییچ با آیکون */
.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(0,84,50,.09); }
.gta-sw-ic .mud-icon-root { color:var(--gta-green) !important; font-size:1.125rem; }
.gta-sw-row { padding:8px 4px 8px 2px; }

/* نشانگر تغییر ذخیره‌نشده */
.gta-dirty { font-size:.75rem; font-weight:700; color:var(--gta-gold);
  background:rgba(170,141,68,.10); border:1px solid rgba(170,141,68,.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(0,84,50,.05); border-color:rgba(0,84,50,.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(0,84,50,.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(0,84,50,.12) !important; }
.gta-tree-plabel { font-weight:800 !important; font-size:1rem !important; flex:1; }
.gta-tree-count { font-size:.75rem; 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:.875rem; }

/* ===========================================================
   فونت بزرگ‌تر و خواناتر (علیرضا: «فونت‌ها خیلی ریزن») + ردیف‌های بلندتر جدول
   =========================================================== */
/* ارتفاع سطر کم‌تر و جمع‌وجور (علیرضا: «ارتفاع سطرها زیاده»)؛ فونت بزرگ می‌ماند.
   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: .875rem !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: 1rem !important; }
.mud-typography-body1 { font-size: 1rem !important; }
.mud-typography-body2 { font-size: .875rem !important; }
.gta-fly-item { font-size: 16px !important; }
.gta-topnav .mud-nav-link { font-size: 16px !important; }
.gta-sw-label { font-size: 1rem !important; }
.gta-uopt-name { font-size: 1rem !important; }
.mud-button-root { font-size: 1rem !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:1rem; 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:var(--gta-glass-item); border:1px solid var(--gta-glass-border); }
.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(0,84,50,.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-on-glass-title); min-width:42px; }
.gta-log-date { margin-inline-start:auto; font-size:.875rem; color:var(--gta-on-glass-soft); font-weight:600; }

/* کاربر غیرفعال: ردیف کم‌رنگ + برچسب «غیرفعال» */
.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:.6875rem; 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` روی خودِ td می‌نشست. td با flex دیگر خانه‌ی
   جدول نیست: هم‌قدِ ردیف نمی‌شد، پس‌زمینه‌ی ردیف را نمی‌گرفت و یک «قرصِ سفیدِ» جدا و ناهم‌تراز
   کنارِ هر ردیف می‌ساخت — در همه‌ی جدول‌های سامانه. حالا td خانه‌ی معمولی می‌ماند و فقط
   nowrap جلوی شکستن را می‌گیرد؛ دکمه‌ها (inline) کنارِ هم و وسط‌چین عمودی می‌نشینند.
   (روی گوشی MudBlazor خودش خانه را flex می‌کند — آن حالت دست نخورده.) */
.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 > * { vertical-align: middle; }
.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.25rem; }

/* تولتیپ (متن راهنمای دکمه‌ها): پس‌زمینه‌ی تیره + متن سفید (قبلاً سفید روی سفید=نامرئی) */
.mud-tooltip,
.mud-popover.mud-tooltip,
.mud-tooltip-root .mud-tooltip {
  background: rgba(20,26,34,.94) !important;
  color: #fff !important;
  font-size: .8125rem !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: .8125rem; 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(10,107,65,.35) !important; border-inline-start-color: #0A6B41 !important; }
.gta-xcard--green .gta-xcard-head { background: rgba(10,107,65,.06); }
.gta-xcard--green .gta-xcard-head:hover { background: rgba(10,107,65,.11); }
.gta-xcard--green .gta-xcard-ic { background: linear-gradient(135deg,#0A6B41,#003B23); }

.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(170,141,68,.35) !important; border-inline-start-color: #AA8D44 !important; }
.gta-xcard--gold .gta-xcard-head { background: rgba(170,141,68,.08); }
.gta-xcard--gold .gta-xcard-head:hover { background: rgba(170,141,68,.14); }
.gta-xcard--gold .gta-xcard-ic { background: linear-gradient(135deg,#AA8D44,#6F5B2A); }

/* اسکلت لودینگ کارت‌ها (به‌جای خالی‌بودن لحظه‌ای موقع بازشدن مودال) */
@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(0,84,50,.07) !important; color: var(--gta-green-d); }
.mud-tabs .mud-tab.mud-tab-active {
  background: linear-gradient(140deg,#0A6B41,#00492C) !important; color: #fff !important;
  box-shadow: 0 8px 18px rgba(0,84,50,.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,#0A6B41,#00492C) !important; color: #fff !important; }
.mud-alert-text-success { background: rgba(0,84,50,.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; }

/* ── MudText/MudIcon با Color.Secondary ──
   Secondary = طلاییِ رسمیِ برند #AA8D44. روی کارتِ روشن فقط ۳٫۰۵ می‌دهد یعنی زیرِ AA
   (با طلاییِ غیررسمیِ قبلی حتی ۲٫۶۵ بود). لیبل/کپشن باید «طلاییِ متن» باشد؛ سطح و پرکردنِ
   دکمه‌ی Secondary همان رنگِ رسمیِ برند می‌ماند. ۲۰۲۶-۰۸-۲۵ */
.mud-secondary-text { color: var(--gta-gold-ink) !important; }

/* ── 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(0,84,50,.07) !important; }
.mud-popover .mud-list-item.mud-selected-item {
  background: rgba(0,84,50,.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 {
  /* ۲۰۲۶-۰۹-۲۶: شبِ سبز-مشکی → سیاهِ واقعی #000 + ظرفِ #1c1c1e (سلیقه: «شبِ خاکستری/کدر نه») */
  --gta-ink:#F5F5F7; --gta-muted:#9D9DA3; --gta-line:#2C2C2E;
  --gta-surface: #1C1C1E; --gta-surface-2: #1C1C1E;
  --gta-edge: transparent; --gta-inset: transparent;
  --gta-shadow:0 1px 2px rgba(0,0,0,.6), 0 10px 30px -14px rgba(0,0,0,.9);
  --gta-shadow-h:0 2px 6px rgba(0,0,0,.7), 0 18px 40px -14px rgba(0,0,0,.95);
  --gta-negative: #DA7F89;   /* روی ردیف منفیِ شب کنتراست ۴٫۹ می‌دهد */
  /* شیشه‌ی شب: همان شیشه، فقط تیره — و متن روی آن سفید/یشمی پررنگ */
  --gta-glass: #1C1C1E;
  --gta-glass-strong: #1C1C1E;
  --gta-glass-2: #1C1C1E;
  --gta-glass-border: transparent;
  --gta-glass-item: rgba(255,255,255,.05);
  --gta-glass-item-2: rgba(255,255,255,.08);
  --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 1px 2px rgba(0,0,0,.6), 0 10px 30px -14px rgba(0,0,0,.9);
  --gta-on-glass:#F5F5F7;
  --gta-on-glass-soft:#9D9DA3;
  --gta-on-glass-title:#7FD1A6;  /* brand-check-ignore: سبزِ روشنِ برند برای متن روی سیاه؛ #005432 روی #000 زیرِ AA است */
  --gta-on-glass-sel:#A9E3C4;
  --gta-on-glass-weight: 500;
  --gta-field-bg: #2C2C2E;
  --gta-field-border: rgba(235,235,245,.16);
  /* سه رنگ معنایی در شب: متن روشن‌تر، زمینه‌ی قرص از خودِ همان رنگ (نه سفید) */
  --gta-pos:#5FBE8D;   --gta-pos-bg: rgba(95,190,141,.16);
  --gta-gold-ink:#CFB479;
  --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(0,0,0,.72);
  /* ⚠️ توقفِ روشن قبلاً سبزِ روشن‌تر بود؛ متنِ سفیدِ روی آن فقط ۴٫۲۳ می‌داد (حد ۴٫۵).
     دیده نمی‌شد چون ابزارِ کنتراست گرادیان را اصلاً نمی‌خواند (فیکس ۱۰ آگوست).
     #0A6B41 همان توقفِ حالتِ روز است و ۶٫۶ می‌دهد. */
  --gta-grad-brand: linear-gradient(140deg,#0A6B41,#005432);
  --gta-grad-bar: linear-gradient(90deg,#3FA671,#217A4C);
  --gta-grad-bar-gold: linear-gradient(90deg,#C9AF71,#AA8D44);
  /* «سلیقه‌ی ۲۰۲۶-۰۹» — نسخه‌ی شبِ توکن‌های تازه */
  --gta-canvas: #020705;  /* brand-check-ignore: تهِ سبزِ برند روی زمینه — خواسته‌ی علیرضا ۲۶ سپ */
  --gta-card: #151D19;  /* brand-check-ignore: تهِ سبزِ برند روی زمینه — خواسته‌ی علیرضا ۲۶ سپ */
  --gta-card-2: #202B25;  /* brand-check-ignore: تهِ سبزِ برند روی زمینه — خواسته‌ی علیرضا ۲۶ سپ */
  --gta-card-3: #2B3A32;  /* brand-check-ignore: تهِ سبزِ برند روی زمینه — خواسته‌ی علیرضا ۲۶ سپ */
  --gta-sep: rgba(84,84,88,.42);
  --gta-text: #F5F5F7;
  --gta-text-2: rgba(235,235,245,.62);
  --gta-text-3: rgba(235,235,245,.34);
  --gta-accent: #3FA671;
  --gta-accent-ink: #7FD1A6;  /* brand-check-ignore: سبزِ روشنِ برند برای متن روی سیاه؛ #005432 روی #000 زیرِ AA است */
  --gta-accent-soft: rgba(63,166,113,.17);
  --gta-tonal: rgba(95,175,135,.20);  /* brand-check-ignore: تهِ رنگِ سبزِ برند برای دکمه‌ی ملایم در شب (هم‌خانواده‌ی --gta-accent-ink) */
  --gta-glass-bar: rgba(18,32,25,.74);
  --gta-glass-menu: rgba(20,35,28,.86);
  --gta-glass-ring: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 .5px rgba(255,255,255,.07);
  --gta-shadow-card: 0 1px 2px rgba(0,0,0,.6), 0 10px 30px -14px rgba(0,0,0,.9);
  --gta-shadow-float: 0 18px 48px -10px rgba(0,0,0,.85);
  --gta-scrim: rgba(0,0,0,.55);
  --gta-focus: 0 0 0 3px rgba(63,166,113,.45);
  --gta-s-green: #30d158; --gta-s-red: #ff453a; --gta-s-orange: #ff9f0a; --gta-s-blue: #0a84ff;  /* brand-check-ignore: رنگِ وضعیتِ سیستمی (سلیقه §۴)، عمداً غیربرند */
  --gta-s-purple: #5e5ce6; --gta-s-pink: #ff375f;  /* brand-check-ignore: رنگِ وضعیتِ سیستمی (سلیقه §۴)، عمداً غیربرند */
  background-color:#000000 !important;
  background-image:
    radial-gradient(760px 520px at 104% -8%, rgba(23,126,79,.18), transparent 62%),
    radial-gradient(640px 460px at -6% 108%, rgba(170,141,68,.08), transparent 62%),
    linear-gradient(#000000,#000000) !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 { --gta-dlg-paper: #1C1C1E; }
html.gta-dark .mud-dialog .mud-paper { background: var(--gta-dlg-paper) !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(23,126,79,.10) !important; }
html.gta-dark .mud-table-body .mud-table-row:hover .mud-table-cell { background: rgba(23,126,79,.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: 13px;
  }
  /* 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;
    /* ⭐ ۵ سپتامبر ۲۰۲۶ — بدونِ این سه خط، سلول به عرضِ min-contentِ جدول کش می‌آمد
       (اندازه‌گیریِ داورِ مستقل روی ۳۹۰px: هر td عرضِ ۴۱۷ از left=-59) و در
       راست‌به‌چپ از لبه‌ی چپ بیرون می‌زد ⇒ «نقش»، «آخرین ورود» و «رمز کِی عوض شد»
       روی گوشی کاملاً خالی دیده می‌شدند.
       ⚠️ هیچ گاردی این را نگرفت: `document.scrollWidth` دقیقاً ۳۹۰ می‌ماند، چون
       بریدگی داخلِ ظرف است نه در سطحِ سند. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* مقدارِ بلند زیرِ برچسبِ خودش می‌رود به‌جای اینکه بیرون بزند */
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  /* خودِ جدول هم نباید از ظرفش پهن‌تر شود.
     ⚠️ `width:100%` روی یک `display:table` کافی **نیست**: جعبه‌ی جدول هیچ‌وقت زیرِ
     min-contentِ ستون‌هایش جمع نمی‌شود. اندازه‌گیریِ زنده روی ۳۹۰px: ظرف ۳۳۲،
     جدول ۴۲۳ — یعنی سلول‌ها به عرضِ جدول کش می‌آمدند و در راست‌به‌چپ از لبه‌ی چپ
     بیرون می‌زدند. در حالتِ پشته‌ای ردیف‌ها از قبل `display:block` بودند؛ کاملش
     می‌کنیم تا جدول هم مثلِ یک بلوکِ معمولی عرضِ ظرفش را بگیرد. (۵ سپتامبر ۲۰۲۶)
     این قاعده همه‌ی جدول‌های پشته‌ای سامانه را می‌گیرد، چون همه همین بریدگی را
     داشتند — و هیچ گاردی نمی‌گرفتش، چون document.scrollWidth دقیقاً ۳۹۰ می‌ماند. */
  .mud-table.mud-xs-table .mud-table-root,
  .mud-table.mud-xs-table .mud-table-body,
  .mud-table.mud-xs-table .mud-table-container {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .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: .75rem; 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: .75rem; }
  /* آیکون تب‌ها در گوشی حذف — هر ۴ تب (مثل صفحه‌ی نگین‌ها) کامل جا شوند */
  .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; }
  /* ⛔ درسِ گران (۲ سپتامبر ۲۰۲۶): این الگو از روزِ اول (۱۹ آگوست) **بی‌صدا بی‌اثر بود**.
     خودِ MudBlazor این‌ها را دارد و ویژگی‌شان (0,1,3 و 0,1,4) از `.gta-cards thead` (0,1,1)
     و `.gta-cards tbody td` (0,1,2) بالاتر است:
        .mud-simple-table table thead   { display: table-header-group }
        .mud-simple-table table tbody   { display: table-row-group }
        .mud-simple-table table * tr>td { display: table-cell }
     نتیجه: روی گوشی جدول کارت نمی‌شد، فقط به عرضِ ~۳۰۰px له می‌شد و متن حرف‌به‌حرف
     عمودی می‌ریخت — فقط برچسبِ ::before کار می‌کرد و همین گمراه‌کننده بود.
     پس هر جای این بلوک که `display` می‌گذارد **باید `!important` داشته باشد.**
     مربوط به ۸ صفحه است، نه یکی: فروشگاه‌ها، سفارش‌ها، پست، دیجی‌کالا، گزارش‌ها،
     داشبوردِ فروشِ اینترنتی، انبارگردانیِ نگین و مودالِ کیف پول. */
  .gta-cards .mud-table-container { overflow-x: visible !important; max-height: none !important; }
  .gta-cards table, table.gta-cards { display: block !important; width: 100% !important; }
  .gta-cards thead { display: none !important; }
  /* ⚠️ tfoot هم لازم است: ردیفِ «جمع کل» (گزارش‌ها) بیرونِ tbody است و بدونِ این،
     روی گوشی به‌شکلِ یک ردیفِ جدولیِ خام و بیرون‌زده می‌ماند. */
  .gta-cards :is(tbody, tfoot), .gta-cards :is(tbody, tfoot) tr, .gta-cards :is(tbody, tfoot) td { display: block !important; }
  .gta-cards :is(tbody, tfoot) 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 :is(tbody, tfoot) tr:hover { background: var(--gta-glass, rgba(255,255,255,.85)) !important; }
  .gta-cards :is(tbody, tfoot) td {
    display: flex !important; 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 :is(tbody, tfoot) td:not(:last-child) { border-bottom: 1px dashed rgba(15,42,28,.08) !important; }
  html.gta-dark .gta-cards :is(tbody, tfoot) td:not(:last-child) { border-bottom-color: rgba(255,255,255,.09) !important; }
  .gta-cards :is(tbody, tfoot) td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .75rem; font-weight: 700; color: var(--gta-muted);
  }
  .gta-cards :is(tbody, tfoot) td:empty { display: none !important; }
  /* max-width اینلاینِ ستونِ ورودی (مثلِ انبارگردانیِ نگین) در کارت باعث می‌شد کلِ ردیف
     ۱۴۰px پهنا بگیرد؛ در حالتِ کارتی هر سلول تمام‌عرض است و ورودی باید انگشت‌خور باشد. */
  .gta-cards :is(tbody, tfoot) td { max-width: none !important; }
  .gta-cards :is(tbody, tfoot) td .mud-input-control { min-width: 128px; }
  /* ستونِ چسبانِ دسکتاپ (os-sticky-end، ستونِ اولِ digi-months …) در کارت بی‌معنی است */
  .gta-cards :is(tbody, tfoot) td, .gta-cards :is(tbody, tfoot) th { position: static !important; box-shadow: none !important; }
  /* سلول‌های کم‌اهمیت تا وقتی «جزئیات» زده نشده پنهان‌اند ⇒ کارت کوتاه می‌ماند */
  .gta-cards :is(tbody, tfoot) 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: .75rem; 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.5rem !important; }
  .gta-stat .mud-typography-h5 { font-size: 1.125rem !important; line-height: 1.35; }
  .gta-stat .mud-typography-body2, .gta-stat .mud-typography-caption { font-size: .75rem !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(0,84,50,.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: .875rem; 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: .875rem;
  background: linear-gradient(140deg,#0A6B41,#00492C);
  box-shadow: 0 6px 16px rgba(0,84,50,.3);
}
.gta-pwa-banner .x { border: 0; background: transparent; color: var(--gta-muted); padding: 8px 6px; font-size: .8125rem; }
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; } }
/* کپسولِ شناورِ «زنگِ سفارش خاموش است» پایین-چپِ لپ‌تاپ روی آخرین ردیفِ جدول (مدادِ ویرایش، دکمه‌ها) می‌افتاد
   (نگهبانِ ظاهری، ۲۹ سپ: مواد اولیه، کاربران، ثبتِ سفارش) ⇒ تا وقتی هست، ته‌صفحه جا برایش باز می‌ماند. */
@media (min-width: 961px) { html:has(.gta-oa-consent) .mud-main-content { padding-bottom: 76px !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(0,59,35,.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 فقط در قابِ خودِ سایت. داخلِ قابِ چاپ (body.gta-printing) برگه‌ها
       سربرگِ <header> دارند (دستور پرداخت، فیش) — تا ۱۷ سپتامبر ۲۰۲۶ این‌جا بی‌شرط بود و آرم،
       عنوان و جمعِ کل را از کاغذِ واقعی پاک می‌کرد، در حالی که عکسِ قاب (بدونِ media=print)
       کامل نشانش می‌داد. */
    body:not(.gta-printing) header, body:not(.gta-printing) nav, body:not(.gta-printing) 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; }
}


/* ═══ چاپِ پوسترِ «لیست قیمت» (body.pl-printing، از gtaPriceListPrint) ═══
   عمداً این‌جاست نه در OsPriceListView.razor.css: باید به المان‌های *بیرونِ* کامپوننت
   (قابِ MudBlazor) برسد و Blazor اتریبیوتِ scope را فقط به آخرین سلکتور می‌چسباند،
   پس `.mud-container` داخلِ فایلِ scoped هرگز match نمی‌شد.
   با کلاسِ body محدود شده تا چاپِ فاکتور/برگه‌ی سفارش دست‌نخورده بماند. */
@media print {
    body.pl-printing .mud-rtl-provider,
    body.pl-printing .mud-layout,
    body.pl-printing .mud-main-content,
    body.pl-printing .mud-container {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    /* ⭐ نگهبانِ اصلی: هرچه در مسیرِ پوستر نیست (gtaPriceListPrintPrepare علامتش
       می‌زند). این‌طور نامِ کلاسِ قابِ سایت را حدس نمی‌زنیم — درسِ `mud-tabs-toolbar`
       که با ارتقای MudBlazor به `mud-tabs-tabbar` تغییرِ نام داد و قاعده بی‌صدا مرد،
       پس نوارِ تب سرِ چاپ می‌آمد. */
    body.pl-printing .pl-print-hide { display: none !important; }

    body.pl-printing .gta-watermark,
    body.pl-printing .no-print { display: none !important; }

    /* the generic print block above hides every <header> (site chrome), which also
       swallowed the poster's own <header class="pl-head"> — the brand logo never
       reached paper. Bring the poster's head back explicitly. */
    body.pl-printing .pl-poster .pl-head { display: block !important; }

    /* پوستر تمامِ عرضِ کاغذ را می‌گیرد و سایه/گوشه‌ی گردِ صفحه‌ای نمی‌خواهد */
    body.pl-printing .pl-wrap { display: block !important; }

    body.pl-printing .pl-poster {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        break-inside: avoid;
        /* بدونِ این، کروم زمینه‌ی سبز و طلاییِ پوستر را چاپ نمی‌کند و کاغذ سفید درمی‌آید */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.pl-printing .pl-poster * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* ── تمام‌صفحه‌ی A4 (حاشیه‌ی @page صفر است، از gtaPriceListPrint) ──
       پوستر دقیقاً هم‌قدِ کاغذ می‌شود و سبزِ زمینه تا لبه می‌رود — نوارِ سفیدِ
       زیرِ پوستر حذف. A5 هم‌نسبتِ A4 است و با مقیاسِ خودِ چاپگر جا می‌افتد.
       ارتفاع عمداً یک مو زیرِ 297mm است تا گردکردنِ زیرپیکسلی صفحه‌ی دومِ
       خالی نسازد؛ overflow پوستر از قبل hidden است. */
    /* بدنه عمداً خیلی کوتاه‌تر از یک صفحه قفل می‌شود: محتوای جریان همه پنهان است
       و پوستر fixed است، پس این ارتفاع فقط تعدادِ صفحه‌ها را تعیین می‌کند.
       296.5mm خودش با گردکردنِ زیرپیکسلی یک صفحه‌ی دومِ شبح می‌ساخت. */
    body.pl-printing {
        height: 250mm;
        overflow: hidden;
    }

    /* پوستر از جریانِ سند جدا و به چهار لبه‌ی کاغذ سنجاق می‌شود — فاصله‌ی
       بالای قالبِ سایت و شکستنِ صفحه هر دو بی‌اثر می‌شوند. برای اینکه fixed
       واقعاً نسبت به کاغذ باشد، انیمیشن/ترنسفرمِ اجدادش خنثی می‌شود
       (نقشِ گوشه‌ها داخلِ پوسترند و ترنسفرمِ آینه‌ای‌شان دست نمی‌خورد). */
    body.pl-printing .mud-main-content,
    body.pl-printing .mud-main-content > *,
    body.pl-printing .gta-os-tabs,
    body.pl-printing .pl-wrap {
        animation: none !important;
        transform: none !important;
    }

    body.pl-printing .pl-poster {
        position: fixed !important;
        /* نیم‌میلی‌متر بیرون از لبه (bleed) تا هیچ نوارِ موییِ سفیدی نماند */
        inset: -0.5mm !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column;
        /* قابِ لبه‌ی پوستر حالا لبه‌ی کاغذ است و هیچ چاپگری آن‌جا را چاپ
           نمی‌کند؛ حذف می‌شود و قاب/نقش‌ها به ناحیه‌ی امن (~۷mm تو) می‌روند. */
        border: none !important;
        padding: 13mm 11mm 10mm !important;
    }

    body.pl-printing .pl-poster::before { inset: 7mm; }

    body.pl-printing .pl-c-tl { top: 8.5mm; left: 8.5mm; }
    body.pl-printing .pl-c-tr { top: 8.5mm; right: 8.5mm; }
    body.pl-printing .pl-c-bl { bottom: 8.5mm; left: 8.5mm; }
    body.pl-printing .pl-c-br { bottom: 8.5mm; right: 8.5mm; }

    /* جدول کشسان: سرستون آزاد، ۱۱ ردیفِ داده هم‌قد کش می‌آیند تا کاغذ پر شود؛
       سر و پانوشت‌ها قدِ خودشان می‌مانند. min-height لمسی روی کاغذ بی‌معناست. */
    body.pl-printing .pl-head  { flex: 0 0 auto; }
    body.pl-printing .pl-table { flex: 1 1 auto; grid-template-rows: auto; grid-auto-rows: 1fr; }
    body.pl-printing .pl-notes { flex: 0 0 auto; }
    body.pl-printing .pl-td    { min-height: 0; }
}

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

/* ───── ✨ نشانه‌ی «حدسِ سامانه» زیرِ فیلدِ فروشگاه (فرمِ ثبتِ سفارش) ─────
   این خط تنها چیزی است که به اپراتور می‌گوید فروشگاه را خودش نگذاشته — و فروشگاه
   روی فیِ پیشنهادی اثر دارد. پس خوانایی‌اش شرطِ وجودِ آن قابلیت است، نه تزئین.

   ⚠️ چرا صریح رنگ می‌گیرد: رنگِ پیش‌فرضِ `.mud-input-helper-text` همان
      `--gta-on-glass-soft` است که در شب `#9FB0A7` می‌شود و روی کارتِ تیره فقط
      **۳٫۱۲** کنتراست می‌دهد — زیرِ AA. (سنجشِ مرورگر، ۵ سپتامبر ۲۰۲۶؛ گاردِ
      `contrast_check` این را نگرفت چون در بارگذاریِ ساده حدسی وجود ندارد که
      خطش رندر شود.) با `--gta-on-glass` در روز و شب راحت از AA رد می‌شود.
   ⚠️ سلکتور با `#` نوشته شده تا از `.mud-input-helper-text`ِ خودِ MudBlazor
      قوی‌تر باشد بدونِ `!important` — همان تله‌ای که یک‌بار `gta-cards` را
      دو هفته بی‌صدا کشت. */
#os-store-pick .mud-input-helper-text,
#os-pay-first .mud-input-helper-text {
    color: var(--gta-on-glass);
    font-weight: 600;
    /* ⚠️ MudBlazor روی خطِ راهنما `opacity` هم می‌گذارد و گاردِ `contrast_check`
       فقط `color` را می‌خواند، نه opacity را ⇒ خطِ «حدسِ سامانه»ی کادرِ واریز با
       نمره‌ی سبزِ کاذب رد می‌شد در حالی که سنجشِ پیکسلیِ داورِ مستقل در روز
       ۴٫۴۸ داد (زیرِ AA). این‌جا صریح ۱ می‌شود تا رنگِ بالا همان چیزی باشد که
       چشم می‌بیند. (نقصِ خودِ گارد در levelup مانیفست ثبت شد.) */
    opacity: 1;
}

/* ───── کشیدن‌ورهاکردن و Ctrl+V برای عکسِ محصول (فرمِ ثبتِ سفارشِ فروشِ اینترنتی) ─────
   کلاس‌ها را gta-os-image-drop.js می‌گذارد و برمی‌دارد. عمداً این‌جاست نه در
   OsOrderEntryView.razor.css: هدفِ کلاس یک <MudPaper> است و Blazor اتریبیوتِ scope را
   به خروجیِ کامپوننتِ فرزند نمی‌چسباند (همان درسی که پایین‌تر برای .os-stat-clickable
   نوشته شده). رنگ‌ها از توکن‌های --gta-pos گرفته شده‌اند تا در حالتِ شب هم درست باشند. */
.os-drop-over {
    outline: 2px dashed var(--gta-pos);
    outline-offset: -3px;
    background: var(--gta-pos-bg) !important;
}
/* ناحیه‌ی عکس پس‌زمینه‌ی خاکستریِ inline دارد و رنگِ کارت رویش نمی‌نشیند؛
   بدونِ این خط، نصفِ بالای کارت هنگامِ کشیدن سبز نمی‌شد. */
.os-drop-over .os-img-slot { background: transparent !important; }
.os-drop-over .os-drop-hint { color: var(--gta-pos); font-weight: 600; }

@keyframes os-drop-flash {
    0%   { box-shadow: 0 0 0 0 var(--gta-pos); }
    100% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
}
.os-drop-flash { animation: os-drop-flash .85s ease-out; }
/* قلمی که عکسش دارد کشیده می‌شود (جابه‌جاییِ بینِ قلم‌ها) — تا معلوم باشد مبدأ کدام است */
.os-drag-source { opacity: .45; }
/* عکسِ نشسته روی قلم کشیدنی است؛ نشانگر همین را بگوید */
.os-img-slot img { cursor: grab; }
.os-img-slot img:active { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .os-drop-flash { animation: none; } }

/* راهنمای «بکش یا Ctrl+V» روی گوشی جا اشغال نکند — نه کشیدن معنا دارد نه Ctrl+V.
   ⚠️ عمداً شرطِ عرض است نه .gta-touch: لپ‌تاپِ لمسی هم gta-touch می‌گیرد ولی موس دارد
   و راهنما آن‌جا لازم است. (همان تله‌ای که یک‌بار هاورِ .os-link را کشت.) */
@media (max-width: 600px) { .os-drop-hint { display: none; } }

/* بندانگشتیِ عکسِ فیش — مشترکِ فرمِ ثبت و فهرستِ تراکنش‌ها */
.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; }
    /* ۳ اکتبر ۲۰۲۶: کاغذِ ۲۹۷mm (~۱۱۲۲px) روی لپ‌تاپِ ۱۰۲۴ کلِ صفحه را به پهلو سرریز می‌کرد و لبه‌ی چپش
       (با وسط‌چینِ ساده) از دسترس بیرون می‌افتاد ⇒ اسکرولِ افقی فقط داخلِ میز، وسط‌چینِ «امن». چاپ دست نمی‌خورد. */
    .os-sheet-stage { max-width: 100%; overflow-x: auto; align-items: safe center; }
}

/* هر خانه‌ی عددی/کدپستی/موبایل باید 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;
             /* #6E7A84 روی #D7D7D7 نسبتِ ۳٫۰۵ می‌داد؛ «مهر و امضا» جای امضای رسمیِ فاکتور است */
             color: #46525A; 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; }
/* سفارشِ بی‌عکس: کادر خالیِ گنگ نماند، یک خطِ توضیح وسطش بنشیند */
/* ⚠️ رنگِ قبلی #8A8A8A روی خانه‌ی خاکستریِ #D7D7D7 نسبتِ ۲٫۴ می‌داد — زیرِ AA و
   اولین چیزی که در فتوکپی محو می‌شود (گاردِ کنتراستِ ۱۱ سپتامبر). */
.rf-c-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
              font-size: 8pt; color: #4A5760; }

/* ───────── QR (SVG از رمزگذارِ خودمان) ───────── */
.os-qr svg { display: block; }
.os-qr-sm svg { width: 14mm; height: 14mm; }
/* ⚠️ ۱۱ سپتامبر ۲۰۲۶ یک‌بار این QR را «۱۳ ⟶ ۱۷ میلی‌متر» کردم چون گاردِ فتوکپی می‌گفت در
   هر سه تنظیم خوانده نمی‌شود. بعد معلوم شد **گارد** اشتباه می‌کرد، نه کاغذ: ناحیه از عکسِ
   کلِ برگه (۴۴۹۲×۳۱۷۶ پیکسل) بریده شده بود و مرورگر عکسِ عنصرِ به این بزرگی را با مقیاسِ
   کمتر رستر و بعد بزرگ می‌کند ⇒ ماژول‌های ریز به‌هم می‌چسبند. عکسِ جداگانه‌ی خودِ `.os-qr`
   با همان تنظیمات کاملاً واضح است و رمزگشای zxing در هر سه آستانه «۹۰۰۰۱۴» را می‌خواند.
   ⇒ اندازه به همان ۱۳ میلی‌متری برگشت که علیرضا تأیید کرده بود.
   🔴 درسِ ابزار: ناحیه‌ی کدِ ماشین‌خوان را از عکسِ **خودِ همان عنصر** (یا از PDF) بردار،
      نه از رسترِ غول‌آسای کلِ برگه — وگرنه گیت قرمزِ دروغ می‌دهد. */
.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); max-height: calc(100dvh - 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: 1rem;
    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);
}

/* ══ شمارنده‌ی کاراکترِ فیلدها در راست‌به‌چپ (۲۰۲۶-۰۸-۲۳) ══════════════════
   MudBlazor زیرِ فیلدِ Counter‌دار می‌نویسد «0 / 500». حالا که مودال‌ها
   راست‌به‌چپ شده‌اند، الگوریتمِ دوجهته‌ی مرورگر جای دو عدد را عوض می‌کند و
   کاربر «500 / 0» می‌بیند — یعنی فکر می‌کند سقفِ نوشتنش صفر است.
   ⚠️ `unicode-bidi: plaintext` (نه `direction: ltr`): این یکی فقط ترتیبِ
   خواندن را درست می‌کند و به `direction`ِ خودِ المان دست نمی‌زند، وگرنه
   `ms-auto`ی MudBlazor برعکس می‌شد و شمارنده از چپ به راست می‌پرید.
   (MudBlazor کلاسِ اختصاصی برای شمارنده ندارد؛ تنها نشانه‌اش همین ms-auto است.) */
.mud-input-control-helper-container .mud-input-helper-text > .ms-auto {
    unicode-bidi: plaintext;
}

/* ══ همه‌ی مودال‌های سامانه — لنگرِ دکمه‌ی ✕ (۲۰۲۶-۰۸-۲۳) ═════════════════
   MudBlazor دکمه‌ی بستن را `position:absolute; top:8px` می‌گذارد، ولی به خودِ
   `.mud-dialog` و به `.mud-dialog-title` هیچ `position` نمی‌دهد. پس برای
   مودالِ وسط‌چین (حالتِ پیش‌فرضِ کلِ سامانه) نزدیک‌ترین جدِ موقعیت‌دار همان
   کانتینرِ `position:fixed`ِ تمام‌صفحه است ⇒ ✕ به گوشه‌ی *صفحه‌ی نمایش*
   می‌چسبد، نه به گوشه‌ی مودال. یک خط، برای هر ۵۰ مودال.
   (بی‌اثر روی چیدمان: هیچ top/left ی ست نمی‌شود. مودال‌های گوشه‌نشینِ
    MudBlazor خودشان `position:absolute`ِ خاص‌ترِ خودشان را دارند.) */
.mud-dialog {
    position: relative;
}

/* ⚠️ راست‌به‌چپیِ مودال‌ها دیگر این‌جا وصله نمی‌شود:
   از ۲۰۲۶-۰۸-۲۳ کلِ MudDialogProvider/Popover/Snackbar در `App.razor` داخلِ
   یک MudRTLProvider نشسته‌اند، پس جهت و کلاسِ `mud-dialog-rtl` سراسری است.
   (قاعده‌ی خودِ MudBlazor: `.mud-dialog.mud-dialog-rtl .mud-button-close`
    خودش ✕ را به چپ می‌برد — دیگر لازم نیست دستی جابه‌جایش کنیم.) */

/* ── حالتِ فوریِ همان مودال: پیامِ بحرانی که وسطِ کار رسیده (۲۰۲۶-۰۸-۲۳) ──
   کاربر باید در نگاهِ اول بفهمد این با خلاصه‌ی همیشگیِ سرِ ورود فرق دارد،
   ولی نه با چشمک‌زدن و لرزیدن (که فقط اضطراب می‌سازد و خوانده‌شدن را کمتر
   می‌کند) — یک لبه‌ی قرمزِ بالا و سایه‌ی کمی سنگین‌تر کافی است. */
.mud-dialog.gta-digest-urgent {
    border-top: 3px solid var(--mud-palette-error);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .32);
}

/* ⚠️ دکمه‌های پایینِ مودال را خودِ MudBlazor رندر می‌کند و اتریبیوتِ scopeِ Blazor
   نمی‌گیرند — یعنی قواعدشان در `NotificationDigestDialog.razor.css` مرده است.
   برای همین عمداً این‌جا (غیرِ scoped) نوشته شده‌اند. */
.mud-dialog.gta-digest .gd-btn {
    border-radius: var(--gta-radius-ctl);
}

@media (max-width: 600px) {
    .mud-dialog.gta-digest .gd-btn {
        width: 100%;
        margin: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   👆 هدفِ لمسیِ ۴۴px روی گوشی — قاعده‌ی سراسری (۲۰۲۶-۰۸-۲۳)

   ممیزیِ اجزای بازشدنی (`ops/checks/component_audit.py`، حالتِ ۳۹۰×۸۴۴) روی ۶ صفحه
   ۱۳۷ هدفِ لمسیِ زیرِ ۴۴px شمرد: ردیف‌های دراورِ موبایل ۳۱۰×۳۹، آیتم‌های منوی
   «کارهای بیشتر» ۳۱۹×۳۳، آیتم‌های سلکت ۱۵۶×۳۷، چک‌باکس‌های منوی «ستون‌ها» ۳۲×۳۲،
   دکمه‌های مودال (انصراف/ذخیره/دوربین) ۸۳–۹۹×۳۶–۳۹، دکمه‌ی ✕ و «پاک‌کردن» ۲۶×۲۶ تا ۳۸×۳۸،
   و پای زنگِ اعلان («همه خوانده شد» ۹۴×۲۴ و «مشاهده‌ی همه‌ی پیام‌ها» ۳۲۴×۳۸).
   انگشت ~۹mm است؛ زیرِ ۴۴px یعنی اپراتور یا نمی‌زند یا **دکمه‌ی بغلی** را می‌زند.

   ⚖️ اصل: فونت/آیکون/مارجین دست‌نمی‌خورد — فقط **جعبه‌ی لمس** کشیده می‌شود
   (min-height / min-width). پس چیدمان همان‌قدر جمع‌وجور می‌ماند و فقط چند پیکسل
   قد می‌کشد. روی دسکتاپ (بالای ۹۶۰px) هیچ‌چیز عوض نمی‌شود.

   ⛔ استثناها (اگر بزرگ شوند می‌شکنند):
     .mud-switch-base   شستِ سوییچ است: absolute داخلِ `.mud-switch-span` که ۵۸×۳۸ و
                        `overflow:hidden` است، و در حالتِ روشن `translateX(20px)` می‌خورد.
                        بزرگ‌کردنش یا بریده می‌شود یا شست از روی ریل می‌افتد. ابزارِ ممیزی
                        آن را ۳۸×۳۸ می‌شمارد ولی هدفِ واقعیِ لمس، کلِ `<label class="mud-switch">`
                        (شست + ریل + متنِ کنارش) است ⇒ عمداً دست‌نخورده.
     .mud-day           خانه‌ی تقویم ۳۶×۳۶ است و ۷ ستون در عرضِ ثابتِ پیکر جا شده؛
                        ۴۴ یعنی سرریزِ افقیِ تقویم.
     .mud-table-sort-label  فقط برچسبِ مرتب‌سازیِ سرستون است، نه دکمه‌ی مستقل.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 959.95px) {
    /* ردیف‌های ناوبری/منو/لیست (دراورِ موبایل، منوهای کشویی، آیتم‌های سلکت) */
    .mud-nav-link,
    .mud-nav-group > .mud-nav-link,
    .mud-menu-item,
    .mud-list-item {
        min-height: 44px;
    }

    /* دکمه‌های متنی و آیکونی (مودال‌ها، تولبار، چک‌باکس/رادیوی داخلِ منوی «ستون‌ها») */
    .mud-button-root:not(.mud-switch-base):not(.mud-day):not(.mud-table-sort-label) {
        min-height: 44px;
    }
    /* آیکونی‌ها مربع‌اند: عرض هم باید ۴۴ شود، وگرنه ۳۸×۴۴ باز هم رد می‌شود */
    .mud-icon-button:not(.mud-switch-base):not(.mud-day) {
        min-width: 44px;
    }

    /* پای زنگِ اعلان — دکمه‌های خودمان (خارج از MudBlazor) */
    .gta-notif-foot {
        min-height: 44px;
    }
    .gta-notif-allread {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* ردیف‌های دراورِ موبایل: `.gta-rail-sq` است نه `.mud-nav-link` (ریلِ دسکتاپ که روی
       گوشی تمام‌عرض می‌شود). قاعده‌ی حالتِ باز `min-height: 0 !important` می‌گذارد،
       پس این‌جا هم `!important` لازم است — سلکتور هم‌وزن است و چون بعدتر آمده برنده می‌شود.
       padding دست‌نخورده می‌ماند؛ فقط کفِ ارتفاع ۳۹ ← ۴۴. */
    .mud-drawer-mini.mud-drawer--open .gta-rail-sq {
        min-height: 44px !important;
    }
    /* زیرلینک‌های همان آکاردئون (وقتی بخش باز می‌شود) و میان‌برهای «اخیراً».
       عمداً بدونِ پیشوندِ «دراورِ باز»: همین markup هم در آکاردئونِ باز دیده می‌شود و هم
       در فلایوتِ ریل که روی گوشی فقط پارک‌شده بیرونِ قاب است (opacity/visibility، نه
       display:none) — پس هر ابزارِ سنجشی آن‌ها را هم می‌شمارد و سهمیه‌ی گزارشش را پر
       می‌کند و ایرادهای واقعی زیرشان گم می‌شوند. روی گوشی هر دو حالت باید ۴۴ باشد. */
    .gta-fly-item {
        min-height: 44px;
    }
    .gta-fly-recent a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* 🔢 فلش‌های ریزِ +/− فیلدهای عددی روی گوشی حذف می‌شوند (نه بزرگ‌تر).
   دو دکمه‌ی روی‌هم‌سوارِ ۲۴×۲۸ داخلِ یک فیلد را نمی‌شود هر دو ۴۴ کرد مگر فیلد
   دوبرابر قد بکشد. و مهم‌تر: این فلش‌ها روی وزن/عیار/مبلغ هدفِ لمسِ اشتباهی‌اند —
   یک تپِ ناخواسته عددِ پول را بی‌صدا عوض می‌کند. روی گوشی کاربر عدد را با
   صفحه‌کلیدِ عددی می‌زند که هم سریع‌تر است هم بی‌خطر. (تبلت/دسکتاپ دست‌نخورده.) */
@media (max-width: 599.95px) {
    .mud-input-control.mud-input-number-control .mud-input-numeric-spin {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   📱 منوی بلند روی گوشی = پنجره‌ی پایین‌آمدنی (bottom-sheet) — ۲۰۲۶-۰۸-۲۳

   MudMenu پاپ‌اوَرش را دقیقاً زیرِ دکمه می‌چسباند و هیچ سقفِ ارتفاعی ندارد.
   منوی «کارهای بیشتر» داشبوردِ نقره‌ی خام ۱۵ آیتم دارد ⇒ روی گوشیِ ۳۹۰×۸۴۴
   از y=۳۷۶ شروع می‌شد و ۶۹۲px قد می‌کشید: ۲۲۴px آخرش زیرِ لبه‌ی صفحه گم بود و
   هیچ راهی هم برای رسیدن به آن نبود (پاپ‌اوَر اسکرول نداشت).

   راه‌حل، به‌جای بازنویسیِ منو با MudDrawer: همان MudMenu بماند و فقط روی گوشی
   با `PopoverClass="gta-sheet"` از پایین بالا بیاید — ۷۵٪ ارتفاع، اسکرولِ داخلی،
   دستگیره و عنوان و ✕ در سرِ چسبان. یک کلاس، بدونِ منطقِ ‌C#، و برای هر منوی
   بلندِ دیگری هم قابلِ استفاده است.

   ⚠️ چرا `!important`: MudBlazor مختصاتِ پاپ‌اوَر را به‌صورتِ `style` روی خودِ
   المان می‌نویسد (`top: 322px; left: 24px`)، و استایلِ درون‌خطی جز با important
   شکست نمی‌خورد. `bottom` عمداً بدونِ important است تا انیمیشنِ ورود بتواند
   تکانش دهد (اعلانِ important، انیمیشن را هم بی‌اثر می‌کند).

   بستن: لمسِ بیرون (خودِ MudBlazor)، کلیدِ Escape و کشیدنِ دستگیره به پایین
   (هر دو در `js/gta-mobile.js` → بندِ ۴)، و دکمه‌ی ✕.
   ═══════════════════════════════════════════════════════════════════════ */

/* سر و عنوانِ گروه‌ها فقط مالِ حالتِ پنجره‌اند؛ روی دسکتاپ اصلاً نباید دیده شوند. */
.gta-sheet-head,
.gta-sheet-group {
    display: none;
}

@media (max-width: 959.95px) {
    .mud-popover.gta-sheet.mud-popover-open {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 75vh !important;
        /* ⚠️ اسکرول روی خودِ پاپ‌اوَر نه، روی لیستِ داخلش: `.mud-menu-list` خودش
           `overflow: auto` دارد، پس اگر پاپ‌اوَر اسکرول‌کننده باشد، سرِ چسبان به
           لیست (که تکان نمی‌خورد) می‌چسبد و با اسکرول از بالای قاب بیرون می‌رود.
           (تستِ زنده: سر می‌رفت روی top=-46.) */
        overflow: hidden !important;
        border-radius: var(--gta-radius) var(--gta-radius) 0 0 !important;
        /* سایه‌ی گسترده = تیره‌کردنِ پس‌زمینه، بدونِ لایه‌ی اضافه:
           منوی MudBlazor پرده‌ی کلیک‌گیر ندارد (`pointer-events: none`)، پس
           اگر لایه‌ی واقعی می‌گذاشتیم، «لمسِ بیرون برای بستن» را می‌شکست. */
        box-shadow: 0 0 0 100vmax rgba(0,0,0,.45), 0 -10px 30px rgba(0,0,0,.28) !important;
        /* پاپ‌اوَر پیش‌فرض z=1201 است و نوارِ بالا z=1300 ⇒ همه‌ی صفحه تیره می‌شد
           جز نوارِ بالا، که وصله‌وصله به‌نظر می‌رسید. ۱۳۱۰: بالای نوار، پایینِ
           دیالوگ (۱۴۰۰) — پس این پنجره هیچ‌وقت روی یک دیالوگ نمی‌نشیند. */
        z-index: 1310 !important;
        animation: gtaSheetUp .24s cubic-bezier(.2,.8,.25,1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    @keyframes gtaSheetUp {
        from { bottom: -78vh; }
    }

    /* لیست = ناحیه‌ی اسکرول؛ سرِ چسبان به همین می‌چسبد. */
    .gta-sheet .mud-menu-list {
        max-height: 75vh;
        overflow-y: auto;
        /* اسکرولِ داخلِ پنجره نباید به صفحه‌ی پشت سرایت کند */
        overscroll-behavior: contain;
    }

    /* انگشت ~۹mm: روی پنجره کفِ ارتفاع را از ۴۴ به ۴۸ می‌بریم (فضا هست). */
    .gta-sheet .mud-menu-item {
        min-height: 48px;
    }

    /* عنوانِ گروه جای خط‌جداکننده را می‌گیرد — با ۱۵ آیتم، «کجای منو هستم»
       با اسم فهمیده می‌شود نه با یک خطِ خاکستری. */
    .gta-sheet .mud-divider {
        display: none;
    }

    .gta-sheet .gta-sheet-group {
        display: block;
        padding: 12px 16px 4px;
        font-size: .75rem;
        font-weight: 800;
        color: var(--mud-palette-text-secondary);
    }

    .gta-sheet .gta-sheet-head {
        display: flex;
        align-items: center;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 3;
        /* لیستِ MudBlazor بالا ۸px padding دارد؛ سر باید بچسبد به لبه‌ی پنجره. */
        margin-top: -8px;
        padding: 20px 12px 6px;
        background: var(--mud-palette-surface);
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .gta-sheet .gta-sheet-grip {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: var(--mud-palette-text-disabled);
    }

    .gta-sheet .gta-sheet-title {
        font-weight: 800;
        font-size: 1rem;
        color: var(--mud-palette-text-primary);
        padding-inline-start: 4px;
    }

    .gta-sheet .gta-sheet-close {
        margin-inline-start: auto;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--mud-palette-text-secondary);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
    }

    .gta-sheet .gta-sheet-close:hover,
    .gta-sheet .gta-sheet-close:focus-visible {
        background: var(--mud-palette-action-default-hover);
        color: var(--mud-palette-text-primary);
    }

    /* حینِ کشیدنِ دستگیره به پایین (gta-mobile.js) انیمیشن نباید بجنگد. */
    .mud-popover.gta-sheet.gta-sheet-dragging {
        animation: none;
        transition: none;
    }
}

/* ══════════ ⚖️ امانتِ کارگاه‌ها — استایلِ دیالوگ‌ها (۲۰۲۶-۰۸-۲۷) ══════════
   چرا این‌جا و نه در *.razor.css: چهار دیالوگِ ماژول کامپوننت‌های جدااند و CSSِ
   اسکوپ‌دارِ صفحه‌ی اصلی رویشان نمی‌افتد. به‌جای چهار فایلِ تکراری، یک بلوکِ سراسری. */

.cg-dlg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.cg-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.cg-form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cg-form-row > * {
    flex: 1 1 140px;
    min-width: 0;
}

.cg-alert {
    border-radius: var(--gta-radius-ctl);
}

/* ── پنجره‌ی «ثبت برگشت» (برگشتِ تکی) — همان زبانِ «جدولِ آرام»ِ پنجره‌های پارت (۲۷ سپتامبر ۲۰۲۶) ──
   بقیه‌ی ظاهر از cg-pd-* و cg-pr-* می‌آید؛ این‌جا فقط چیزهای خاصِ همین پنجره. */
.cg-pd.cg-rd { max-width: 620px !important; }

.cg-rd .cg-pr-head { align-items: flex-start; flex-direction: column; gap: 10px; }
.cg-rd-who { color: var(--gta-text); font-weight: 500; }

/* برگشت‌های قبلی: ردیف‌های هم‌وزن در ظرفِ تینت‌دار، با خطِ نیم‌پیکسلی بینشان */
.cg-rd-hist {
    background: var(--gta-card-2);
    border-radius: var(--gta-r-card);
    padding: 2px 14px;
    margin-bottom: 14px;
}

.cg-rd-hrow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
    padding: 9px 0;
    font-size: 0.9rem;
    color: var(--gta-text);
    font-variant-numeric: tabular-nums;
}

.cg-rd-hrow + .cg-rd-hrow { border-top: .5px solid var(--gta-sep); }
.cg-rd-hrow i { font-style: normal; font-size: 0.78rem; color: var(--gta-text-2); margin-inline-end: 6px; }
.cg-rd-hdate { color: var(--gta-text-2); min-width: 6.5em; }

.cg-rd-wide { grid-column: 1 / -1; }

/* فیلدِ حیاتیِ کنترلِ متقابل وقتی خالی است: برچسب و هشدارِ یک‌خطی کهربایی، نه جعبه‌ی هشدار */
.cg-rd-need .cg-pd-lbl { color: var(--gta-s-orange); }

.cg-rd-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-inline-start: 4px;
    font-size: 0.78rem;
    color: var(--gta-s-orange);
}

.cg-rd-hint .mud-icon-root { font-size: 15px; }

.cg-rd-done {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--gta-r-card);
    background: color-mix(in srgb, var(--gta-s-green) 12%, transparent);
    color: var(--gta-text);
}

.cg-rd-done .mud-icon-root { color: var(--gta-s-green); font-size: 20px; }

.cg-rd .cg-pd-save { white-space: nowrap; }

/* گوشی: چهار وزنِ کوتاه دوتا‌دوتا کنارِ هم (یک‌ستونه پنجره را دو برابر دراز می‌کرد)؛
   تاریخ (با «امروز»)، یادداشت و کنترلِ متقابل تمام‌عرض؛ دکمه‌ی ثبت پهن و یک‌خطی (۲۷ سپ دو خط شده بود) */
@media (max-width: 700px) {
    .cg-rd .cg-pd-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cg-rd .cg-pd-date,
    .cg-rd .cg-rd-wide-m { grid-column: 1 / -1; }
    .cg-rd .mud-dialog-actions [class*="cg-pd-save"] { flex: 1 1 auto; }
}

/* ── پارتِ آبکاری (۳ سپتامبر ۲۰۲۶): یک کارتن به یک آبکار با محصولِ چند کارگاه ── */

/* ── پنجره‌ی «پارت آبکاری» — طرحِ «جدولِ آرام» (۲۶ سپتامبر ۲۰۲۶) ──
   فیلدها نرم و بی‌خط (تهِ تینت، فوکوس = حلقه‌ی برند)، خط‌ها داخلِ یک ظرفِ تینت‌دارِ گرد،
   جمعِ وزن کنارِ عنوانِ بخش. همه‌ی رنگ‌ها از توکن ⇒ حالتِ شب خودکار. */
.cg-pd { max-width: 1000px !important; }

.cg-pd-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline-end: 40px; /* جای ✕ */
}

.cg-pd-sq {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--gta-radius-ctl);
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--gta-accent) 82%, #fff), var(--gta-accent));
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--gta-accent) 60%, transparent);
}

.cg-pd-sq .mud-icon-root { font-size: 20px; color: #fff; }

.cg-pd-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gta-text);
    white-space: nowrap;
}

.cg-pd-no {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding-inline: 12px 4px;
    border-radius: 999px;
    background: var(--gta-tonal);
    color: var(--gta-text-2);
    font-size: 0.82rem;
    font-weight: 400;
    cursor: text;
}

.cg-pd-no:focus-within { box-shadow: var(--gta-focus); }

/* فیلدِ شماره فقط به اندازه‌ی عدد (MudBlazor پیش‌فرض ۱۰۰٪ پهن است) */
.cg-pd-no .mud-input-control { margin: 0 !important; width: auto !important; flex: none !important; }
.cg-pd-no .mud-input-control-input-container,
.cg-pd-no .mud-input { width: 3.6em !important; min-width: 0 !important; }
.cg-pd-no .mud-input { font-size: 0.95rem; font-weight: 600; color: var(--gta-accent-ink); background: transparent !important; }
.cg-pd-no .mud-input::before,
.cg-pd-no .mud-input::after { display: none !important; }
.cg-pd-no input { padding: 4px 2px !important; text-align: center; font-variant-numeric: tabular-nums; }

.cg-pd-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 2px;
}

.cg-pd-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.cg-pd-f {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    position: relative;
}

.cg-pd-lbl {
    font-size: 0.8rem;
    color: var(--gta-text-2);
    padding-inline-start: 4px;
}

/* فیلدِ نرم: تهِ تینت، بی خطِ دور؛ فوکوس = حلقه‌ی برند.
   ⚠️ پیشوندِ html:root:not(.gta-print-doc) لازم است: gta-taste.css (بعد از این فایل) خطِ دورِ همه‌ی
   فیلدها را با همین ویژگی و !important می‌کشد؛ بی‌آن، خطِ خاکستری روی زنده می‌ماند (۲۷ سپ دیده شد). */
html:root:not(.gta-print-doc) .cg-pd .mud-input-control { margin: 0 !important; }
html:root:not(.gta-print-doc) .cg-pd .mud-input.mud-input-outlined {
    background: var(--gta-card-2);
    transition: background .2s var(--gta-ease), box-shadow .2s var(--gta-ease);
}
html:root:not(.gta-print-doc) .cg-pd .mud-input.mud-input-outlined .mud-input-outlined-border,
html:root:not(.gta-print-doc) .cg-pd .mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border,
html:root:not(.gta-print-doc) .cg-pd .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: transparent !important;
    box-shadow: none !important;
}
html:root:not(.gta-print-doc) .cg-pd .mud-input.mud-input-outlined:focus-within {
    background: var(--gta-card);
    box-shadow: inset 0 0 0 1.5px var(--gta-accent), var(--gta-focus);
}
html:root:not(.gta-print-doc) .cg-pd .mud-input.mud-input-outlined.mud-input-error { box-shadow: inset 0 0 0 1.5px var(--mud-palette-error); }

.cg-pd-noplater {
    height: 40px;
    border-radius: var(--gta-r-ctl);
    background: var(--gta-card-2);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 12px 6px;
    min-width: 0;
}

.cg-pd-noplater > .mud-icon-root { font-size: 18px; color: var(--gta-text-3); }
.cg-pd-ph { color: var(--gta-text-3); white-space: nowrap; }

.cg-pd-link {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 30px;
    padding-inline: 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--gta-accent-ink);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.cg-pd-link .mud-icon-root { font-size: 16px; }
.cg-pd-link:hover { background: var(--gta-accent-soft); }
.cg-pd-link:focus-visible { outline: none; box-shadow: var(--gta-focus); }

.cg-pd-today {
    position: absolute;
    inset-inline-end: 8px;
    bottom: 8px;
    height: 26px;
    padding-inline: 10px;
    border: 0;
    border-radius: 999px;
    background: var(--gta-tonal);
    color: var(--gta-text-2);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.cg-pd-today.on { background: var(--gta-accent-soft); color: var(--gta-accent-ink); cursor: default; }

/* جا برای دکمه‌ی «امروز» تا روی خودِ تاریخ نیفتد (۲۷ سپ روی ۳۹۰ افتاده بود) */
html:root:not(.gta-print-doc) .cg-pd-date .mud-input input { padding-inline-end: 72px !important; }

.cg-pd-sec {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
    padding-inline: 4px;
}

.cg-pd-sec-t { font-size: 1rem; font-weight: 600; color: var(--gta-text); }

.cg-pd-sum {
    margin-inline-start: auto;
    color: var(--gta-text-2);
    font-size: 0.85rem;
    white-space: nowrap;
}

.cg-pd-sum b {
    color: var(--gta-text);
    font-weight: 600;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    margin-inline-end: 3px;
}

.cg-pd-gap { display: inline-block; width: 14px; }

.cg-pd-list {
    background: var(--gta-card-2);
    border-radius: var(--gta-r-card);
    padding: 4px 10px;
}

.cg-pd-cols,
.cg-pd-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, .7fr) 64px;
    gap: 8px;
    align-items: center;
}

.cg-pd-cols {
    font-size: 0.75rem;
    color: var(--gta-text-2);
    padding: 8px 0 2px;
}

.cg-pd-row { padding: 5px 0; position: relative; }

.cg-pd-row + .cg-pd-row::before {
    content: '';
    position: absolute;
    inset-inline: 34px 0;
    top: 0;
    border-top: .5px solid var(--gta-sep);
}

/* داخلِ ظرفِ تینت‌دار، فیلدها یک پله روشن‌تر (سفید/ظرفِ شب) */
html:root:not(.gta-print-doc) .cg-pd-list .mud-input.mud-input-outlined { background: var(--gta-card); }

.cg-pd-idx {
    width: 24px;
    height: 24px;
    border-radius: var(--gta-radius-sm);
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    background: var(--gta-card);
    color: var(--gta-text-2);
    font-variant-numeric: tabular-nums;
}

.cg-pd-row.corr .cg-pd-idx { background: var(--gta-s-orange); color: #fff; }

.cg-pd-row.corr .mud-input-adornment-text {
    font-size: 0.72rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gta-s-orange) 16%, transparent);
    color: var(--gta-s-orange);
    white-space: nowrap;
}

.cg-pd-num input { direction: ltr; text-align: left; font-variant-numeric: tabular-nums; }

.cg-pd-act {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.cg-pd-act button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--gta-text-3);
    cursor: pointer;
    transition: background .15s var(--gta-ease), color .15s var(--gta-ease), transform .1s var(--gta-ease);
}

.cg-pd-act button .mud-icon-root { font-size: 16px; }
.cg-pd-act button:hover:not(:disabled) { background: var(--gta-tonal); color: var(--gta-text); }
.cg-pd-act button:active:not(:disabled) { transform: scale(.92); }
.cg-pd-act button.on { background: color-mix(in srgb, var(--gta-s-orange) 16%, transparent); color: var(--gta-s-orange); }
.cg-pd-act button:disabled { opacity: .35; cursor: default; }

.cg-pd-add {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    padding-inline: 2px;
    border: 0;
    border-top: .5px solid var(--gta-sep);
    background: transparent;
    color: var(--gta-accent-ink);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: start;
}

.cg-pd-add:focus-visible { outline: none; box-shadow: var(--gta-focus); border-radius: var(--gta-r-ctl); }

.cg-pd-plus {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--gta-accent);
    color: #fff;
    transition: transform .2s var(--gta-ease-spring);
}

.cg-pd-plus .mud-icon-root { font-size: 16px; color: #fff; }
.cg-pd-add:hover .cg-pd-plus { transform: scale(1.08); }

.cg-pd-kbd {
    margin-inline-start: auto;
    font-size: 0.72rem;
    color: var(--gta-text-3);
}

.cg-pd-kbd kbd {
    font: inherit;
    padding: 1px 6px;
    border-radius: var(--gta-radius-sm);
    background: var(--gta-card);
    margin-inline: 2px;
}

.cg-pd-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding-inline: 14px;
    border: 0;
    border-radius: 999px;
    background: var(--gta-tonal);
    color: var(--gta-text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.cg-pd-ghost .mud-icon-root { font-size: 18px; color: var(--gta-text-2); }
.cg-pd-ghost:focus-visible { outline: none; box-shadow: var(--gta-focus); }

.cg-pd .cg-pd-cancel { color: var(--gta-text-2); }
.cg-pd .cg-pd-save { min-width: 112px; height: 42px; font-weight: 600; }

/* ── پنجره‌ی «پارت ۵۷» (دیدن + ثبتِ برگشت) — همان زبانِ «جدولِ آرام» (۲۷ سپتامبر ۲۰۲۶) ── */
.cg-pr-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    padding: 0 4px 12px;
}

.cg-pr-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--gta-text-2);
    font-size: 0.85rem;
}

.cg-pr-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cg-pr-meta .mud-icon-root { font-size: 16px; color: var(--gta-text-3); }

.cg-pr-stats {
    display: flex;
    align-items: flex-end;
    gap: 22px;
    flex-wrap: wrap;
}

.cg-pr-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}

.cg-pr-stat i { font-style: normal; font-size: 0.74rem; color: var(--gta-text-2); }
.cg-pr-stat b { font-size: 1.12rem; font-weight: 600; color: var(--gta-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cg-pr-unit { font-size: 0.78rem; color: var(--gta-text-3); padding-bottom: 3px; }

/* جدول داخلِ ظرفِ تینت‌دارِ گرد، بی خط‌کشیِ ستونی؛ ستونِ ورودی بی‌تهِ جدا */
.cg-ret-dlg .cg-part-table-wrap {
    background: var(--gta-card-2);
    border-radius: var(--gta-r-card);
    padding: 4px 12px;
    margin-bottom: 14px;
}

/* جدولِ پنلِ فشرده (سلیقه §۵٫۱): نام ~۱۴٫۵، عدد ~۱۴، ردیف ~۴۲ — ۲۷ سپ «ردیف‌ها بلند، فونت‌ها ریز» */
/* ⚠️ App.css قاعده‌ی سراسریِ «table td { font-size: .625rem }» (۱۰ پیکسل) دارد ⇒ اندازه را روی
   خودِ th/td بگذار، نه روی table (۲۷ سپ: نام‌ها ۱۰ پیکسل ماندند با اینکه جدول ۰٫۹۲ بود). */
.cg-ret-dlg .cg-part-table,
.cg-ret-dlg .cg-part-table td { font-size: 0.92rem; color: var(--gta-text); }
.cg-ret-dlg .cg-part-table .cg-rep-strong { font-size: 0.95rem; font-weight: 600; }
.cg-ret-dlg .cg-th-sub { font-size: 0.7rem; }

.cg-ret-dlg .cg-part-table th,
.cg-ret-dlg .cg-part-table td {
    border-bottom: .5px solid var(--gta-sep);
    padding: 3px 8px;
    height: 44px;
}

/* فیلدِ ورودیِ داخلِ ردیف ۳۶ پیکسل، نه ~۴۸ِ پیش‌فرضِ MudBlazor */
html:root:not(.gta-print-doc) .cg-ret-dlg .cg-part-table .mud-input.mud-input-outlined input {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 0.95rem;
    line-height: 22px;
    height: 22px;
}

.cg-ret-dlg .cg-part-table tbody tr:last-child td { border-bottom: 0; }
.cg-ret-dlg .cg-part-table th { font-weight: 500; color: var(--gta-text-2); font-size: 0.78rem; padding-top: 10px; }
.cg-ret-dlg .cg-part-table tfoot td { border-top: .5px solid var(--gta-sep); border-bottom: 0; font-weight: 600; }

.cg-ret-dlg .cg-part-th-in,
.cg-ret-dlg .cg-part-td-in {
    background: transparent;
    width: 150px;
    min-width: 128px;
}

html:root:not(.gta-print-doc) .cg-ret-dlg .cg-part-table-wrap .mud-input.mud-input-outlined { background: var(--gta-card); }
.cg-ret-dlg .cg-part-td-in input { direction: ltr; text-align: left; font-variant-numeric: tabular-nums; }
.cg-ret-dlg .cg-part-row-hit { outline: 0; background: var(--gta-accent-soft); }

.cg-ret-dlg .cg-part-corr {
    background: color-mix(in srgb, var(--gta-s-orange) 16%, transparent);
    color: var(--gta-s-orange);
}

.cg-ret-dlg .cg-part-ret-form { margin-top: 0; }

.cg-ret-dlg .cg-part-print-btn,
.cg-ret-dlg .cg-pr-ghost {
    border-radius: 999px;
    background: var(--gta-tonal);
    padding-inline: 14px;
}

.cg-part-state {
    margin-inline-start: 8px;
}

.cg-part-table-wrap {
    overflow-x: auto;
    margin-bottom: 12px;
}

.cg-part-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    color: var(--gta-on-glass);
}

.cg-part-table th,
.cg-part-table td {
    padding: 6px 8px;
    text-align: center;
    border-bottom: 1px solid var(--gta-glass-border);
    white-space: nowrap;
}

.cg-part-table th {
    font-size: 0.74rem;
    color: var(--gta-on-glass-soft);
    font-weight: 700;
}

.cg-part-table td:first-child,
.cg-part-table td:nth-child(2) {
    text-align: start;
}

.cg-part-th-in,
.cg-part-td-in {
    background: var(--gta-glass-item);
    min-width: 116px;
}

.cg-part-row-closed {
    opacity: 0.72;
}

.cg-part-row-hit {
    background: var(--gta-glass-sel);
    outline: 1px solid var(--gta-glass-sel-border);
}

.cg-part-corr {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--gta-glass-item-2);
    color: var(--gta-on-glass-soft);
    margin-inline-start: 6px;
}

.cg-part-undone {
    font-size: 0.74rem;
    color: var(--gta-on-glass-soft);
}

.cg-part-ret-form {
    margin-top: 4px;
}

.cg-part-ret-hint {
    font-size: 0.76rem;
    color: var(--gta-on-glass-soft);
}

/* ── گاردِ «افزایشِ غیرعادیِ وزن» در ثبتِ برگشتِ پارت (۱۰ سپتامبر ۲۰۲۶) ──
   سه لایه‌ی نشان، به ترتیبِ فوریت:
   ۱) عددِ زنده در ستونِ «افزایش» — جای تازه نمی‌گیرد، پس وسطِ تایپ جدول نمی‌پرد.
   ۲) نقطه‌ی رنگی کنارِ نامِ کارگاه — روی موبایل که جدول افقی اسکرول می‌شود همین دیده می‌شود.
   ۳) بلوکِ متنیِ پایینِ پنجره — متنِ کاملِ هشدار برای کیبورد و موبایل (title کافی نیست).
   رنگ‌ها از توکن‌های معناییِ تم می‌آیند (کهربایی/قرمز)، که هر دو حالتِ روز و شب
   کنتراستِ ≥AA دارند — هگزِ دلخواه این‌جا ننویس. */

.cg-gain-live {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.cg-gain-ico {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto;
}

/* ⚠️ `.cg-part-table td` رنگ را از `--gta-on-glass` می‌گیرد و هم‌ویژگی است ⇒
   بی `!important` رنگِ هشدار بی‌صدا خورده می‌شود. */
.cg-part-table td.cg-gain-warn,
.cg-part-table td.cg-gain-warn .mud-icon-root { color: var(--gta-warn) !important; }
.cg-part-table td.cg-gain-bad,
.cg-part-table td.cg-gain-bad .mud-icon-root { color: var(--gta-neg-text) !important; }

/* نقطه‌ی هشدار کنارِ نامِ کارگاه — همیشه رندر می‌شود و فقط رنگ می‌گیرد،
   تا عرضِ ستون وسطِ تایپ تکان نخورد. */
.cg-gain-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-inline-start: 6px;
    background: transparent;
    vertical-align: middle;
}

.cg-gain-dot-warn { background: var(--gta-warn); }
.cg-gain-dot-bad { background: var(--gta-neg-text); }

/* بلوکِ هشدار — انتهای محتوای پنجره. دکمه‌های پنجره در پاصفحه‌ی جدای MudDialog
   هستند، پس بزرگ‌شدنِ این بلوک هیچ‌وقت دکمه‌ی «ثبت» را جابه‌جا نمی‌کند. */
/* ⭐ چسبانِ کفِ محتوا (۱۰ سپتامبر ۲۰۲۶، ایرادِ داور): بلوک قبلاً ته محتوای اسکرول‌شونده
   بود و روی گوشیِ ۳۹۰ **زیرِ تای اسکرول** می‌ماند — اپراتور فقط نقطه‌ی ۸پیکسلی را می‌دید و
   هیچ‌وقت دلیل را نمی‌خواند. حالا به کفِ ناحیه‌ی اسکرول می‌چسبد، پس هر جای جدول که باشی
   بالای دکمه‌ها دیده می‌شود. زمینه‌ی مات لازم است چون ردیف‌های جدول از زیرش رد می‌شوند. */
.cg-guard {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    /* ⚠️ زمینه باید **مات** باشد، وگرنه ردیف‌های جدول از پشتِ بلوکِ چسبان رد می‌شوند و
       متن ناخوانا می‌شود. کاغذِ مودال خودش ۹۲٪ است ⇒ دو لایه رویِ هم می‌گذاریم (≈۹۹٪)
       و تینتِ کهربایی روی آن‌ها. */
    background-color: var(--gta-dlg-paper, #fff);
    background-image:
        linear-gradient(var(--gta-warn-bg), var(--gta-warn-bg)),
        linear-gradient(var(--gta-dlg-paper, #fff), var(--gta-dlg-paper, #fff));
    border: 1px solid var(--gta-warn);
    font-size: 0.8rem;
}

.cg-guard.cg-guard-bad {
    background-image:
        linear-gradient(var(--gta-neg-bg), var(--gta-neg-bg)),
        linear-gradient(var(--gta-dlg-paper, #fff), var(--gta-dlg-paper, #fff));
    border-color: var(--gta-neg-border);
}

.cg-guard.cg-guard-ask {
    border-width: 2px;
}

.cg-guard-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gta-warn);
    font-weight: 700;
}

.cg-guard.cg-guard-bad .cg-guard-head { color: var(--gta-neg-text); }
.cg-guard-head .mud-icon-root { color: inherit !important; }

.cg-guard-item {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    color: var(--gta-on-glass);
    padding-inline-start: 4px;
}

.cg-guard-item.cg-gain-warn { color: var(--gta-warn); }
.cg-guard-item.cg-gain-bad { color: var(--gta-neg-text); }
.cg-guard-item .mud-icon-root { color: inherit !important; }

.cg-guard-sep {
    opacity: 0.6;
}

.cg-guard-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* موبایل: چهار دکمه‌ی پاصفحه در ۳۹۰ پیکسل جا نمی‌شوند و کلمه‌ها تکه‌تکه می‌شکنند —
   «تأیید و ثبت» سه‌خطی می‌شد با تیک روی خطِ خودش. دکمه‌ها به‌صورتِ کامل می‌شکنند
   (نه کلمه‌هایشان) و هر کدام روی یک خط می‌مانند. فقط همین پنجره. */
@media (max-width: 700px) {
    .cg-ret-dlg .mud-dialog-actions {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }

    .cg-ret-dlg .mud-dialog-actions .mud-button-root {
        white-space: nowrap;
        min-width: 0;
        flex: none;
    }

    /* ۲۷ سپ: چهار دکمه هنوز در یک خط بریده می‌شدند ⇒ فاصله‌انداز = شکستِ خط؛
       ردیفِ اول چاپ/ویرایش، ردیفِ دوم بستن + ثبت (ثبت پهن، جای شست) */
    .cg-ret-dlg .mud-dialog-actions > .flex-grow-1 { flex-basis: 100%; height: 0; }
    .cg-ret-dlg .mud-dialog-actions [data-cg-save] { flex: 1 1 auto; }

    .cg-pr-head { flex-direction: column; align-items: stretch; }
    .cg-pd-fields { grid-template-columns: minmax(0, 1fr); }

    /* بلوکِ چسبان روی کادرِ اجباریِ «تاریخ برگشت» می‌نشست (ایرادِ دورِ دومِ داور).
       به تهِ ناحیه‌ی اسکرول به‌اندازه‌ی بلوک فضا می‌دهیم تا وقتی تا ته اسکرول کردی،
       فرم بالای بلوک بایستد نه زیرش. فقط وقتی بلوک واقعاً هست. */
    .cg-ret-dlg .mud-dialog-content:has(.cg-guard) {
        padding-bottom: 180px;
    }
}

/* موبایل: نامِ کارگاه (و نقطه‌ی هشدارش) سرِ اسکرولِ افقی گم نشود */
@media (max-width: 700px) {
    .cg-part-table td:first-child,
    .cg-part-table th:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 2;
        background: var(--gta-dlg-paper, var(--gta-glass-strong));
    }

    /* پنجره‌ی پارت: جدول داخلِ ظرفِ تینت‌دار است ⇒ ستونِ چسبان هم‌رنگِ همان ظرف */
    .cg-ret-dlg .cg-part-table td:first-child,
    .cg-ret-dlg .cg-part-table th:first-child {
        background: var(--gta-card-2);
    }

    .cg-pr-stats { gap: 16px; }

    .cg-guard { font-size: 0.78rem; }
}

/* ── حسابِ جاری (بسته‌بندی): کارت، صورت‌حساب، ثبتِ سریع ── */

.cg-acc-head {
    display: grid;
    grid-template-columns: minmax(200px, 0.9fr) 2fr;
    gap: 12px;
    margin-bottom: 12px;
}

.cg-acc-bal {
    background: var(--gta-glass-item);
    border: 1px solid var(--gta-glass-border);
    border-radius: var(--gta-radius-card);
    padding: 12px 14px;
}

.cg-acc-bal-late {
    border-color: var(--mud-palette-warning);
}

.cg-acc-bal-label {
    font-size: 0.76rem;
    color: var(--gta-on-glass-soft);
}

.cg-acc-bal-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gta-on-glass-title);
}

.cg-acc-bal-value span {
    font-size: 0.8rem;
    font-weight: 600;
}

.cg-acc-bal-foot {
    font-size: 0.78rem;
    color: var(--gta-on-glass-soft);
    margin-top: 4px;
}

.cg-acc-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}

.cg-acc-fact {
    background: var(--gta-glass-2);
    border: 1px solid var(--gta-glass-border);
    border-radius: var(--gta-radius-card);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cg-acc-fact-l {
    font-size: 0.72rem;
    color: var(--gta-on-glass-soft);
}

.cg-acc-fact-v {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--gta-on-glass);
}

.cg-acc-fact-s {
    font-size: 0.74rem;
    color: var(--gta-on-glass-soft);
}

.cg-acc-neg {
    color: var(--mud-palette-error);
}

/* اعلامِ کهنه‌ی طرفِ مقابل — نه خطا، ولی نباید تازه به نظر برسد */
.cg-acc-stale,
.cg-acc-due {
    color: var(--mud-palette-warning);
}

.cg-acc-due {
    font-weight: 700;
}

.cg-acc-actions,
.cg-acc-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cg-acc-search {
    max-width: 260px;
}

.cg-acc-entry-bal {
    font-size: 0.86rem;
    color: var(--gta-on-glass);
    background: var(--gta-glass-item);
    border-radius: var(--gta-radius-sm);
    padding: 6px 10px;
    margin-bottom: 10px;
}

.cg-acc-entry-hint,
.cg-acc-entry-log {
    font-size: 0.78rem;
    color: var(--gta-on-glass-soft);
}

.cg-acc-entry-log {
    margin-top: 8px;
}

.cg-acc-entry-preview {
    font-size: 0.84rem;
    color: var(--gta-on-glass);
    padding: 6px 10px;
    border-radius: var(--gta-radius-sm);
    background: var(--gta-glass-2);
}

.cg-acc-entry-warn {
    margin-top: 6px;
    font-weight: 700;
    color: var(--mud-palette-error);
}

.cg-acc-diff-ok {
    color: var(--mud-palette-success);
}

.cg-acc-diff-bad {
    color: var(--mud-palette-error);
}

/* ── پنجره‌ی یکی‌شده‌ی «دادم / گرفتم» (طرحِ «ب»، ۲۷ سپتامبر ۲۰۲۶) ──
   ردیف‌های گروهی مثلِ تنظیماتِ آیفون: مربعِ رنگی + برچسب + فیلدِ کپسولی. وزن کمی درشت‌تر.
   پنجره بیرونِ اسکوپِ صفحه رندر می‌شود ⇒ سراسری، ولی همه زیرِ .cg-ge تا جای دیگری را نخورد. */
.mud-dialog.cg-ge-dlg { max-width: 560px; }
.cg-ge-head { display: flex; align-items: center; gap: 12px; }
.cg-ge-head .gta-sq { width: 34px; height: 34px; border-radius: 10px; }
.cg-ge-head .gta-sq .mud-icon-root { font-size: 1.3rem; }
.cg-ge-title { font-size: 1.1rem; font-weight: 700; color: var(--gta-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-ge { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }

/* کلیدِ دوتایی با ذره‌بینِ لغزان */
.cg-ge-seg {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px;
    border-radius: var(--gta-r-pill, 999px); background: var(--gta-tonal);
}
.cg-ge-thumb {
    position: absolute; top: 4px; bottom: 4px; width: calc(50% - 4px); inset-inline-start: 4px;
    border-radius: var(--gta-r-pill, 999px); background: var(--mud-palette-primary);
    box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
    transition: inset-inline-start .35s var(--gta-ease-spring, cubic-bezier(.32,.72,0,1));
}
.cg-ge-seg[data-m="2"] .cg-ge-thumb { inset-inline-start: 50%; }
.cg-ge-seg button {
    position: relative; z-index: 1; height: 40px; border: 0; background: none; font: inherit; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--gta-text-2);
    border-radius: var(--gta-r-pill, 999px); cursor: pointer; transition: transform .1s, color .2s;
}
.cg-ge-seg button:active { transform: scale(.97); }
.cg-ge-seg button.on { color: #fff; font-weight: 600; }
.cg-ge-seg button.on .mud-icon-root { color: #fff; }
.cg-ge-seg button:focus-visible { outline: 0; box-shadow: var(--gta-focus); }

/* گروهِ ردیف‌ها */
.cg-ge-grp { border-radius: 22px; background: var(--gta-card-2); overflow: hidden; }
.cg-ge-row { display: flex; align-items: center; gap: 12px; padding-inline: 14px; }
.cg-ge-row .gta-sq { width: 29px; height: 29px; border-radius: 8px; }
.cg-ge-row .gta-sq .mud-icon-root { font-size: 1rem; }
.cg-ge-rb { flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px; }
.cg-ge-row + .cg-ge-row .cg-ge-rb { border-top: .5px solid var(--gta-sep); }
.cg-ge-l { flex: 1; min-width: 0; font-size: .98rem; color: var(--gta-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-ge-val {
    display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; font: inherit; font-size: .98rem;
    color: var(--gta-text-2); cursor: pointer; padding: 6px 4px; border-radius: var(--gta-r-pill, 999px);
}
.cg-ge-val .mud-icon-root { color: var(--gta-text-3); }
.cg-ge-val:focus-visible { outline: 0; box-shadow: var(--gta-focus); }

/* فیلدِ کپسولیِ داخلِ ردیف (MudTextField / GtaNumericField با Variant.Text) */
.cg-ge .cg-ge-in { flex: 0 0 150px; width: 150px; margin: 0 !important; }
.cg-ge .cg-ge-in.is-text { flex: 0 1 58%; width: auto; }
.cg-ge .cg-ge-in .mud-input-control-input-container { margin: 0; }
.cg-ge .cg-ge-in .mud-input {
    height: 36px; margin: 0 !important; padding: 0 14px; border-radius: var(--gta-r-pill, 999px);
    background: var(--gta-card); box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: box-shadow .2s;
}
.cg-ge .cg-ge-in .mud-input::before,
.cg-ge .cg-ge-in .mud-input::after { display: none !important; }
.cg-ge .cg-ge-in .mud-input:focus-within {
    box-shadow: 0 0 0 2px var(--mud-palette-primary), 0 0 0 5px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}
/* !important: قاعده‌ی سراسریِ «.mud-input-slot { font-size: 1rem !important }» بالای همین فایل */
.cg-ge .cg-ge-in input.mud-input-slot { height: 36px; padding: 0; text-align: center; font-size: 1rem !important; font-variant-numeric: tabular-nums; }
.cg-ge .cg-ge-in.is-text input.mud-input-slot { text-align: start; }
.cg-ge .cg-ge-in input.mud-input-slot::placeholder { color: var(--gta-text-3); opacity: 1; }
.cg-ge .cg-ge-in .mud-input-adornment-end { margin: 0; }
.cg-ge .cg-ge-in .mud-input-adornment-text { font-size: .8rem; color: var(--gta-text-2); }
/* وزن: کمی درشت‌تر (خواسته‌ی علیرضا) */
.cg-ge .cg-ge-in.is-big { flex-basis: 172px; width: 172px; }
.cg-ge .cg-ge-in.is-big .mud-input { height: 44px; }
.cg-ge .cg-ge-in.is-big input.mud-input-slot { height: 44px; font-size: 1.4rem !important; font-weight: 500; }
.cg-ge .cg-ge-in .mud-input-helper-text,
.cg-ge .cg-ge-in .mud-input-control-helper-container { display: none; }

.cg-ge-help { font-size: .8rem; color: var(--gta-text-2); padding-inline: 16px; margin-top: -8px; }
.cg-ge-warn { font-size: .86rem; font-weight: 600; color: var(--mud-palette-error); padding-inline: 16px; margin-top: -6px; }
.cg-ge-log { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--gta-text-2); padding-inline: 8px; margin-top: -4px; }
.cg-ge-log i {
    font-style: normal; height: 24px; padding-inline: 9px; display: inline-flex; align-items: center; font-size: .82rem;
    border-radius: var(--gta-r-pill, 999px); background: var(--gta-accent-soft); color: var(--gta-accent-ink);
}
.cg-ge-log b { color: var(--gta-text); font-weight: 600; }

/* پایینِ پنجره: «مانده ← بعد از ثبت» + دکمه‌ها در یک ردیف */
.cg-ge-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.cg-ge-eq { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--gta-text-2); }
.cg-ge-eq b { font-size: 1rem; font-weight: 600; color: var(--gta-text); }
.cg-ge-eq .cg-ge-to { color: var(--gta-accent-ink); font-weight: 700; }
.cg-ge-eq.is-bad b { color: var(--mud-palette-error); }
.cg-ge-eq .mud-icon-root { font-size: 1rem; color: var(--gta-text-3); }
.cg-ge-foot .mud-button-root { height: 42px; padding-inline: 20px; border-radius: var(--gta-r-pill, 999px); font-size: .98rem; box-shadow: none; }
.cg-ge-foot .cg-ge-ghost { color: var(--gta-text-2); padding-inline: 12px; }
.cg-ge-foot .cg-ge-tonal { background: var(--gta-accent-soft); color: var(--gta-accent-ink); }
.cg-ge-foot .cg-ge-primary { min-width: 92px; font-weight: 600; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent); }

@media (max-width: 600px) {
    .cg-ge .cg-ge-in { flex-basis: 118px; width: 118px; }
    .cg-ge .cg-ge-in.is-big { flex-basis: 138px; width: 138px; }
    .cg-ge .cg-ge-in.is-text { flex-basis: 52%; }
    .cg-ge-row { gap: 10px; padding-inline: 12px; }
    .cg-ge-eq { flex-basis: 100%; justify-content: center; order: -1; }
    .cg-ge-foot .cg-ge-primary, .cg-ge-foot .cg-ge-tonal { flex: 1; }
}

html.gta-dark .cg-ge .cg-ge-in .mud-input { background: var(--gta-card-3); box-shadow: none; }

.cg-acc-diff-warn {
    color: var(--mud-palette-warning);
}

.cg-acc-table td {
    white-space: nowrap;
}

.cg-acc-desc {
    text-align: start !important;
    white-space: normal !important;
    min-width: 220px;
}

.cg-acc-date {
    direction: ltr;
    unicode-bidi: isolate;
}

.cg-acc-tag {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 999px;
    margin-inline-end: 6px;
    background: var(--gta-glass-item-2);
    color: var(--gta-on-glass-soft);
}

.cg-acc-tag-out {
    color: var(--mud-palette-primary);
}

.cg-acc-tag-in {
    color: var(--mud-palette-success);
}

.cg-acc-tag-count {
    color: var(--mud-palette-warning);
}

.cg-acc-zero {
    background: var(--gta-glass-sel);
}

.cg-acc-zero-badge {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--gta-glass-item-2);
    color: var(--mud-palette-success);
    margin-inline-start: 6px;
}

.cg-acc-opening td {
    color: var(--gta-on-glass-soft);
    font-style: italic;
}

.cg-acc-note,
.cg-acc-declared {
    font-size: 0.76rem;
    color: var(--gta-on-glass-soft);
}

.cg-acc-lock {
    color: var(--gta-on-glass-soft);
    margin-inline-start: 4px;
    vertical-align: middle;
}

.cg-acc-rowactions {
    white-space: nowrap;
}

.cg-acc-out {
    color: var(--mud-palette-primary);
}

.cg-acc-in {
    color: var(--mud-palette-success);
}

/* عددِ صورت‌حساب: رقم‌های هم‌عرض و ممیزها زیرِ هم (اعشار همیشه دو رقم است، پس لبه‌ی راست = ممیز) */
.cg-acc-table td.cg-acc-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cg-acc-table td.cg-acc-num.cg-acc-neg {
    color: var(--mud-palette-error);
}

/* «عدد + واحد» هرگز از وسط نشکند */
.cg-nw {
    white-space: nowrap;
}

.cg-acc-weightnote {
    font-size: 0.82rem;
    color: var(--gta-on-glass);
    background: var(--gta-glass-item);
    border-radius: var(--gta-radius-sm);
    padding: 6px 10px;
    margin-bottom: 8px;
}

.cg-acc-periods {
    margin-top: 14px;
}

.cg-acc-periods-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gta-on-glass);
    margin-bottom: 6px;
}

@media (max-width: 900px) {
    .cg-acc-head {
        grid-template-columns: 1fr;
    }

    /* پارتِ آبکاری روی باریک: هر خط سه ردیف — کارگاه+دکمه‌ها، شرح، بسته/وزن/قطعه */
    .cg-pd-cols,
    .cg-pd-kbd {
        display: none;
    }

    .cg-pd-row {
        grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "i w w a" "i p p p" "i k n c";
        row-gap: 6px;
        padding: 10px 0;
    }

    .cg-pd-row > :nth-child(1) { grid-area: i; align-self: start; margin-top: 8px; }
    .cg-pd-row > :nth-child(2) { grid-area: w; }
    .cg-pd-row > :nth-child(3) { grid-area: p; }
    .cg-pd-row > :nth-child(4) { grid-area: k; }
    .cg-pd-row > :nth-child(5) { grid-area: n; }
    .cg-pd-row > :nth-child(6) { grid-area: c; }
    .cg-pd-row > :nth-child(7) { grid-area: a; }
    .cg-pd-act button { width: 36px; height: 36px; }

    .cg-acc-search {
        max-width: none;
        width: 100%;
    }
}

html.gta-dark .cg-acc-tag,
html.gta-dark .cg-acc-zero-badge,
html.gta-dark .cg-part-corr {
    background: var(--gta-glass-item);
}

/* ── دیالوگِ طرف‌های امانت ── */

.cg-partner-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.cg-partner-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cg-partner-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--gta-radius-ctl);
    background: var(--gta-glass-item);
    border: 1px solid var(--gta-glass-border);
}

.cg-partner-off {
    opacity: 0.6;
}

.cg-partner-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cg-partner-nm {
    font-weight: var(--gta-on-glass-weight);
    color: var(--gta-on-glass);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cg-partner-badge {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--gta-glass-2);
    color: var(--gta-on-glass-soft);
}

.cg-partner-sub {
    font-size: 0.74rem;
    color: var(--gta-on-glass-soft);
}

.cg-partner-num {
    text-align: end;
    white-space: nowrap;
}

.cg-partner-rem {
    font-weight: 700;
    color: var(--mud-palette-primary);
    font-size: 0.84rem;
}

.cg-partner-cnt,
.cg-partner-clean {
    font-size: 0.7rem;
    color: var(--gta-on-glass-soft);
}

/* ── گزارشِ کارگاه‌ها ── */

.cg-rep-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* جدولِ پهن داخلِ خودش اسکرول می‌شود، نه کلِ صفحه */
.cg-rep-scroll {
    overflow-x: auto;
}

.cg-rep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 620px;
}

.cg-rep-table th,
.cg-rep-table td {
    padding: 7px 10px;
    text-align: start;
    border-bottom: 1px solid var(--gta-glass-border);
    color: var(--gta-on-glass);
    white-space: nowrap;
}

.cg-rep-table th {
    font-size: 0.74rem;
    color: var(--gta-on-glass-soft);
    font-weight: 600;
}

.cg-rep-name {
    font-weight: var(--gta-on-glass-weight);
}

.cg-rep-bad {
    color: var(--mud-palette-error);
    font-weight: 700;
}

.cg-rep-warn {
    color: var(--mud-palette-warning);
    font-weight: 700;
}

.cg-rep-open {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.cg-rep-na {
    color: var(--gta-on-glass-soft);
}

.cg-rep-note {
    font-size: 0.74rem;
    color: var(--gta-on-glass-soft);
    margin-top: 10px;
    line-height: 1.7;
}

/* ── گزارشِ کارگاه‌ها، دورِ دوم (۲ سپتامبر ۲۰۲۶): وزنِ دریافتی + چاپ ── */

/* ⚠️ عرضِ ثابت روی جعبه‌های فیلتر ممنوع: روی گوشیِ ۳۹۰ نوارِ فیلتر فقط ۲۷۸px است
   و جعبه‌ی ۱۸۶px بیرون می‌زد ⇒ «۱۴۰۵/۰۴/۳۱» بریده و «05/04/31» دیده می‌شد.
   عرض روی خودِ div است نه Style پیکر، چون Style به کاغذِ تقویمِ بازشو هم کپی می‌شود. */
.cg-rep-kind {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 190px;
}

.cg-rep-date {
    flex: 1 1 186px;
    min-width: 0;
    max-width: 220px;
}

@media (max-width: 700px) {
    .cg-rep-kind,
    .cg-rep-date {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* یازده ستونِ عددی بدونِ گروه‌بندی خوانده نمی‌شود؛ سرستونِ دوطبقه
   («آبکاری» / «اصلاح») و زیرنویسِ واحد، چشم را سرِ ستونِ درست می‌نشاند. */
.cg-rep-table thead th {
    vertical-align: bottom;
}

.cg-th-group {
    text-align: center;
    color: var(--gta-on-glass-title);
    font-weight: 700;
}

.cg-th-sub {
    display: block;
    font-size: 0.62rem;
    font-weight: 400;
    opacity: 0.75;
    margin-top: 2px;
}

.cg-rep-wide {
    min-width: 980px;
}

/* ستونی که فقط روی صفحه معنی دارد و روی کاغذ جا اشغال می‌کند */
.gta-printing .cg-noprint {
    display: none;
}

/* نامِ کارگاه سرِ اسکرولِ افقی نباید گم شود — وگرنه کاربر نمی‌داند عددی که
   می‌بیند مالِ کدام ردیف است (روی گوشی همیشه اسکرول لازم است). */
.cg-rep-stick {
    position: sticky;
    inset-inline-start: 0;
    /* ⚠️ همرنگِ کاغذِ مودال، نه شیشه‌ی روشن: با --gta-glass-strong در حالتِ شب
       یک نوارِ روشنِ بی‌دلیل روی ستونِ نام می‌افتاد (تستِ چشمیِ ۲ سپتامبر). */
    background: var(--gta-dlg-paper, var(--gta-glass-strong));
    z-index: 1;
}

.cg-rep-strong {
    font-weight: 700;
    color: var(--gta-on-glass-title);
}

.cg-rep-total td {
    font-weight: 700;
    border-top: 2px solid var(--gta-glass-border);
    border-bottom: none;
}

/* انتخابِ «آبکاری تازه / اصلاح» در فرمِ ثبتِ ارسال */
.cg-kindrow {
    margin: -4px 0 2px;
}

/* ═══ چاپ ═══
   این قواعد فقط داخلِ قابِ چاپ (window.gtaPrintArea) زنده می‌شوند — آن‌جا
   body کلاسِ `gta-printing` می‌گیرد. روی خودِ صفحه هیچ اثری ندارند، پس
   چاپِ بقیه‌ی صفحه‌ها (فاکتور، فیشِ حقوقی، چارت) دست‌نخورده می‌ماند. */
.cg-print-only {
    display: none;
}

/* ⚠️ زمینه‌ی aurora روی خودِ <html> با !important نشسته (خطِ ~۱۰۸) و داخلِ قابِ چاپ
   هم بار می‌شود ⇒ کاغذ سبزِ کم‌رنگ با تزئینِ گوشه درمی‌آمد. قابِ چاپ کلاسِ
   `gta-print-doc` روی <html> می‌گیرد تا این‌جا خنثی شود. */
html.gta-print-doc {
    background: #fff !important;
    background-image: none !important;
    min-height: 0;
}

/* ماندالای پس‌زمینه‌ی سایت (html::before/after، position:fixed) داخلِ قابِ چاپ روی هر کاغذ تکرار
   می‌شد؛ هرجا برگه کاغذ را کامل نمی‌پوشاند (ته برگه‌ی مشخصاتِ شاخه، ۲۸ سپ ۲۰۲۶) تکه‌اش چاپ می‌شد. */
html.gta-print-doc::before,
html.gta-print-doc::after {
    display: none !important;
}

html.gta-print-doc body,
.gta-printing {
    background: #fff !important;
    color: #000;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.gta-printing .cg-print-only {
    display: block;
}

.gta-printing .cg-print-head {
    margin-bottom: 10px;
    text-align: center;
}

.gta-printing .cg-print-title {
    font-size: 13pt;
    font-weight: 800;
}

.gta-printing .cg-print-sub {
    font-size: 8.5pt;
    margin-top: 3px;
}

.gta-printing .cg-print-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 5px;
    font-size: 8pt;
    border-top: 1px solid #999;
}

/* اسکرول و ستونِ چسبان روی کاغذ بی‌معنی‌اند و جدول را می‌بُرند */
.gta-printing .cg-rep-scroll {
    overflow: visible;
}

/* ═══ برگه‌ی چاپیِ پارتِ آبکاری (ConsignmentPartSheet.razor › .cg-part-sheet) ═══
   زبانِ طراحی = فاکتورِ فروشِ اینترنتی (OsSheet). روی صفحه پنهان است (.cg-print-only) و فقط
   داخلِ قابِ چاپ (body.gta-printing) زنده می‌شود.

   ⚠️ دورِ اول (۶ سپتامبر): سربرگِ چهارردیفه نصفِ برگه را می‌خورد · عنوان وسطِ کاغذ · QRِ سرگردان ·
      ۴۰٪ کاغذِ خالی · ستونِ قطعه‌ی همیشه‌خالی.
   ⚠️ دورِ دوم (۸ سپتامبر — ممیزیِ گرافیکیِ علیرضا روی خودِ کاغذ): ۳۵ کپسولِ خاکستری در جدول و
      هیچ سلسله‌مراتبی · خانه‌های دست‌نویسِ ۵mmیِ گرد که با خودکار نمی‌شد پرشان کرد · نقشِ اسلیمی
      زیرِ کادرِ توضیحات · کادرِ توضیحاتِ بی‌خط · سربرگِ نامتوازن · واحدِ سه‌بار تکرارشده ·
      «۵ کارگاه» دوبار · وضعیتِ متنیِ خشک · برگه ۱۵mm کوتاه‌تر از کاغذ.
   🔴 دورِ سوم (۱۰ سپتامبر — داوریِ مستقلِ design-judge، نمره‌ی ۳٫۳): این کاغذ **فتوکپی می‌شود**.
      نقشِ اسلیمی روی سربرگ (z-index:2، یعنی *روی* کارت‌ها نه پشتشان) در یک کپیِ کمی تیره
      سیاه می‌شد و QR و شماره‌ی پارت را می‌بلعید؛ کارتِ تیره‌ی لوگو مستطیلِ سیاه می‌شد.
      حالا: هیچ نقشِ تزئینی روی این برگه نیست، آرم تک‌رنگِ سبز است، QR از ۱۳٫۸ به ۱۸mm رفت
      و کارتِ شماره زمینه‌ی سفیدِ پُر دارد.

   ⭐ سلسله‌مراتبِ سه‌سطحیِ رنگ:
      سطح ۱ (سبزِ تیره #0E4224): عنوانِ سند، نوارِ جمع، نوارِ «هنگام برگشت»
      سطح ۲ (سبزِ برند #15532E): نوارِ سرستون، شماره‌ی پارت، کادرِ کارتِ هویت
      سطح ۳ (خاکستری/سبزِ خیلی کم‌رنگ): زبراییِ ردیف‌ها، کارتِ آمار، برچسب‌ها
      داده‌ی عددی سیاهِ جوهری می‌ماند تا سبز = ساختار و سیاه = عدد خوانده شود. */
.gta-printing .cg-part-sheet {
    --rf-green: #15532E;
    --rf-green-dk: #0E4224;
    --rf-gray: #D7D7D7;
    --rf-ink: #16202A;
    --ps-line: #CFD6D1;      /* خطِ نازکِ جداکننده‌ی ردیف‌ها (به‌جای کپسول) */
    --ps-zebra: #F4F7F5;     /* زبراییِ خیلی ملایم */
    /* 🔴 کادرِ خانه‌ی دست‌نویس = سبزِ برند (روشناییِ ۶۰). قبلاً #A0ABA4 بود (روشناییِ ۱۶۷) و
       در تنظیمِ **روشنِ** فتوکپی (آستانه‌ی ۱۷۰) خطِ نازکش بعد از تارشدگیِ عدسی سفید می‌شد:
       کاغذ بی‌جای‌نوشتن از دستگاه بیرون می‌آمد (داوریِ ۱۲ سپتامبر). هر جای نوشتن باید در
       هر سه تنظیم پیکسلِ تیره داشته باشد — گیتِ wr* همین را می‌سنجد. */
    --ps-writeb: var(--rf-green);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    /* @page margin=10mm ⇒ ارتفاعِ چاپ‌شدنی = ۲۹۷−۲۰ = ۲۷۷mm. قبلاً ۲۶۲ بود و ۱۵mm
       تهِ هر کاغذ بی‌دلیل خالی می‌ماند؛ ۱mm ذخیره تا گِردشدنِ px صفحه‌ی دوم نسازد. */
    min-height: 276mm;
    padding: 4mm 5mm;
    background: #fff;
    color: var(--rf-ink);
    direction: rtl;
    font-size: 9pt;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.gta-printing .cg-part-sheet *, .gta-printing .cg-part-sheet *::before, .gta-printing .cg-part-sheet *::after { box-sizing: border-box; }
.gta-printing .cg-part-sheet .rf-bar { font-size: 10pt; margin: 0 0 2.5mm; }

/* ───── نقشِ اسلیمیِ برند ─────
   ۱۰ سپتامبر یک‌بار کلاً `display:none` شد تا گاردِ فتوکپی سبز شود؛ علیرضا همان روز گفت
   این پس‌رفت است: آجری که کاغذ را «مالِ GTA» می‌کند حذف شده. حالا برگشته، ولی با سه قیدِ
   اندازه‌گیری‌شده که ایرادِ اصلی دیگر تکرار نشود:
     ۱) **z-index صفر** — پشتِ همه‌چیز. در فاکتور z-index:2 است و نقش *روی* کارت‌ها می‌افتد؛
        دقیقاً همین بود که در کپیِ تیره QR و شماره‌ی پارت را می‌بلعید.
     ۲) **فقط نیمه‌ی پایینِ کاغذ** — سربرگ (کارتِ QR، شماره‌ی پارت، آرم) و نوارِ سه عدد
        کاملاً بیرونِ دسترسِ نقش‌اند؛ گاردِ فتوکپی روی همان‌ها است.
     ۳) بیشترِ هر دو نقش **بیرونِ لبه‌ی کاغذ** است (عینِ فاکتور) و جوهرش با opacity رقیق‌تر
        از فاکتور است، چون این کاغذ برخلافِ فاکتور مرتب فتوکپی می‌شود.
   هر چیزی که دست‌نویس می‌شود یا باید خوانده شود، زمینه‌ی پُر + z-index ۱ دارد ⇒ نقش زیرش نمی‌رود. */
.gta-printing .cg-part-sheet .rf-orn {
    display: block; position: absolute; z-index: 0; pointer-events: none; user-select: none;
    opacity: .55; filter: grayscale(.7) brightness(1.02); mix-blend-mode: multiply;
}
/* لبه‌ی راست، پایین‌تر از نوارِ آمار (نقشه‌ی y: سربرگ ۰–۴۰، آمار ۴۰–۶۴ ⇒ از ۹۶ به بعد) */
.gta-printing .cg-part-sheet .cg-ps-orn-a { width: 118mm; right: -62mm; top: 96mm; }
/* گوشه‌ی پایین-چپِ کاغذ (همان جای .rf-orn-b فاکتور) */
.gta-printing .cg-part-sheet .cg-ps-orn-b { width: 104mm; left: -58mm; bottom: -34mm; }

/* هرچه خوانده یا نوشته می‌شود، زمینه‌ی پُر دارد و روی نقش می‌نشیند — نه زیرش */
.gta-printing .cg-part-sheet .cg-ps-idcard,
.gta-printing .cg-part-sheet .cg-ps-logowrap,
.gta-printing .cg-part-sheet .cg-ps-write,
.gta-printing .cg-part-sheet .cg-ps-fbox,
.gta-printing .cg-part-sheet .cg-ps-note-box,
.gta-printing .cg-part-sheet .cg-ps-sign { position: relative; z-index: 1; }

/* ───── سربرگ = باندِ سبزِ پهنِ فاکتور: آرم | عنوان | تراشه‌ی سفیدِ شماره و QR ─────
   ۱۱ سپتامبر ۲۰۲۶: سربرگِ قبلی (دو کارتِ سفیدِ خط‌نازک + خطِ سبزِ ۲px) «فرمِ اداری» بود و
   حسِ پس‌رفتِ کلِ کاغذ از همین‌جا می‌آمد. الگو = .rf-b-banner برچسبِ ارسالِ فاکتور (باند +
   نشان + خطِ جداکننده + تراشه‌ی سفیدِ QR).
   دو کارتِ کناری (آرم و تراشه‌ی شماره) با align-items:stretch واقعاً هم‌ارتفاع‌اند و هر دو
   زمینه‌ی کدرِ خودشان را دارند، پس اندازه‌گیری و چشم یک چیز می‌بینند (درسِ داوریِ ۱۰ سپتامبر).
   بودجه: باند ~۳۲mm + سطرِ آبکار/تاریخ ~۷mm < سقفِ HeadMm=44. */
.gta-printing .cg-ps-head {
    position: relative; z-index: 1;
    display: flex; align-items: stretch; gap: 3.2mm;
    background: var(--rf-green); color: #fff;
    border-radius: 4.5mm; padding: 1.8mm 1.8mm 1.8mm 1.8mm;
    break-inside: avoid;
}
/* سقفِ سختِ سربرگ: ثابتِ HeadMm در ConsignmentPartSheet.razor روی همین عدد بسته شده.
   بدونِ سقف، هر رشدِ کوچکِ سربرگ بی‌صدا یک صفحه‌ی اضافه می‌سازد.
   ⚠️ فقط در عرضِ کاغذ. در پیش‌نمایشِ گوشیِ ۳۹۰ عنوان دو-سه خطی می‌شود و سقف سرش را
   می‌بُرید — و این کلیپ را خودِ من امروز ساختم. سرِ چاپ، عرضِ چیدمان همیشه عرضِ A4 است
   پس سقف همان‌جا که لازم است اعمال می‌شود. */
@media (min-width: 560px) {
    .gta-printing .cg-ps-head { max-height: 44mm; }
}
/* پیش‌نمایشِ گوشی (۳۹۰): عنوان به سطرِ دوم می‌رود؛ آرم و تراشه‌ی شماره کنارِ هم می‌مانند */
@media (max-width: 559.98px) {
    .gta-printing .cg-ps-head { flex-wrap: wrap; justify-content: space-between; }
    .gta-printing .cg-ps-div { display: none; }
    .gta-printing .cg-ps-title { order: 3; flex-basis: 100%; }
}
/* کارتِ آرم = همان تصویرِ کارتِ سبز-طلاییِ فاکتور. زمینه‌ی تصویر دقیقاً همان
   --rf-green است (اندازه‌گیری‌شده) ⇒ داخلِ باند درز نمی‌دهد. */
.gta-printing .cg-ps-logowrap {
    flex: 0 0 34mm; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.2mm;
    background: var(--rf-green); border-radius: 3mm; overflow: hidden;
}
.gta-printing .cg-ps-logo-card { display: block; width: 34mm; height: auto; }
/* آرمِ تک‌رنگ (نشانِ ماسک‌شده + واژه‌نشانِ متنی) فقط در نسخه‌ی «کم‌جوهر» دیده می‌شود.
   🔴 تاریخچه: `@media print and (monochrome)` برای این سوئیچ کدِ مرده بود — کرومیوم آن ویژگی را
   نه برای چاپِ سیاه‌وسفید عوض می‌کند نه شبیه‌سازی‌اش را می‌پذیرد (brand-compare/mono-probe.js).
   ⇒ سوئیچ حالا کلاسِ واقعیِ body.gta-print-copy است که gtaPrintArea می‌گذارد (انتخابِ کاربر). */
.gta-printing .cg-ps-mark,
.gta-printing .cg-ps-wordmark { display: none; }
.gta-printing .cg-ps-mark {
    width: 12mm; height: 17mm;
    background-color: var(--rf-green);
    -webkit-mask: url('img/os-logo-mark-v2.png') center / contain no-repeat;
    mask: url('img/os-logo-mark-v2.png') center / contain no-repeat;
}
.gta-printing .cg-ps-wordmark {
    direction: ltr; font-size: 10pt; font-weight: 800;
    letter-spacing: 1.1px; color: #856D35; line-height: 1; text-align: center;
}
.gta-printing .cg-ps-wordmark::after {
    content: 'JEWELRY'; display: block; margin-top: .8mm;
    font-size: 5.6pt; font-weight: 700; letter-spacing: 3.4px; color: var(--rf-green);
}
/* خطِ جداکننده‌ی سفید میانِ آرم و عنوان — عینِ .rf-b-div فاکتور */
.gta-printing .cg-ps-div { flex: 0 0 0; width: 0; border-right: 1pt solid rgba(255,255,255,.7); margin: 2.4mm 0; }

.gta-printing .cg-ps-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.gta-printing .cg-ps-title h1 { margin: 0; font-size: 18pt; font-weight: 800; color: #fff; line-height: 1.2; }
.gta-printing .cg-ps-sub { font-size: 9pt; color: #DCE9E0; margin-top: .8mm; }
/* آبکار/تاریخ/وضعیت زیرِ باند و روی سفید: نامِ آبکار گاهی دست‌نویس است و روی سبز نمی‌شود نوشت */
.gta-printing .cg-ps-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.6mm 6mm; margin: 1.8mm 1.5mm 0; font-size: 9pt; color: #33404A; justify-content: space-between; }
.gta-printing .cg-ps-meta b { font-weight: 800; }
/* سه گروهِ «قرصِ سبز + مقدار» که کلِ عرضِ زیرِ باند را می‌گیرند (۱۲ سپتامبر). نامِ آبکارِ
   نامعلوم یک خانه‌ی سفیدِ کادردارِ واقعی است — نه نقطه‌چین، و نه نیمه‌ی چپِ خالیِ فرمِ اداری. */
.gta-printing .cg-ps-mi { display: inline-flex; align-items: center; gap: 1.5mm; }
.gta-printing .cg-ps-mv.cg-ps-write { min-width: 38mm; min-height: 6.2mm; }

/* وضعیت = نشانِ رنگیِ کوچک، نه متنِ خشک. هر دو حالت در چاپِ سیاه‌سفید هم از هم جدا
   خوانده می‌شوند (توخالی با کادرِ تیره ↔ پُرِ خاکستری). */
.gta-printing .cg-ps-state { display: inline-flex; align-items: center; gap: 1.4mm; border-radius: 999px; padding: .5mm 2.6mm; font-size: 8.4pt; font-weight: 800; }
.gta-printing .cg-ps-state i { width: 2mm; height: 2mm; border-radius: 999px; display: block; }
.gta-printing .cg-ps-state-open { background: #fff; border: .9px solid var(--rf-green); color: var(--rf-green); }
.gta-printing .cg-ps-state-open i { background: var(--rf-green); }
.gta-printing .cg-ps-state-done { background: #ECEEED; border: .9px solid #A9B2AC; color: #3F4A52; }
.gta-printing .cg-ps-state-done i { background: #6E7A84; }

/* تراشه‌ی هویتِ پارت داخلِ باند (همان تراشه‌ی سفیدِ QRِ فاکتور): [برچسب + شماره] | QR.
   افقی، نه ستونی: ستونی ۳۹mm ارتفاع می‌خواست و باند از سقف رد می‌شد.
   🔴 زمینه‌ی سفیدِ پُر اجباری است: هرچیزی پشتِ QR/شماره در فتوکپی می‌تواند سیاه شود.
   QRِ svg خودش ۴ ماژول ناحیه‌ی آرام دارد + ۱mm سفیدِ .cg-ps-qr ⇒ لبه‌ی سبزِ باند به کد نمی‌رسد. */
.gta-printing .cg-ps-idcard {
    flex: 0 0 auto; text-align: center;
    border-radius: 3mm; background: #fff;
    padding: 1.2mm 1.2mm 1.2mm 2.4mm; display: flex; flex-direction: row;
    align-items: center; justify-content: center; gap: 1.6mm;
}
/* برچسب بالای شماره می‌نشیند، نه کنارش: قرصِ کنارِ عدد هم عرضِ کارت را می‌خورد و هم
   عدد را از مرکز بیرون می‌برد (در پیش‌نمایشِ اول همین شد). */
/* شکافِ ۰٫۸ کم بود: در فتوکپیِ تیره نوارِ سیاهِ قرص سرِ رقم‌ها را می‌بُرید (ایرادِ داور).
   هزینه‌اش از QR جبران شد (۲۵ ⟶ ۲۴mm) تا سربرگ از سقفِ ۴۴mm رد نشود. */
.gta-printing .cg-ps-idrow { display: flex; flex-direction: column; align-items: center; gap: 1.6mm; min-width: 17mm; }
/* قرصِ سبز = برچسبِ فاکتور. عمداً فقط *برچسب* رنگ می‌گیرد؛ خودِ شماره و QR روی سفیدِ پُر
   می‌مانند چون گاردِ فتوکپی روی همین دو تاست. */
/* ۷٫۴pt در فتوکپیِ تیره له می‌شد (نوشته‌ی سفیدِ نازک روی قرصِ سیاه‌شده) ⇒ درشت‌تر و پُرتر */
.gta-printing .cg-ps-idlbl { font-size: 8.2pt; font-weight: 800; padding: .4mm 3.2mm; }
/* line-height:1 کم بود: سرِ رقم‌های فارسی بالاتر از جعبه‌شان می‌نشیند و به قرصِ برچسب
   می‌چسبید (دیده‌شده روی پیش‌نمایشِ ۱۱ سپتامبر). ۱٫۳ = فاصله‌ی واقعی، نه فقط روی کاغذِ CSS. */
.gta-printing .cg-ps-idno { font-size: 20pt; font-weight: 800; line-height: 1.3; color: var(--rf-green); direction: ltr; }
/* QR: ۲۵mm جعبه ⇒ خودِ کد ~۱۸mm (svg چهار ماژول ناحیه‌ی آرام دارد) + ۱mm سفیدِ فیزیکی.
   قبلاً ۱۹mm بود و کد فقط ۱۳٫۸mm — در کپیِ تیره غیرقابلِ خواندن. */
.gta-printing .cg-ps-qr { background: #fff; padding: 1mm; line-height: 0; }
.gta-printing .cg-ps-qr svg { width: 24mm; height: 24mm; display: block; }

/* ───── نسخه‌ی «کم‌جوهر برای فتوکپی» (body.gta-print-copy؛ انتخابِ کاربر کنارِ دکمه‌ی چاپ) ─────
   همان چیدمان و **همان ارتفاع** (کادر با box-shadow، نه border ⇒ صفحه‌بندی تکان نمی‌خورد)؛
   فقط جوهر کم می‌شود: باندِ سفید با کادرِ سبز و آرمِ تک‌رنگ به‌جای کارتِ سبز.
   گاردِ photocopy-check روی همین نسخه جوهرِ ناحیه‌ی آرم را ≤۰٫۵۵ می‌خواهد. */
.gta-printing.gta-print-copy .cg-ps-head { background: #fff; color: inherit; box-shadow: inset 0 0 0 1.6px var(--rf-green); }
.gta-printing.gta-print-copy .cg-ps-logowrap { background: #fff; }
.gta-printing.gta-print-copy .cg-ps-logo-card { display: none; }
.gta-printing.gta-print-copy .cg-ps-mark,
.gta-printing.gta-print-copy .cg-ps-wordmark { display: block; }
.gta-printing.gta-print-copy .cg-ps-div { border-right-color: #A9B8AF; }
.gta-printing.gta-print-copy .cg-ps-title h1 { color: var(--rf-green-dk); }
.gta-printing.gta-print-copy .cg-ps-sub { color: #4A5760; }
.gta-printing.gta-print-copy .cg-ps-idcard { box-shadow: inset 0 0 0 1.2px var(--rf-green); }
/* قرصِ برچسبِ شماره توخالی: نوشته‌ی سبز روی سفید از کپیِ تیره سالم درمی‌آید، سفید روی سبز نه */
.gta-printing.gta-print-copy .cg-ps-idlbl { background: #fff; color: var(--rf-green); box-shadow: inset 0 0 0 1.1px var(--rf-green); }
/* ── «کم‌جوهر» برای **کلِ برگه**، نه فقط سربرگ (۱۱ سپتامبر، دیده‌شده روی شبیه‌سازِ فتوکپی) ──
   در کپیِ تیره هر سطحِ پُر — خاکستریِ خانه‌های آمار (#D7D7D7)، قرص‌ها، نوارِ سرستون، ردیفِ جمع —
   سیاهِ یکدست می‌شود و **عددِ وزن و کارگاه داخلش محو می‌شود**. نسخه‌ای که اسمش «برای فتوکپی» است
   نباید هیچ سطحِ پُری داشته باشد: همه سفید با کادر، نوشته‌ی سبز. دایره‌های شماره‌ی ردیف پُر
   می‌مانند (کوچک‌اند و رقمِ سفیدشان در کپی خوانا ماند — برشِ بزرگ‌شده).
   ⛔ فقط outline/box-shadow، نه border ⇒ هیچ ارتفاعی عوض نمی‌شود و صفحه‌بندی همان است. */
.gta-printing.gta-print-copy .cg-part-sheet { --rf-gray: #fff; --ps-zebra: #fff; }
.gta-printing.gta-print-copy .cg-part-sheet .rf-pill,
.gta-printing.gta-print-copy .cg-part-sheet .cg-ps-stat-lbl,
.gta-printing.gta-print-copy .cg-part-sheet .cg-ps-flbl {
    background: #fff; color: var(--rf-green-dk); box-shadow: inset 0 0 0 1.1px var(--rf-green);
}
/* سرستون: یک کادرِ یکپارچه دورِ کلِ نوار، جداکننده‌های کم‌رنگ میانِ ستون‌ها */
.gta-printing.gta-print-copy .cg-part-sheet .rf-thead { outline: 1.4px solid var(--rf-green); outline-offset: -1.4px; border-radius: 2mm; }
.gta-printing.gta-print-copy .cg-part-sheet .rf-thead > .rf-pill { box-shadow: none; }
.gta-printing.gta-print-copy .cg-part-sheet .rf-thead > .rf-pill:not(:first-child) { border-inline-start-color: var(--ps-line); }
/* «مطابقِ ردیفِ جمعِ جدول» در کم‌جوهر فقط متن است، نه خانه — وگرنه با خانه‌ی نوشتن اشتباه می‌شود */
.gta-printing.gta-print-copy .cg-ps-fbox.cg-ps-once { box-shadow: none; }
/* ردیفِ جمع و نوارِ «هنگام برگشت»: کادرِ سبزِ پُررنگ به‌جای سبزِ پُر */
.gta-printing.gta-print-copy .cg-part-sheet .cg-ps-total,
.gta-printing.gta-print-copy .cg-part-sheet .rf-bar,
.gta-printing.gta-print-copy .cg-part-sheet .cg-ps-receipt-bar {
    background: #fff; color: var(--rf-green-dk); outline: 1.6px solid var(--rf-green-dk); outline-offset: -1.6px;
}
.gta-printing.gta-print-copy .cg-part-sheet .cg-ps-total-lbl { color: var(--rf-green-dk); }
.gta-printing.gta-print-copy .cg-part-sheet .cg-ps-total .cg-ps-cell { color: var(--rf-ink); }
.gta-printing.gta-print-copy .cg-part-sheet .cg-ps-total .cg-ps-write { border-color: var(--ps-writeb); }
.gta-printing.gta-print-copy .cg-ps-state-done { background: #fff; }

/* ───── سه عددِ اصلی، خوانا از دو متری ─────
   هر سه دقیقاً سه سطر دارند (برچسب، عدد، زیرنویس) و flex:1 1 0 ⇒ هم‌عرض و هم‌ارتفاع.
   واحد فقط در برچسب می‌آید؛ سطرِ سومِ «گرم» حذف شد (سه‌بار تکرارِ واحد).
   ⛔ «وزن برگشتی» دیگر خانه‌ی دست‌نویس نیست (یک عدد = یک جای نوشتن). */
.gta-printing .cg-ps-stats { position: relative; z-index: 1; display: flex; gap: 3mm; margin: 3mm 0; }
/* زبانِ فاکتور = «قرصِ سبز + خانه‌ی خاکستریِ پُر»، نه کادرِ خط‌نازکِ توخالی.
   کادرِ توخالی کاغذ را سرد و اداری می‌کند (ایرادِ علیرضا، ۱۰ سپتامبر). */
.gta-printing .cg-ps-stat {
    flex: 1 1 0; min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 1.2mm;
    background: transparent; border: 0; padding: 0;
}
.gta-printing .cg-ps-stat-lbl {
    display: block; background: var(--rf-green); color: #fff; border-radius: 999px;
    padding: .9mm 3mm; font-size: 8pt; font-weight: 700; line-height: 1.25;
}
.gta-printing .cg-ps-stat-box {
    display: flex; flex-direction: column; justify-content: center; gap: .4mm;
    /* 🔴 خاکستریِ پُر (#D7D7D7) در فتوکپیِ تیره مستطیلِ سیاه می‌شد و عددِ داخلش را می‌بلعید —
       «وزن ارسالی» و «کارگاه» روی سندِ تحویلِ نقره محو (داوریِ ۱۲ سپتامبر). سفید با کادرِ نازک:
       برچسبِ قرصِ سبز زبانِ فاکتور را نگه می‌دارد، عدد روی سفید می‌ماند. */
    background: #fff; box-shadow: inset 0 0 0 .9px var(--ps-line);
    border-radius: 3mm; padding: 1.4mm 2mm 1.2mm; flex: 1 1 auto;
}
.gta-printing .cg-ps-stat-num { display: block; font-size: 16pt; font-weight: 800; color: var(--rf-ink); direction: ltr; min-height: 7.4mm; line-height: 1.3; font-variant-numeric: tabular-nums; }
.gta-printing .cg-ps-stat-hint { display: block; min-height: 3.6mm; font-size: 7pt; color: #3F4A52; line-height: 1.4; }

/* ───── جدول ─────
   سرستون = یک نوارِ سبزِ یکپارچه (نه ۷ قرصِ جدا)، ردیف‌ها فقط خطِ نازک + زبراییِ ملایم،
   و تنها ردیفِ جمع قرصِ پُررنگ می‌گیرد. عرضِ ستون‌ها از خودِ جدول می‌آید (کلاسِ
   cg-ps-tbl-p/-g) نه از شمارشِ فرزندانِ هر ردیف — وگرنه ردیفِ جمع که یک خانه کمتر دارد
   با ردیف‌های بالا هم‌تراز نمی‌ماند. */
.gta-printing .cg-part-sheet .rf-tbl { position: relative; z-index: 1; gap: 0; }
.gta-printing .cg-part-sheet .cg-ps-tr { gap: 0; align-items: stretch; }
/* ۲۸ سپتامبر ۲۰۲۶: چهار ستونِ وزن — قبل | دریافتی | آبکاری‌شده | عودتیِ آبکاری‌نشده.
   سه ستونِ آخر خانه‌ی دست‌نویس‌اند؛ ≥۲۰mm تا عددِ «۱٬۳۶۹٫۸۶» با خودکار جا شود. */
/* بدونِ قطعه، بدونِ درصد (پارتِ بازِ معمول) */
/* دو سرستونِ اول بلندند («ارسال‌شده از شرکت»، «دریافت‌شده توسط آبکار») ⇒ پهن‌تر، تا دوسطری بمانند */
.gta-printing .cg-ps-tbl .cg-ps-tr { grid-template-columns: 7mm 1fr 1.3fr 25mm 27mm 20mm 20mm; }
.gta-printing .cg-ps-tbl .cg-ps-total-lbl { grid-column: 2 / 4; }
/* با درصد (پارتی که برگشتش ثبت شده) */
.gta-printing .cg-ps-tbl-g .cg-ps-tr { grid-template-columns: 7mm 1fr 1.2fr 24mm 26mm 19mm 19mm 15mm; }
.gta-printing .cg-ps-tbl-g .cg-ps-total-lbl { grid-column: 2 / 4; }
/* با ستونِ قطعه */
.gta-printing .cg-ps-tbl-p .cg-ps-tr { grid-template-columns: 7mm 1fr 1.2fr 11mm 24mm 26mm 19mm 19mm; }
.gta-printing .cg-ps-tbl-p .cg-ps-total-lbl { grid-column: 2 / 5; }
.gta-printing .cg-ps-tbl-p.cg-ps-tbl-g .cg-ps-tr { grid-template-columns: 7mm 1fr 1.1fr 11mm 23mm 25mm 18mm 18mm 15mm; }
.gta-printing .cg-ps-tbl-p.cg-ps-tbl-g .cg-ps-total-lbl { grid-column: 2 / 5; }

.gta-printing .cg-part-sheet .rf-thead > .rf-pill {
    border-radius: 0; min-height: 8.6mm; font-size: 8.2pt; padding: 1mm 2mm;
    white-space: normal; line-height: 1.25;
    /* سرستون هم‌لبه‌ی داده‌ی خودش: هم متن و هم عدد به لبه‌ی **راستِ** سلول می‌چسبند.
       ⚠️ در RTL، `flex-end` یعنی چپ — دورِ اول همین را اشتباه گذاشتم و داور با اندازه‌گیری
       گرفت: سرستونِ «کارگاه» ۱۲۸ پیکسل چپ‌ترِ داده‌اش نشسته بود. */
    justify-content: flex-start; text-align: right;
}
.gta-printing .cg-part-sheet .rf-thead > .cg-ps-th-idx { justify-content: center; text-align: center; }
.gta-printing .cg-part-sheet .rf-thead > .rf-pill:first-child { border-inline-start: 0; border-start-start-radius: 2mm; border-end-start-radius: 2mm; }
.gta-printing .cg-part-sheet .rf-thead > .rf-pill:not(:first-child) { border-inline-start: .8px solid rgba(255, 255, 255, .45); }
.gta-printing .cg-part-sheet .rf-thead > .rf-pill:last-child { border-start-end-radius: 2mm; border-end-end-radius: 2mm; }

.gta-printing .cg-part-sheet .cg-ps-row { border-bottom: .7px solid var(--ps-line); break-inside: avoid; }
.gta-printing .cg-part-sheet .cg-ps-row:nth-child(even) { background: var(--ps-zebra); }
/* ⚠️ #6E7A84 روی ردیفِ زبرایی فقط ۴٫۰۷ کنتراست می‌داد (زیرِ ۴٫۵) و شماره‌ی ردیف
   در چاپِ سیاه‌سفید محو می‌شد — تستِ کنتراستِ خودِ کاغذ گرفتش. */
/* شماره‌ی ردیف = دایره‌ی سبزِ فاکتور (.rf-num)؛ رقمِ سفید روی سبزِ پُر در کپی هم می‌ماند */
.gta-printing .cg-ps-idx { display: flex; align-items: center; justify-content: center; }
/* ۸pt نه ۷٫۴: در کپیِ تیره (۲۳۵) رقمِ ۷٫۴ خوانا بود ولی نازک (برشِ بزرگ‌شده، ۱۱ سپتامبر) */
.gta-printing .cg-ps-idx .rf-num { width: 5.4mm; height: 5.4mm; flex: 0 0 5.4mm; font-size: 8pt; font-weight: 800; line-height: 1; }
.gta-printing .cg-ps-cell {
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 1.2mm 2mm; min-height: 11mm; font-size: 9pt; font-weight: 600;
    overflow: hidden; line-height: 1.35;
}
/* پارتِ تسویه‌شده هیچ خانه‌ی دست‌نویسی ندارد ⇒ ردیف‌ها فشرده‌تر می‌شوند و برگه‌ای که
   باز بود دو صفحه می‌شد، بسته که شد در یک صفحه جا می‌گیرد. */
.gta-printing .cg-ps-done .cg-ps-cell { min-height: 8mm; }
/* ⚠️ ۱۸mm بود و پارتِ تسویه‌شده‌ی ۱۰خطی را به ۲۷۸٫۳mm می‌برد (۱٫۳ بیرونِ ناحیه‌ی چاپ).
   پارتِ بسته دست‌نویس نمی‌خواهد، پس همین ۱۴ کافی است و برگه یک‌صفحه‌ای می‌ماند. */
.gta-printing .cg-ps-done .cg-ps-note-box { min-height: 8.5mm; }
.gta-printing .cg-ps-cell-r { justify-content: flex-start; text-align: right; font-weight: 500; }
/* ستونِ عددی راست‌چین با ارقامِ هم‌عرض ⇒ ممیزها زیرِ هم می‌افتند و چشم می‌تواند جمع بزند
   (قبلاً وسط‌چین بود و مقایسه‌ی ستونی ممکن نبود). خودِ اعشار هم روی کاغذ دو رقمِ ثابت
   است (GtaNum.Fmt(v,2) در razor) وگرنه ارقامِ هم‌عرض هم ستون را صاف نمی‌کرد. */
.gta-printing .cg-ps-num {
    position: relative;
    direction: ltr; unicode-bidi: isolate; justify-content: flex-end;
    font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.gta-printing .cg-ps-strong { font-weight: 800; }

.gta-printing .cg-part-sheet .cg-ps-total { margin-top: 1.6mm; background: var(--rf-green-dk); border-radius: 2mm; color: #fff; break-inside: avoid; }
.gta-printing .cg-ps-total-lbl { display: flex; align-items: center; justify-content: flex-start; padding: 1.4mm 2.5mm; font-size: 9pt; font-weight: 800; color: #fff; }
.gta-printing .cg-part-sheet .cg-ps-total .cg-ps-cell { color: #fff; font-weight: 800; }
.gta-printing .cg-part-sheet .cg-ps-total .cg-ps-write { background: #fff; border-color: #fff; }

/* مبنای درصدِ افزایش — وقتی با دو عددِ چاپ‌شده‌ی ردیفِ جمع یکی نیست.
   چرا لازم شد: درصدِ پارت عمداً روی «وزنِ زیرِ آبکاری» حساب می‌شود (خط‌های اصلاح و وزنِ
   برنگشته کنار می‌روند)، پس آبکاری که دو جمعِ کاغذ را تقسیم کند عددِ دیگری می‌گیرد.
   روی سندی که امضا می‌شود، عدد باید از روی خودِ کاغذ قابلِ بازسازی باشد. */
.gta-printing .cg-ps-basis { position: relative; z-index: 1; margin-top: 1.4mm; font-size: 7.6pt; color: #55606A; line-height: 1.35; }
.gta-printing .cg-ps-basis b { font-weight: 800; color: var(--rf-ink); direction: ltr; unicode-bidi: isolate; }
.gta-printing .cg-ps-basis b.cg-ps-mark-ref { direction: rtl; color: #55606A; }
/* نشانِ پانوشت کنارِ درصد: مطلق و بیرونِ جریانِ عدد، وگرنه عددِ همان ردیف از لبه‌ی
   ستون جدا می‌شود و همان هم‌لبه‌بودنی که تازه درست شده بود خراب می‌شود. */
.gta-printing .cg-ps-fn { position: absolute; left: .8mm; top: 50%; transform: translateY(-50%); font-size: 7pt; line-height: 1; color: #55606A; }

/* ───── بلوکِ برگشت — فضای وسطِ برگه کار می‌کند ─────
   ⭐ کشسان است و باقیِ ارتفاعِ کاغذ را می‌خورد، وگرنه بینِ توضیحات و امضاها حفره می‌ماند. */
.gta-printing .cg-ps-receipt { break-inside: avoid; position: relative; z-index: 1; margin-top: 4mm; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.gta-printing .cg-ps-receipt-bar { background: var(--rf-green-dk); }
.gta-printing .cg-ps-receipt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-bottom: 3mm; }
.gta-printing .cg-ps-field { display: flex; flex-direction: column; gap: 1mm; }
/* برچسبِ خانه‌ها هم قرصِ سبزِ فاکتور شد — همان آجری که کاغذ را گرم می‌کند */
.gta-printing .cg-ps-flbl {
    display: inline-flex; align-self: flex-start; background: var(--rf-green); color: #fff;
    border-radius: 999px; padding: .7mm 3mm; font-size: 7.8pt; font-weight: 700; line-height: 1.25;
}
.gta-printing .cg-ps-fbox { display: flex; align-items: center; padding: 1.2mm 3mm; min-height: 9.4mm; font-size: 10pt; font-weight: 700; border-radius: 2.5mm; background: #fff; }
/* خانه‌ی فقط‌خواندنی کادرِ **کم‌رنگ** دارد و خانه‌ی دست‌نویس کادرِ سبزِ پُررنگ: تفاوتِ
   «این‌جا ننویس / این‌جا بنویس» با ضخامتِ جوهر خوانده می‌شود، نه با خاکستریِ پُر. */
.gta-printing .cg-ps-fbox:not(.cg-ps-write) { box-shadow: inset 0 0 0 .9px var(--ps-line); }
/* «این عدد را این‌جا ننویس، آن‌جا بنویس» — راهنما، نه کادرِ نوشتن. تنها راهی که
   جلوی نوشتنِ یک عدد در دو جای متفاوتِ سندِ نقره را می‌گیرد. */
/* خانه‌ی خاکستریِ فقط‌خواندنی با عبارتِ رسمی (شکل از .cg-ps-fbox) — نه جمله‌ی راهنما */
.gta-printing .cg-ps-once { font-size: 8.6pt; font-weight: 600; color: #46525A; line-height: 1.35; }

/* خانه‌ی دست‌نویس: مستطیلِ کم‌رنگ با ارتفاعِ واقعیِ نوشتن (≥۸mm با احتسابِ حاشیه)،
   نه کپسولِ گردِ ۵mmی که خودکار رویش جا نمی‌شد. */
.gta-printing .cg-ps-write { background: #fff; border: 1px solid var(--ps-writeb); border-radius: 1.2mm; }
.gta-printing .cg-ps-cell.cg-ps-write { margin: .7mm 1.2mm; min-height: 8.6mm; }

/* کادرِ توضیحات: خطوطِ راهنمای دست‌نویس داخلِ خودِ کادر — نه نقشِ اسلیمی که متن را بدخوان می‌کرد */
.gta-printing .cg-ps-note { display: flex; flex-direction: column; gap: 1mm; flex: 1 1 auto; min-height: 0; }
.gta-printing .cg-ps-note-box {
    /* کمینه‌ی یک سطرِ نوشتن (۲۸ سپ ۲۰۲۶): کادر کشسان است و روی پارتِ کوتاه خودش بزرگ می‌شود؛
       کمینه‌ی ۲۱mm پارتِ ۸خطی را به صفحه‌ی دوم می‌فرستاد و صفحه‌ی اول نیمه‌خالی می‌ماند. */
    display: block; flex: 1 1 auto; min-height: 8.5mm;
    border: 1px solid var(--ps-writeb); border-radius: 2mm;
    background-color: #fff;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 7.7mm, #E0E6E2 7.7mm, #E0E6E2 8mm);
    background-position: 0 1.5mm;
    padding: 2mm 3mm; font-size: 9pt; line-height: 8mm; overflow: hidden;
}

/* ───── امضاها و پاصفحه ─────
   زیرِ هر امضا خطِ «نام و تاریخ» است: بدونش کسی فقط خط‌خطی می‌کند و سه ماه بعد
   معلوم نیست چه کسی و چه روزی تحویل گرفته. */
.gta-printing .cg-ps-signs { position: relative; z-index: 2; margin-top: 5mm; display: flex; gap: 4mm; break-inside: avoid; }
.gta-printing .cg-ps-sign {
    flex: 1 1 0; min-height: 18mm; border-radius: 2.5mm; display: flex; flex-direction: column;
    align-items: stretch; justify-content: space-between; padding: 1.8mm 2mm 1.4mm;
    color: var(--rf-green-dk); font-weight: 800; font-size: 8.5pt;
    /* 🔴 داوریِ ۱۱ سپتامبر: خانه‌ی خاکستریِ پُر (زبانِ «مهر و امضا»ی فاکتور) در تنظیمِ
       تیره‌ی فتوکپی یکدست سیاه می‌شد ⇒ روی کاغذی که کارش امضاکردن است، جای امضا از بین
       می‌رفت. همان قاعده‌ای که برای خانه‌های دست‌نویس گذاشته بودیم این‌جا هم صادق است:
       **هرجا آدم می‌نویسد، سفید.** گرمی از عنوانِ سبزِ برند و کادرِ پُررنگ می‌آید، نه از زمینه. */
    background: #fff; border: 1.1px solid var(--rf-green);
}
.gta-printing .cg-ps-sign-t { display: block; text-align: center; }
.gta-printing .cg-ps-sign-b { display: block; font-size: 7.2pt; font-weight: 600; color: #46525A; border-top: .9px solid var(--ps-writeb); padding-top: .8mm; }
.gta-printing .cg-ps-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 6mm; margin-top: 3mm; padding-top: 2mm; border-top: .9px dashed #A9B4BC; color: #55606A; font-size: 8pt; background: #fff; }

/* ═══ سربرگ/پاصفحه‌ی برندیِ مشترکِ چاپ‌های امانت (cg-ph / cg-pf) — ۸ سپتامبر ۲۰۲۶ ═══
   انتخابِ علیرضا: «همین زبانِ فاکتور را روی بقیه‌ی چاپ‌ها هم ببر». صورت‌حسابِ حسابِ جاری و
   گزارشِ عملکرد تا دیروز سربرگِ متنیِ وسط‌چین داشتند؛ حالا همان ساختارِ برگه‌ی پارت را دارند:
   کارتِ لوگو | عنوان و ریزاطلاعات | کارتِ عددِ کلیدی. فقط داخلِ قابِ چاپ زنده می‌شود. */
.gta-printing .cg-ph {
    display: flex; align-items: stretch; gap: 5mm;
    padding-bottom: 3mm; margin-bottom: 3.5mm;
    border-bottom: 2.2px solid #15532E;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.gta-printing .cg-ph-logo { width: 30mm; height: 30mm; object-fit: contain; border-radius: 3mm; display: block; }
.gta-printing .cg-ph-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.gta-printing .cg-ph-title h1 { margin: 0; font-size: 15pt; font-weight: 800; color: #15532E; line-height: 1.25; }
.gta-printing .cg-ph-sub { font-size: 8.5pt; color: #4A5760; margin-top: .7mm; }
.gta-printing .cg-ph-meta { display: flex; flex-wrap: wrap; gap: .8mm 6mm; margin-top: 2mm; font-size: 8.5pt; color: #33404A; }
.gta-printing .cg-ph-meta b { font-weight: 800; }
.gta-printing .cg-ph-card {
    flex: 0 0 34mm; text-align: center; align-self: center;
    border: 1.6px solid #15532E; border-radius: 3mm; padding: 1.5mm 2mm;
}
.gta-printing .cg-ph-card-lbl { font-size: 8pt; color: #4A5760; }
.gta-printing .cg-ph-card-num { font-size: 16pt; font-weight: 800; color: #15532E; direction: ltr; line-height: 1.2; }
.gta-printing .cg-ph-card-unit { font-size: 7.5pt; color: #6E7A84; }

.gta-printing .cg-pf {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 8px; padding-top: 5px;
    font-size: 8pt; color: #6E7A84; border-top: 1px dashed #B8C0C6;
}

/* سرستونِ سبزِ برند روی جدول‌های چاپی (به‌جای سیاه‌سفیدِ ساده‌ی قبلی) */
.gta-printing .cg-rep-table thead th {
    background: #15532E !important;
    color: #fff !important;
    border-color: #15532E;
}

.gta-printing .cg-rep-table tbody tr:nth-child(even) td { background: #F4F6F4; }

/* چاپِ دسته‌ای: هر برگه یک صفحه‌ی کامل، آخری بی‌صفحه‌ی اضافه */
/* ───── سندِ چندبرگه‌ایِ یک پارت ─────
   هر <section class="cg-part-sheet"> یک کاغذ است. برگه‌ی غیرآخر پاصفحه‌اش را با margin
   به ته کاغذ می‌چسباند (وگرنه وسطِ کاغذ می‌ماند، چون بلوکِ برگشتِ کشسان فقط روی برگه‌ی آخر است). */
.gta-printing .cg-part-doc > .cg-part-sheet { break-after: page; page-break-after: always; }
.gta-printing .cg-part-doc > .cg-part-sheet:last-child { break-after: auto; page-break-after: auto; }
.gta-printing .cg-ps-more .cg-ps-foot { margin-top: auto; }
/* برگه‌ی میانی معمولاً تا ته پر نمی‌شود (۲۵ خط روی ظرفیتِ ۴۱). سفیدیِ باقی‌مانده
   به‌جای حفره، به **ارتفاعِ خودِ ردیف‌ها** می‌رود: خانه‌ی «وزن بعد» بزرگ‌تر می‌شود و
   نوشتن با خودکار راحت‌تر.
   ⛔ عمداً ردیفِ خالیِ پرکننده اضافه نمی‌شود — روی سندِ تحویلِ نقره، ردیفِ خالیِ خط‌کشی‌شده
      یعنی می‌شود بعداً یک قلمِ جعلی به آن اضافه کرد.
   سقفِ ۱۶mm تا ردیف‌ها بی‌قواره کشیده نشوند. */
.gta-printing .cg-ps-more .rf-tbl { flex: 1 1 auto; min-height: 0; }
.gta-printing .cg-ps-more .cg-ps-row { flex: 1 1 auto; max-height: 16mm; }
.gta-printing .cg-ps-pageno { font-weight: 700; }
.gta-printing .cg-ps-pageno b { direction: rtl; unicode-bidi: isolate; }
/* «ادامه در صفحه بعد» — سند باید بگوید تمام نشده، وگرنه برگه‌ی میانی «سندِ ناقص» خوانده می‌شود */
.gta-printing .cg-ps-cont {
    position: relative; z-index: 1; margin-top: 2.5mm; padding: 1.2mm 3mm;
    border-radius: 999px; background: var(--rf-gray); color: #33404A;
    font-size: 8.4pt; font-weight: 700; text-align: center;
}

.gta-printing .cg-part-batch-page { break-after: page; page-break-after: always; }
.gta-printing .cg-part-batch-page:last-child { break-after: auto; page-break-after: auto; }

/* آیکونِ چاپ روی کارتِ پارت: کم‌رنگ تا وقتی ماوس روی کارت است */
.cg-part-card .cg-part-print-icon {
    opacity: 0.55;
}

.cg-part-card:hover .cg-part-print-icon,
.cg-part-card:focus-within .cg-part-print-icon {
    opacity: 1;
}

.gta-printing .cg-rep-table {
    min-width: 0;
    width: 100%;
    font-size: 9pt;
}

.gta-printing .cg-rep-stick {
    position: static;
    background: transparent;
}

/* ⭐ سیاه‌سفیدِ کامل و بی‌وابستگی به حالتِ روز/شبِ سایت: رنگ‌های وضعیت روی
   چاپگرِ سیاه‌سفید خاکستریِ کم‌جان می‌شوند و خوانایی را می‌خورند. تأکید با
   ضخامت می‌ماند نه رنگ. (اگر کاربر سایت را شب گذاشته باشد، متغیرهای پالتِ
   مدبلیزر داخلِ قاب هم تیره‌اند — این بلوک همان را خنثی می‌کند.) */
.gta-printing .cg-rep-table td,
.gta-printing .cg-rep-bad,
.gta-printing .cg-rep-warn,
.gta-printing .cg-rep-open,
.gta-printing .cg-rep-strong,
.gta-printing .cg-th-group,
.gta-printing .cg-rep-na,
.gta-printing .cg-print-head,
.gta-printing .cg-print-foot {
    color: #000;
    border-color: #999;
}

/* ⚠️ سرستون از ۸ سپتامبر ۲۰۲۶ سبزِ برند است (بلوکِ cg-ph بالاتر) — این‌جا فقط متن/کادر می‌ماند.
   خاکستریِ قبلی عمداً برداشته شد؛ اگر برگردانی، رنگِ برند را بی‌صدا می‌خورد. */
.gta-printing .cg-rep-table tbody tr:nth-child(odd) td {
    background: #fff !important;
}

.gta-printing .cg-rep-table tbody tr:nth-child(even) td {
    background: #F4F6F4 !important;
}

.gta-printing .cg-rep-total td {
    border-top: 2px solid #15532E;
    background: #EEF3EF !important;
}


.cg-empty-sm {
    padding: 24px;
    text-align: center;
    font-size: 0.84rem;
    color: var(--gta-on-glass-soft);
}


/* ── گردشِ ماهانه («این ماه تا امروز» در برابرِ «ماهِ قبل») ──
   عمداً در فایلِ سراسری است نه در ConsignmentHome.razor.css: همین کلاس‌ها هم در نوارِ
   روی صفحه به کار می‌روند و هم داخلِ دیالوگ، و CSSِ اسکوپ‌دار به دیالوگ نمی‌رسد. */

.cg-flow-strip {
    background: var(--gta-glass);
    border: 1px solid var(--gta-glass-border);
    border-radius: var(--gta-radius-card);
    padding: 12px 14px;
}

.cg-flow-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cg-flow-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--gta-on-glass-title);
}

.cg-flow-period {
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--gta-on-glass-soft);
}

/* flex و نه grid: با ۲ تا ۳ کارت، auto-fillِ گرید ستون‌های خالی می‌سازد و
   نوار روی نمایشگرِ پهن تهی به نظر می‌رسد. */
.cg-flow-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cg-flow-card {
    flex: 1 1 260px;
    max-width: 380px;
}

.cg-flow-cards-dlg {
    margin-bottom: 14px;
}

.cg-flow-card {
    background: var(--gta-glass-item);
    border: 1px solid var(--gta-glass-border);
    border-radius: var(--gta-radius-sm);
    padding: 10px 12px;
}

/* ⚠️ بعد از قانونِ پایه بیاید، وگرنه با همان specificity بازنویسی می‌شود و بی‌اثر می‌ماند */
.cg-flow-card-total {
    background: var(--gta-glass-sel);
    border-color: var(--gta-glass-sel-border);
}

.cg-flow-kind {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--gta-on-glass-soft);
}

.cg-flow-now {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    margin: 2px 0 4px;
}

.cg-flow-cmp {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.74rem;
}

.cg-flow-prev,
.cg-flow-foot {
    font-size: 0.72rem;
    color: var(--gta-on-glass-soft);
}

.cg-flow-foot {
    margin-top: 4px;
}

/* بالا/پایینِ حجمِ کار — نه «خوب/بد». رنگ فقط جهت را می‌گوید. */
.cg-delta {
    font-weight: 700;
    white-space: nowrap;
}

.cg-delta-up {
    color: var(--mud-palette-success);
    font-weight: 700;
}

.cg-delta-down {
    color: var(--mud-palette-warning);
    font-weight: 700;
}

.cg-delta-na {
    color: var(--gta-on-glass-soft);
    font-weight: 400;
    font-size: 0.72rem;
}

/* نوارِ ماه در دیالوگ */
.cg-flow-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cg-flow-month {
    text-align: center;
    min-width: 150px;
}

.cg-flow-month-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--gta-on-glass-title);
}

.cg-flow-month-sub {
    font-size: 0.72rem;
    color: var(--gta-on-glass-soft);
}

.cg-flow-table {
    min-width: 900px;
}

.cg-flow-table tfoot td {
    border-top: 2px solid var(--gta-glass-border);
    border-bottom: none;
    font-weight: 700;
}

/* ── روندِ ۶ ماهه‌ی یک کارگاه (داخلِ جدولِ گردش) ──
   میله‌ها HTML خالص‌اند: شش عدد کتابخانه‌ی نمودار نمی‌خواهد، و نمودارهای این پروژه
   یک‌بار بی‌صدا محورشان را از دست دادند (درسِ ۱۱ آگوست). */

.cg-flow-row {
    cursor: pointer;
}

.cg-flow-row:hover {
    background: var(--gta-glass-item-hover);
}

.cg-flow-row-on {
    background: var(--gta-glass-sel);
}

.cg-flow-caret {
    vertical-align: middle;
    margin-inline-end: 4px;
    color: var(--gta-on-glass-soft);
}

.cg-trend-row td {
    background: var(--gta-glass-item);
    padding: 10px 14px;
}

.cg-trend-wait {
    font-size: 0.78rem;
    color: var(--gta-on-glass-soft);
    padding: 6px 0;
}

.cg-trend-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--gta-on-glass-soft);
    margin-bottom: 8px;
}

.cg-trend-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cg-sw {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-inline-start: 6px;
}

.cg-sw-out {
    background: var(--mud-palette-primary);
}

.cg-sw-back {
    background: var(--gta-gold);
}

.cg-trend-line {
    display: grid;
    grid-template-columns: 120px 1fr 90px;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
}

.cg-trend-m {
    font-size: 0.76rem;
    color: var(--gta-on-glass);
    white-space: nowrap;
}

.cg-trend-partial {
    font-size: .66rem;
    color: var(--gta-on-glass-soft);
    margin-inline-start: 4px;
}

/* دو میله‌ی نازک روی هم — نه کنارِ هم: چشم باید تفاوتِ «رفت» و «برگشت» را
   در یک نگاه ببیند، و ردیف بلندتر از یک خط نشود. */
.cg-trend-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 60px;
}

/* بدونِ min-width: ماهِ صفر باید کاملاً خالی بماند، نه یک تهِ میله‌ی گمراه‌کننده.
   کفِ ۱٪ در خودِ Pct() است، پس عددِ کوچکِ *غیرصفر* هم دیده می‌شود. */
.cg-bar {
    display: block;
    height: 7px;
    border-radius: 3px;
    transition: width 0.25s ease;
}

.cg-bar-out {
    background: var(--mud-palette-primary);
}

.cg-bar-back {
    background: var(--gta-gold);
    opacity: 0.75;
}

.cg-trend-v {
    font-size: 0.76rem;
    text-align: end;
    color: var(--gta-on-glass);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .cg-trend-line {
        grid-template-columns: 92px 1fr 74px;
        gap: 6px;
    }
}

.cg-flow-strong {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

/* نوارِ جمعِ بازه‌ی تاریخ روی صفحه‌ی امانت */
.cg-rangebar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-radius: var(--gta-radius-sm);
    background: var(--gta-glass-item);
    border: 1px solid var(--gta-glass-border);
    font-size: 0.8rem;
    color: var(--gta-on-glass);
}

.cg-range-label {
    font-weight: 700;
}

.cg-range-sep {
    color: var(--gta-on-glass-soft);
}

.cg-range-view {
    color: var(--gta-on-glass-soft);
}

.cg-date-box {
    width: 155px;
}

@media (max-width: 700px) {
    .cg-flow-card {
        flex: 1 1 100%;
        max-width: none;
    }

    .cg-date-box {
        width: calc(50% - 5px);
        min-width: 140px;
    }

    .cg-flow-month {
        min-width: 110px;
    }
}

/* ───── ثبتِ سفارشِ فروشِ اینترنتی: نوارِ چسبانِ پایین نباید روی فیلدِ فوکوس‌شده بیفتد (داورِ ۵ سپتامبر ۲۰۲۶) ─────
   نوار بالای ۱۰۲۴ چسبیده است (.os-entry-bar در CSSِ خودِ صفحه). وقتی Tab یا فوکوسِ خودکار فیلدی را
   scrollIntoView می‌کند، مرورگر آن را لبِ پایینِ پنجره می‌گذارد — یعنی دقیقاً زیرِ نوار (شرح کالا/وزن/فی
   در ۱۳۶۶ و ۱۹۲۰). scroll-padding به مرورگر می‌گوید «لبِ پایین ۱۱۰ پیکسل بالاتر است»، پس هر فیلدِ
   فوکوس‌شده بالای نوار می‌نشیند. فقط وقتی این صفحه باز است اثر دارد (:has). روی هر دو ظرفِ اسکرولِ ممکن. */
html:has(.os-entry-bar),
html:has(.os-entry-bar) .mud-main-content {
    scroll-padding-bottom: 110px;
}


/* ───── نشانِ کشف‌پذیریِ میان‌برِ جستجو «Ctrl+K» (۵ سپتامبر ۲۰۲۶) ─────
   js/gta-kbar.js داخلِ هر ظرفِ [data-gta-search] یک <span class="gta-kbar-hint"> می‌گذارد.
   کارمندی که میان‌بر بلد نیست باید ببیندش، ولی نباید سرِ راهِ تایپ باشد — پس فقط وقتی کادر
   خالی و بی‌فوکوس است دیده می‌شود (JS با opacity خاموشش می‌کند) و کلیک از رویش رد می‌شود.
   در راست‌به‌چپ، inline-end یعنی سمتِ چپ — همان‌جایی که آیکونِ ذره‌بین (Adornment.Start) نیست.
   روی لمسی/باریک اصلاً ساخته نمی‌شود (کلیدِ Ctrl وجود ندارد). */
[data-gta-search],
[data-os-search],
.gta-search,
.gta-search .mud-input-control-input-container,
[data-gta-search] .mud-input-control-input-container,
[data-os-search] .mud-input-control-input-container {
    position: relative;
}

.gta-kbar-hint {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
    pointer-events: none;
    z-index: 1;
    /* ۳۰ سپ ۲۰۲۶ (خواسته‌ی علیرضا: «جستجو خلوت‌تر»): در حالِ آرام پنهان، فقط با هاورِ کادر.
       JS هنوز وقتی کادر پُر یا فوکوس‌دار است opacity:0 را درون‌خطی می‌گذارد ⇒ روی تایپ نمی‌افتد. */
    opacity: 0;
    transition: opacity .12s ease;
}
.gta-kbar-on:hover .gta-kbar-hint { opacity: 1; }

/* متنِ راهنمای کادر نباید زیرِ نشان برود — به‌اندازه‌ی خودِ نشان ته کادر جا باز می‌شود */
.gta-kbar-on input,
.gta-kbar-on textarea,
.gta-kbar-on .mud-input-slot,
.gta-kbar-on .mud-input > input {
    /* !important لازم است: قاعده‌ی خودِ MudBlazor روی .mud-input-slot وزنِ بیشتری دارد و
       بدونِ آن جای خالی ۱۴ پیکسل می‌ماند و نشان روی «…شهر» می‌افتد (داورِ ۵ سپتامبر، ۱۶۰۰ و ۱۹۲۰). */
    padding-inline-end: 62px !important;
}

.gta-kbar-hint kbd {
    font-family: inherit;
    /* ۱۵ سپتامبر ۲۰۲۶: ‎.66rem‎ (۱۰٫۶px) هم خارج از نردبانِ متن بود هم برای «بلد نیستم» ریز. */
    font-size: var(--gta-fs-xs);
    line-height: 1;
    padding: var(--gta-space-1);
    border-radius: var(--gta-radius-sm);
    color: var(--gta-on-glass-soft);
    background: var(--gta-brand-soft);
    border: 1px solid var(--gta-field-border);
    box-shadow: none;
}

html.gta-dark .gta-kbar-hint kbd {
    color: var(--gta-on-glass-soft);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}

@media (max-width: 767.98px), (pointer: coarse) {
    .gta-kbar-hint { display: none; }
}

/* ───── کادرِ جستجو داخلِ نوارِ ابزار روی گوشی (۵ سپتامبر ۲۰۲۶) ─────
   MudToolBar یک ردیفِ بی‌شکستِ flex است: روی ۳۹۰px محتوایش ۴۳۱ پیکسل می‌شد، کادرِ
   جستجو تا **۱۴ پیکسل** له می‌شد و آیکونِ فیلتر/بازخوانی از لبه بیرون می‌زد (داورِ
   مستقل). راه‌حل همان کاری است که داشبوردِ مظنه‌ها می‌کند: کادر سطرِ خودش را بگیرد.
   ⚠️ عمداً `.mud-toolbar .gta-search` و نه خودِ `.gta-search`: صفحه‌هایی که کادرشان
   بیرونِ نوارِ ابزار است (مشتری، فاکتور، کالا) چیدمانِ خودشان را دارند. */
@media (max-width: 599.98px) {
    .mud-toolbar:has(.gta-search) {
        flex-wrap: wrap;
        height: auto;
        row-gap: 8px;
        padding-block: 8px;
    }

    .mud-toolbar .gta-search {
        flex: 1 1 100%;
        order: 99;              /* زیرِ عنوان و چیپ‌ها، بالای جدول */
        margin-inline: 0 !important;
    }
}

/* ───── چیپِ «یادم مانده · بازگشت به پیش‌فرض» (حافظه‌ی فهرست‌ها) ─────
   وقتی صفحه با فیلترِ به‌یادمانده باز می‌شود کاربر باید هم بفهمد چرا، هم بتواند یک‌کلیکی برگردد. */
.gta-memchip {
    display: inline-flex;
    align-items: center;
    gap: var(--gta-space-2);
    height: 32px;
    padding: 0 var(--gta-space-3);
    border-radius: var(--gta-radius-ctl);
    font-size: var(--gta-fs-sm);
    color: var(--gta-on-glass-soft);
    background: var(--gta-brand-soft);
    border: 1px dashed var(--gta-field-border);
    cursor: pointer;
    white-space: nowrap;
}

.gta-memchip:hover {
    color: var(--gta-on-glass-title);
    border-style: solid;
}


/* (۱۲ سپتامبر ۲۰۲۶) قاعده‌ی «ستونِ عملیاتِ مشتری‌ها ۱۶۸px» به خودِ صفحه رفت — حالا ۲ آیکون است، نه ۴. */



/* ═══ دستورِ پرداختِ گروهیِ حقوق (PayrollPayoutSheet.razor › .po-ps) — ۱۰ سپتامبر ۲۰۲۶ ═══
   مخاطبِ این کاغذ **بانک ملت** است، نه کارمند: لحن اداری، چگالی بالا، صفر تزئین داخلِ جدول.
   قبلاً یک رشته‌ی HTML با Tahoma و سرستونِ #eee در پنجره‌ی تازه بود (بی‌لوگو، بی‌مهر، بی‌تاریخ).

   قاعده‌های همین‌جا فقط داخلِ قابِ چاپ (body.gta-printing) زنده می‌شوند؛ روی خودِ صفحه
   `.cg-print-only` برگه را پنهان نگه می‌دارد.

   درس‌هایی که از برگه‌ی پارتِ آبکاری عیناً منتقل شد:
     • ناحیه‌ی چاپیِ کامل ۲۷۷ میلی‌متر (@page margin:10mm)، نه ۲۶۲
     • هیچ کپسولِ گِرد در جدول؛ خطِ مویی + زبراییِ خیلی ملایم
     • سه سطحِ سبز (#0E4224 جمع و عنوان، #15532E سرستون، ته‌رنگ زبرا) و دادهٔ مشکیِ جوهری
     • ستون‌های عددی راست‌چین با ارقامِ هم‌عرض؛ واحد فقط در سرستون
     • خانه‌ی دست‌نویس = مستطیلِ ≥۹ میلی‌متر با شعاعِ کم (گِردیِ کامل «برچسب» می‌گوید) */
.gta-printing .po-ps {
    position: relative; width: 190mm; min-height: 276mm; box-sizing: border-box;
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; color: var(--rf-ink, #16202A);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.gta-printing .po-ps-more { break-after: page; page-break-after: always; }

/* ───── سربرگ ───── */
/* سربرگ — کلاس‌های خودِ این برگه، نه قرض از برگه‌ی پارت (که تبِ دیگری بازنویسی‌اش می‌کند) */
.gta-printing .po-ps-head {
    position: relative; z-index: 2; background: #fff;
    display: flex; align-items: stretch; gap: 5mm;
    padding-bottom: 2mm; margin-bottom: 2.5mm;
    border-bottom: 2.2px solid var(--rf-green, #15532E);
    break-inside: avoid;
}
.gta-printing .po-ps-logowrap {
    flex: 0 0 40mm; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.6mm; border: 1.6px solid var(--rf-green, #15532E); border-radius: 3.5mm; background: #fff; padding: 2mm;
}
/* آرمِ رنگیِ رسمی روی سفید (۱۷ سپتامبر ۲۰۲۶، خواستِ علیرضا) — کارتِ تیره نیست، پس در فتوکپی سیاه نمی‌شود.
   po-ps-mark/wordmark (آرمِ ماسک‌شده‌ی قدیمی) برای برگه‌های دیگرِ po-ps می‌مانند. */
/* فشرده‌سازیِ ۱۷ سپتامبر ۲۰۲۶ (علیرضا: «فونت‌ها کوچک‌تر، تا می‌شود صفحه‌ی دوم نرود»): آرم ۳۰→۲۲، عنوان ۱۷→۱۳pt، ردیف ۶٫۲→۵٫۴mm */
.gta-printing .po-ps-logo { display: block; width: 22mm; height: auto; max-height: 22mm; object-fit: contain; }
.gta-printing .po-ps-mark {
    display: block; width: 14mm; height: 20mm; background-color: var(--rf-green, #15532E);
    -webkit-mask: url('img/os-logo-mark-v2.png') center / contain no-repeat;
    mask: url('img/os-logo-mark-v2.png') center / contain no-repeat;
}
.gta-printing .po-ps-wordmark {
    display: block; direction: ltr; font-size: 9pt; font-weight: 800;
    letter-spacing: .9px; color: var(--rf-green, #15532E); line-height: 1;
}
.gta-printing .po-ps-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.gta-printing .po-ps-title h1 { margin: 0; font-size: 13pt; font-weight: 800; color: #0E4224; line-height: 1.2; }
.gta-printing .po-ps-sub { font-size: 9pt; color: #4A5760; margin-top: .8mm; }
.gta-printing .po-ps-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4mm 6mm; margin-top: 2.4mm; font-size: 8.8pt; color: #33404A; }
.gta-printing .po-ps-meta b { font-weight: 800; }
.gta-printing .po-ps-sum {
    flex: 0 0 48mm; display: flex; flex-direction: column; justify-content: center; gap: .6mm;
    border: 1.1px solid var(--ps-line, #CFD6D1); border-radius: 2.5mm; padding: 2mm 3mm; background: #fff;
}
.gta-printing .po-ps-sum-l { font-size: 8pt; color: #4A5760; }
/* unicode-bidi لازم است: روی span درون‌خطی، direction به‌تنها اثری ندارد و ویرگول‌ها وسطِ
   متنِ راست‌به‌چپ به «،» عربی تبدیل می‌شدند (PDFِ واقعی، ۱۷ سپتامبر ۲۰۲۶) */
.gta-printing .po-ps-sum-v { font-size: 14pt; font-weight: 800; color: #0E4224; direction: ltr; unicode-bidi: isolate;
                             font-variant-numeric: tabular-nums; line-height: 1.1; }
.gta-printing .po-ps-sum-n { font-size: 7.4pt; color: #55606A; }

/* ───── خطاب به بانک ───── */
.gta-printing .po-ps-to {
    position: relative; z-index: 1; border: 1px solid var(--ps-line, #CFD6D1); border-radius: 2.5mm;
    padding: 2.4mm 3mm; margin-bottom: 3mm; background: #fff;
}
.gta-printing .po-ps-to-fields { display: flex; gap: 5mm; margin-bottom: 2.4mm; }
.gta-printing .po-ps-f { flex: 1 1 0; display: flex; align-items: center; gap: 2mm; }
.gta-printing .po-ps-f-l { flex: 0 0 auto; font-size: 8.6pt; font-weight: 700; color: #33404A; white-space: nowrap; }
.gta-printing .po-ps-f .po-ps-w { flex: 1 1 auto; margin: 0; }
.gta-printing .po-ps-to-txt { font-size: 9.4pt; line-height: 1.7; }
.gta-printing .po-ps-to-words { margin-top: 1.6mm; padding-top: 1.6mm; border-top: .8px solid var(--ps-line, #CFD6D1);
                                font-size: 8.6pt; font-weight: 700; color: #0E4224; }
/* خانه‌ی دست‌نویسِ وسطِ جمله — مستطیل، نه زیرخطِ نازک */
.gta-printing .po-ps-w {
    display: inline-block; vertical-align: middle; height: 9.4mm;
    border: .9px solid var(--ps-writeb, #A0ABA4); border-radius: 1.2mm; background: #fff;
    margin: 0 1.5mm;
}
.gta-printing .po-ps-w-br { width: 42mm; }
.gta-printing .po-ps-w-acc { width: 58mm; }

/* ───── جدول ───── */
.gta-printing .po-ps-tbl { position: relative; z-index: 1; display: flex; flex-direction: column; }
/* بانک ۲۰→۲۶mm و یک‌خطی (۱۷ سپتامبر ۲۰۲۶): «مهر ایران»/«توسعه تعاون» دوخطی می‌شدند و ردیف‌ها ناهم‌قد.
   شبا با ارقامِ لاتین کم‌عرض‌تر از فارسی است ⇒ ۶۲→۵۸mm. */
.gta-printing .po-ps-tr { display: grid; grid-template-columns: 9mm 1fr 58mm 26mm 30mm 14mm; align-items: stretch; }
.gta-printing .po-ps-thead { background: #15532E; color: #fff; border-radius: 1.6mm 1.6mm 0 0; }
.gta-printing .po-ps-th { font-size: 8pt; font-weight: 800; padding: 1mm 2mm; display: flex; align-items: center; }
.gta-printing .po-ps-th-n { justify-content: flex-end; }
.gta-printing .po-ps-th-c { justify-content: center; }
.gta-printing .po-ps-row { border-bottom: .7px solid var(--ps-line, #CFD6D1); break-inside: avoid; }
.gta-printing .po-ps-row:nth-child(even) { background: var(--ps-zebra, #F4F7F5); }
/* ردیف ۹٫۲→۷mm (۱۷ سپتامبر ۲۰۲۶): لیستِ ۱۷ نفره باید یک برگه باشد، نه ۱۵ + ۲ */
.gta-printing .po-ps-c { display: flex; align-items: center; padding: .3mm 2mm; min-height: 5.4mm; font-size: 8.2pt; }
.gta-printing .po-ps-idx { justify-content: center; font-size: 7.8pt; font-weight: 700; color: #4A5760; }
.gta-printing .po-ps-name { font-weight: 700; }
/* نوارِ سرِ هر بخش در سندِ ترکیبی — روشن‌تر از نوارِ جمع تا سلسله‌مراتب به‌هم نریزد:
   جمعِ کل تیره و توپر می‌ماند، سرگروه فقط یک نوارِ کم‌رنگ با خطِ سبزِ کناری است. */
.gta-printing .po-ps-gsec { background: var(--ps-zebra, #F4F7F5); border-bottom: .7px solid var(--ps-line, #CFD6D1);
                            border-top: .7px solid var(--ps-line, #CFD6D1); break-inside: avoid; break-after: avoid; }
.gta-printing .po-ps-gsec-l { grid-column: 1 / 5; display: flex; align-items: center; padding: 1.4mm 2.5mm;
                              font-size: 8.4pt; font-weight: 800; color: #0E4224;
                              border-inline-start: .9mm solid #15532E; }
.gta-printing .po-ps-gsec .po-ps-c { min-height: 0; padding: 1.4mm 2mm; color: #0E4224; }
/* مبلغ راست‌چین (ممیزها زیرِ هم)؛ شبا چپ‌چین تا «IR» همه‌ی ردیف‌ها زیرِ هم بیفتد —
   رقم‌های این قلم هم‌عرضِ کامل نیستند و راست‌چین، ابتدای شباها را ناهم‌تراز می‌کرد */
.gta-printing .po-ps-sheba { direction: ltr; justify-content: flex-start; font-variant-numeric: tabular-nums;
                             letter-spacing: .2px; white-space: nowrap; }
.gta-printing .po-ps-bank { color: #33404A; font-size: 8.4pt; white-space: nowrap; overflow: hidden; }
/* عددهای لاتینِ سندِ بانکی با قلمِ لاتین: ویرگولِ قلمِ GtaNum شکلِ «،» فارسی دارد و
   «4،571،500،000» روی کاغذ دوپهلو خوانده می‌شد (PDFِ واقعی، ۱۷ سپتامبر ۲۰۲۶) */
/* ⚠️ اولویتِ اجباری لازم است: brand-font.css روی `html body *` قلم را اجباری می‌کند */
html body.gta-printing .po-ps-num, html body.gta-printing .po-ps-sheba, html body.gta-printing .po-ps-sum-v,
html body.gta-printing .po-ps-lat { font-family: "Segoe UI", Arial, "Helvetica Neue", sans-serif !important; }  /* brand-check-ignore: سندِ بانکی — ویرگولِ GtaNum شبیهِ «،» است؛ عددِ لاتین قلمِ لاتین می‌خواهد (۱۷ سپتامبر ۲۰۲۶) */
.gta-printing .po-ps-num { direction: ltr; justify-content: flex-end; font-weight: 800;
                           font-variant-numeric: tabular-nums; white-space: nowrap; }
/* خانه‌ی تیکِ متصدیِ بانک — باید واقعاً بشود رویش خودکار کشید */
.gta-printing .po-ps-tick { justify-content: center; }
.gta-printing .po-ps-tick::before {
    content: ""; display: block; width: 5mm; height: 5mm;
    border: .9px solid var(--ps-writeb, #A0ABA4); border-radius: 1mm; background: #fff;
}
.gta-printing .po-ps-total { background: #0E4224; color: #fff; border-radius: 0 0 1.6mm 1.6mm; break-inside: avoid; }
.gta-printing .po-ps-total-lbl { grid-column: 1 / 5; display: flex; align-items: center; padding: 1.4mm 2.5mm;
                                 font-size: 9pt; font-weight: 800; color: #fff; }
.gta-printing .po-ps-total .po-ps-c { color: #fff; font-weight: 800; }
.gta-printing .po-ps-total .po-ps-tick::before { border-color: #fff; background: transparent; }

/* ───── بی‌شباها: بانک نباید ببیند، ولی صادرکننده باید بداند چرا کم‌اند ───── */
.gta-printing .po-ps-missing {
    position: relative; z-index: 1; margin-top: 3mm; border: .9px dashed #A9B4BC; border-radius: 2mm;
    padding: 2mm 2.5mm; background: #fff; break-inside: avoid;
}
.gta-printing .po-ps-missing-h { font-size: 8.4pt; font-weight: 800; color: #8A4B00; }  /* brand-check-ignore: کهربای هشدارِ معنایی (ردیفِ بی‌شبا)، نه طلاییِ برند — همان رنگی که فیشِ حقوقی برای «کد ملی ثبت نشده» دارد */
.gta-printing .po-ps-missing-b { font-size: 8pt; color: #33404A; margin-top: 1mm; line-height: 1.7; }

/* ───── برگه‌ی حسابداری (۱۷ سپتامبر ۲۰۲۶): ردیف · نام · شبا · بانک · حقوق · تاریخ · از حساب ─────
   ستونِ «واریزشده» همان روز حذف شد (تکراریِ حقوق)؛ ۲۲٫۵mmِ آزادشده به نام و «از حساب» رسید. */
.gta-printing .po-ps-acc .po-ps-tr { grid-template-columns: 7mm minmax(0, 1fr) 46mm 16mm 25mm 18mm 33mm; }
/* ⚠️ ۱۷ سپتامبر ۲۰۲۶ — پیش‌نمایشِ واقعیِ علیرضا: ستونِ «از حساب» ۲۱mm بود و نامِ واقعیِ حساب‌ها («رسالت علی سرباز»،
   «ملت آبشده + ملت ۳») در ۸ ردیف از ۱۸ دوخطی می‌شد ⇒ ردیف‌های ناهم‌اندازه و برگه‌ی به‌هم‌ریخته. آزمایشگاهِ چاپ با
   نام‌های کوتاه («ملت ۳») این را نمی‌دید. حالا ۲۸mm (از شبا/بانک/مبلغ/تاریخ هرکدام ۱ تا ۲mm گرفته شد؛ شبا در ۷٫۸pt
   حدودِ ۴۴mm است و ۴۶mm هنوز جا دارد) و نامِ حساب تک‌خطی می‌ماند؛ فقط اگر واقعاً بلندتر بود می‌شکند. */
/* عددهای درشتِ نوارِ جمع بدونِ فاصله به هم می‌چسبیدند («3,772,875,0004,757,000,000») */
.gta-printing .po-ps-acc .po-ps-num { padding-inline: 1.2mm; }
.gta-printing .po-ps-acc .po-ps-total .po-ps-num, .gta-printing .po-ps-acc .po-ps-gsec .po-ps-num { font-size: 8.4pt; }
/* شبای ۳۲نویسه در ۷٫۸pt حدودِ ۴۴mm است؛ ستونِ تنگ‌تر آن را روی ستونِ نام می‌ریخت */
.gta-printing .po-ps-acc .po-ps-sheba { font-size: 7.4pt; letter-spacing: 0; padding-inline: 1mm; overflow: hidden; }
.gta-printing .po-ps-acc .po-ps-bank { font-size: 7pt; padding-inline: 1mm; }
/* نامِ بلند دوخطی شود، نه این‌که روی ستونِ شبا بیفتد */
.gta-printing .po-ps-acc .po-ps-name { font-size: 8pt; line-height: 1.2; overflow-wrap: anywhere; }
.gta-printing .po-ps-paid { color: #0E4224; }
.gta-printing .po-ps-none { color: #6E7A84; font-weight: 400; }
.gta-printing .po-ps-nosheba { color: #8A4B00; font-size: 7.8pt; }  /* brand-check-ignore: کهربای هشدارِ معنایی (بی‌شبا) */
.gta-printing .po-ps-date { font-size: 7.4pt; color: #33404A; white-space: nowrap; padding-inline: 1mm; }
/* «ملت ۳ + ملت آبشده» در یک خط جا نمی‌شد و بریده می‌شد ⇒ دوخطی، ریزتر */
.gta-printing .po-ps-from { font-size: 7.4pt; line-height: 1.25; color: #33404A; padding-inline: 1.2mm; overflow-wrap: anywhere; }
/* ریزِ واریزهای یک نفرِ چندواریزی (۱۷ سپتامبر ۲۰۲۶ — مردادِ حسین جدیدالاسلام): حسابدار برای سند باید بداند
   از **هر حساب** چه مبلغی کم شده؛ جمعِ دو واریز و «ملت ۳ + ملت آبشده» کافی نبود. ردیفِ مادر جمع را دارد و
   زیرش هر واریز یک خطِ کوتاه‌تر با خطِ نقطه‌چین. ریز و مادر با هم روی یک برگه می‌مانند (منطقِ صفحه‌بندی). */
.gta-printing .po-ps-acc .po-ps-parent { border-bottom-style: dashed; }
.gta-printing .po-ps-acc .po-ps-sub { background: #fff; border-bottom-style: dashed; }
.gta-printing .po-ps-acc .po-ps-sub .po-ps-c { min-height: 4.6mm; }
.gta-printing .po-ps-acc .po-ps-sub .po-ps-sub-l { grid-column: 2 / 5; font-size: 7.4pt; color: #4A5760; padding-inline-start: 4mm;
                                                     border-inline-start: .6mm solid #CFD6D1; }  /* «↳» در قلمِ برند نبود و شکلِ «ا» چاپ می‌شد ⇒ خطِ کناری به‌جای پیکان */
.gta-printing .po-ps-acc .po-ps-sub .po-ps-num { font-weight: 700; font-size: 8.4pt; }
.gta-printing .po-ps-acc .po-ps-sub .po-ps-from { color: #0E4224; font-weight: 700; }
.gta-printing .po-ps-acc .po-ps-multi { color: #0E4224; font-weight: 700; }
/* نیمه‌واریز / واریزنشده — جای ستونِ حذف‌شده‌ی «واریزشده»، فقط جایی که فرق دارد */
.gta-printing .po-ps-acc .po-ps-due, .gta-printing .po-ps-acc .po-ps-unpaid,
.gta-printing .po-ps-acc .po-ps-sub-rest .po-ps-sub-l, .gta-printing .po-ps-acc .po-ps-sub-rest .po-ps-num,
.gta-printing .po-ps-meta-warn { color: #8A4B00; }  /* brand-check-ignore: کهربای هشدارِ معنایی (مانده/بی‌شبا) */
.gta-printing .po-ps-acc .po-ps-unpaid { font-weight: 700; }
.gta-printing .po-ps-acc .po-ps-sub-rest .po-ps-sub-l { border-inline-start-color: #8A4B00; }  /* brand-check-ignore: کهربای هشدارِ معنایی (مانده) */
/* نوارِ خلاصه‌ی بالای برگه‌ی اول */
.gta-printing .po-ps-info { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4mm 4mm;
                            margin-bottom: 2.2mm; border: .9px solid var(--ps-line, #CFD6D1); border-radius: 2mm; padding: 1.2mm 3mm; background: #fff; }
.gta-printing .po-ps-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 2mm; padding: .8mm;
                            border-inline-start: .9mm solid #15532E; }
.gta-printing .po-ps-stat-l { font-size: 8pt; color: #4A5760; }
.gta-printing .po-ps-stat-v { font-size: 10pt; font-weight: 800; color: #0E4224; direction: ltr; unicode-bidi: isolate; }
.gta-printing .po-ps-stat-warn { border-inline-start-color: #8A4B00; }  /* brand-check-ignore: کهربای هشدارِ معنایی (مانده) */
.gta-printing .po-ps-words { grid-column: 1 / -1; font-size: 8.4pt; font-weight: 700; color: #0E4224;
                             padding-top: 1.4mm; border-top: .8px solid var(--ps-line, #CFD6D1); }
.gta-printing .po-ps-accts {
    position: relative; z-index: 1; margin-top: 3mm; border: .9px solid var(--ps-line, #CFD6D1);
    border-radius: 2mm; padding: 2mm 3mm; background: #fff; break-inside: avoid;
}
/* هر حساب یک خانه در شبکه‌ی سه‌ستونه — تا سه حساب فقط یک خط جا می‌گیرد و لیستِ ۱۷ نفره تک‌برگه می‌ماند */
.gta-printing .po-ps-accts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4mm 4mm; }
.gta-printing .po-ps-accts-h { grid-column: 1 / -1; font-size: 8.4pt; font-weight: 800; color: #0E4224;
                               display: flex; align-items: baseline; justify-content: space-between; gap: 2mm; }
.gta-printing .po-ps-accts-t { font-weight: 700; color: #4A5760; }
.gta-printing .po-ps-accts-t b { font-weight: 800; color: #0E4224; direction: ltr; unicode-bidi: isolate; }
.gta-printing .po-ps-acct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2mm; font-size: 8.6pt;
                            padding: .8mm; border-inline-start: .9mm solid #15532E; }
.gta-printing .po-ps-acct-n { font-weight: 700; }
.gta-printing .po-ps-acct-v { font-weight: 800; direction: ltr; unicode-bidi: isolate; margin-inline-start: auto; }
.gta-printing .po-ps-acct-m { flex: 1 0 100%; order: 3; color: #55606A; font-size: 7.6pt; }
.gta-printing .po-ps-acct-rest { border-inline-start-color: #8A4B00; }  /* brand-check-ignore: کهربای هشدارِ معنایی (مانده‌ی واریزنشده) */
.gta-printing .po-ps-acct-rest .po-ps-acct-n, .gta-printing .po-ps-acct-rest .po-ps-acct-v { color: #8A4B00; }  /* brand-check-ignore: کهربای هشدارِ معنایی (مانده‌ی واریزنشده)، همان رنگِ بلوکِ بی‌شبا */

/* ───── امضا و پاصفحه ───── */
.gta-printing .po-ps-signs { position: relative; z-index: 2; margin-top: auto; padding-top: 2mm;
                             display: flex; gap: 4mm; break-inside: avoid; }
.gta-printing .po-ps-sign { flex: 1 1 0; display: flex; flex-direction: column; gap: 1.2mm; }
.gta-printing .po-ps-sign-l { font-size: 8pt; color: #46525A; font-weight: 700; }
.gta-printing .po-ps-sign-b { min-height: 11mm; border: .9px solid var(--ps-writeb, #A0ABA4);
                              border-radius: 1.5mm; background: #fff; }
.gta-printing .po-ps-sign-w { min-height: 11mm; border-style: dashed; }
.gta-printing .po-ps-foot { position: relative; z-index: 2; }

/* ───── رسیدِ بانک: هم حفره‌ی بینِ جدول و امضاها را می‌بندد، هم متصدیِ بانک
   شماره‌ی پیگیریِ پایا و تاریخِ اجرا را همان‌جا می‌نویسد ───── */
/* ⚠️ `flex:1 1 0` با `min-height:0` یعنی «فقط فضای باقی‌مانده را بگیر» — نه «۲۲ میلی‌متر
   اضافه کن». نسخه‌ی اول ارتفاع می‌افزود و برگه‌ی بانک ۱٫۲۶ برابرِ کاغذ می‌شد (اندازه‌گیریِ
   بعد از دیپلوی گرفتش، نه چشم). */
.gta-printing .po-ps-receipt {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: flex; flex-direction: column; margin-top: 3mm;
    border: .9px solid var(--ps-line, #CFD6D1); border-radius: 2mm; background: #fff;
}
.gta-printing .po-ps-receipt-h { font-size: 8pt; font-weight: 700; color: #46525A;
                                 padding: 1.4mm 2.5mm; border-bottom: .8px solid var(--ps-line, #CFD6D1); }
/* خطِ راهنمای دست‌نویس — فاصله‌ی ۹ میلی‌متری، اندازه‌ی خودکارِ آدم */
.gta-printing .po-ps-receipt-b {
    /* ارتفاعِ ثابتِ دو خط — تا ۱۷ سپتامبر ۲۰۲۶ کلِ فضای خالی را می‌گرفت و روی برگه‌ی کم‌ردیف
       یک کادرِ ۱۲۵ میلی‌متری با خط‌های نامنظم چاپ می‌کرد */
    height: 18mm; margin: 1.5mm 2.5mm 2mm;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent 8.85mm, var(--ps-line, #CFD6D1) 8.85mm, var(--ps-line, #CFD6D1) 9mm);
}
/* امضاها ته کاغذ (margin-top:auto بالا)؛ رسید دیگر فضا را پر نمی‌کند */

/* برگه‌ی غیرِ‌آخر رسید و امضا ندارد، پس چیزی پاصفحه را به تهِ کاغذ هل نمی‌داد و
   پاصفحه وسطِ برگه می‌ماند با یک نوارِ سفیدِ بزرگ زیرش (عکسِ بعد از دیپلوی، ۱۰ سپتامبر). */
.gta-printing .po-ps-more .po-ps-foot { margin-top: auto; }

/* پاصفحه‌ی مشترکِ چاپ (.cg-pf) با #6E7A84 نسبتِ ۴٫۳۹ می‌دهد — زیرِ AA و اولین چیزی که
   در فتوکپیِ سیاه‌وسفید محو می‌شود (سنجشِ داورِ مستقل، ۱۰ سپتامبر). فقط روی برگه‌ی
   دستور پرداخت تیره می‌شود تا برگه‌های تبِ دیگر دست‌نخورده بمانند. */
.gta-printing .po-ps-foot { color: #46525A; }

/* برگه‌ی آخرِ سندِ چندبرگه‌ای دو نوارِ جمع دارد: جمعِ همان صفحه (کم‌رنگ‌تر) و
   جمعِ کلِ سند (پُررنگ). قبلاً یک نوار بود که تعدادِ ردیفِ صفحه را کنارِ مبلغِ کل
   می‌گذاشت — روی سندِ بانکی خطرناک بود (ایرادِ داور، دورِ دوم). */
.gta-printing .po-ps-subtotal { background: #15532E; border-radius: 0; }
.gta-printing .po-ps-grand { border-radius: 0 0 1.6mm 1.6mm; margin-top: .6mm; }

/* ───── تاریخچه‌ی فیلد (۱۷ سپتامبر ۲۰۲۶) — دایره‌ی کوچکِ «!» گوشه‌ی فیلدِ تغییرکرده ─────
   فقط روی فیلدی که واقعاً تغییری داشته دیده می‌شود. با موس/لمس، «چه کسی، کِی، از چه به چه». */
.gta-fh { position: relative; }
.gta-fh-anchor { position: absolute; top: -6px; inset-inline-end: -6px; z-index: 3; line-height: 0; }
.gta-fh-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 999px; cursor: help;
    font-size: 11px; font-weight: 900; line-height: 1;
    /* سبزِ برند، نه طلایی: نشانِ طلاییِ «!» در فیش مالِ «مبلغِ ماهِ قبل» است و نباید با تاریخچه یکی دیده شود */
    color: #fff; background: var(--mud-palette-primary, #005432);
    box-shadow: 0 0 0 2px var(--mud-palette-surface, #fff);
    opacity: .85; transition: opacity .15s, transform .15s;
}
.gta-fh-dot:hover, .gta-fh-dot:focus { opacity: 1; transform: scale(1.15); outline: none; }
.gta-fh-tip { min-width: 220px; max-width: 320px; font-size: .8125rem; line-height: 1.6; text-align: right; }
.gta-fh-tip-h { font-weight: 800; margin-bottom: 4px; opacity: .9; }
.gta-fh-row { padding: 4px 0; border-top: 1px solid rgba(255,255,255,.18); }
.gta-fh-row:first-of-type { border-top: 0; }
.gta-fh-val { direction: rtl; }
.gta-fh-old { opacity: .75; text-decoration: line-through; }
.gta-fh-new { font-weight: 800; }
.gta-fh-more { margin-top: 4px; opacity: .75; font-size: .75rem; }
.gta-fh.gta-fh-inl { display: inline-block; }
/* خانه‌های فیش کوچک‌اند: دایره کمی بیرون‌تر تا روی عدد نیفتد */
.gta-fh-inl .gta-fh-anchor { top: -8px; inset-inline-end: -10px; }
/* مبلغِ کلِ فیش درشت است: دایره بالای عدد، نه روی رقمِ آخر */
.pslip-net-val .gta-fh-inl .gta-fh-anchor { top: -18px; inset-inline-end: -4px; }
.pslip-net-val .gta-fh-dot { box-shadow: 0 0 0 2px #fff; }

/* ===========================================================
   🫥 منوی راستِ پنهان‌شونده (دسکتاپ) — ۲۴ سپتامبر ۲۰۲۶
   علیرضا: «این منوی راست لازم نیست دائماً جلوی چشم باشد؛ سامانه شلوغ است.»
   کلاس‌ها را js/gta-rail-hide.js روی <html> می‌گذارد:
     .gta-rail-hide  = حالتِ پنهان‌شونده فعال است (پیش‌فرض؛ با سنجاق برداشته می‌شود)
     .gta-rail-peek  = همین حالا باز است (موس روی لبه / Ctrl+B)
   فقط ریلِ بسته‌ی دسکتاپ (.mud-drawer--closed) را می‌پوشاند؛ موبایل دست‌نخورده.
   =========================================================== */
.gta-rail-edge, .gta-rail-pin { display: none; }
@media (min-width: 961px) {
  /* محتوا تمامِ عرض را می‌گیرد؛ ریل وقتی می‌آید *روی* محتوا می‌نشیند، صفحه جابه‌جا نمی‌شود */
  html.gta-rail-hide .mud-main-content { margin-inline: 0 !important; }
  html.gta-rail-hide .mud-drawer-mini.mud-drawer--closed {
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;                       /* بیرونِ قاب + بیرونِ ترتیبِ Tab */
    /* ۲۶ سپ ۲۰۲۶ — علیرضا: «خیلی یهویی باز و بسته می‌شه» ⇒ ۰٫۲۲ ثانیه شد ۰٫۴۲ (باز) / ۰٫۳۴ (بسته)
       با منحنیِ «آرام شروع، آرام تمام» + محوشدن (منحنیِ برگه‌ی iOS نصفِ مسیر را در ۱۰۰ms اول می‌رفت و باز یهویی بود) */
    transition: transform .34s cubic-bezier(.45,0,.2,1), opacity .26s ease .06s, visibility 0s linear .34s;
    z-index: 1350;
  }
  html.gta-rail-hide.gta-rail-peek .mud-drawer-mini.mud-drawer--closed {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform .42s cubic-bezier(.45,0,.2,1), opacity .24s ease, visibility 0s;
  }
  /* دستگیره‌ی لبه: نوارِ نامرئیِ ۱۴px برای حس‌کردنِ موس + قرصِ سبزِ کوچک وسطش به‌عنوانِ نشانه.
     ۲۶ سپ ۲۰۲۶ — «کلِ دیواره‌ی سمتِ راست، حتی لوگوی بالا» ⇒ از بالای صفحه (نه از زیرِ نوارِ بالا)
     تا پایین؛ هاور روی کارتِ آرم را js/gta-rail-hide.js جدا می‌گیرد. */
  html.gta-rail-hide .gta-rail-edge {
    display: block; position: fixed; top: 0; right: 0; width: 14px; height: 100vh;
    z-index: 1340; cursor: pointer;
  }
  html.gta-rail-hide .gta-rail-edge::before {
    content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 88px; border-radius: 6px 0 0 6px;
    background: linear-gradient(180deg,#0A6B41,#00492C);
    box-shadow: 0 4px 12px rgba(0,84,50,.28);
    opacity: .5; transition: opacity .18s, width .18s;
  }
  html.gta-rail-hide .gta-rail-edge:hover::before { opacity: 1; width: 7px; }
  html.gta-rail-hide.gta-rail-peek .gta-rail-edge { display: none; }

  /* 📌 دکمه‌ی سنجاق بالای ریل (فقط ریلِ بسته‌ی دسکتاپ) */
  .mud-drawer-mini.mud-drawer--closed .gta-rail-pin {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 26px; margin: 8px auto 0; padding: 0;
    border-radius: 9px; cursor: pointer;
    background: rgba(255,255,255,.62); color: var(--gta-muted);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 4px 12px rgba(15,42,28,.08), inset 0 1px 0 rgba(255,255,255,.9);
    transition: .18s;
  }
  .gta-rail-pin .mud-icon-root { font-size: 1rem; color: inherit; transform: rotate(35deg); transition: transform .18s; }
  .gta-rail-pin:hover { color: var(--gta-green); transform: translateY(-1px); }
  .gta-rail-pin:focus-visible { outline: 2px solid var(--gta-green); outline-offset: 2px; }
  /* سنجاق‌شده = سبزِ برند و سنجاقِ صاف (فرورفته) */
  .gta-rail-pin[aria-pressed="true"] {
    background: linear-gradient(140deg,#0A6B41,#00492C); color: #fff; border-color: rgba(255,255,255,.2);
    box-shadow: 0 6px 16px rgba(0,84,50,.3);
  }
  .gta-rail-pin[aria-pressed="true"] .mud-icon-root { transform: rotate(0deg); }
  html.gta-dark .mud-drawer-mini.mud-drawer--closed .gta-rail-pin {
    background: rgba(24,34,28,.74); border-color: rgba(255,255,255,.09);
    box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  }
  html.gta-dark .gta-rail-pin:hover { color: #8FD4AF; }
  html.gta-dark .gta-rail-pin[aria-pressed="true"] { background: linear-gradient(140deg,#0A6B41,#00492C); color: #fff; }
}

/* ===========================================================
   🫥+ ریلِ پنهان‌شونده: «صفحه جمع شود» + «کارتِ سفیدِ شناور» — ۲۴ سپتامبر ۲۰۲۶
   علیرضا: «منو نباید روی صفحه بیفتد؛ صفحه کوچک شود و منو جایش را پر کند» و بعد
   «خوشگل نشد» ⇒ از سه طرح، ترکیبِ ۱ (هل‌دادنی) + ۳ (کارتِ سفید) انتخاب شد.
   • باز شدن با موس/Ctrl+B ⇒ محتوا به اندازه‌ی ریل به چپ می‌رود؛ هیچ متنی زیرِ منو نمی‌ماند.
   • بی تاری/کدری: مات‌کردنِ قدیمیِ هاورِ فلایوت در حالتِ پنهان‌شونده خاموش است.
   • همه‌ی بخش‌ها داخلِ یک کارتِ سفیدِ گرد؛ هر بخش دیگر جعبه‌ی جدا ندارد (بی جعبه‌درجعبه).
   =========================================================== */
@media (min-width: 961px) {
  html.gta-rail-hide .mud-main-content { transition: padding-inline-start .34s cubic-bezier(.45,0,.2,1); }
  html.gta-rail-hide.gta-rail-peek .mud-main-content { transition-duration: .42s; }
  html.gta-rail-hide.gta-rail-peek .mud-main-content { padding-inline-start: 84px; }
  html.gta-rail-hide body .mud-appbar,
  html.gta-rail-hide body .mud-main-content { filter: none !important; }

  html.gta-rail-hide .mud-drawer-mini.mud-drawer--closed::before {
    content: ''; position: absolute; inset: 8px 6px 8px 0; z-index: -1; pointer-events: none;
    background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(15,42,28,.16);
  }
  html.gta-dark.gta-rail-hide .mud-drawer-mini.mud-drawer--closed::before {
    background: #18221c; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  }
  html.gta-rail-hide .mud-drawer--closed .gta-rail-sq:not(.active),
  html.gta-rail-hide .mud-drawer--closed .gta-rail-pin:not([aria-pressed="true"]) {
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html.gta-rail-hide:not(.gta-touch) .mud-drawer--closed .gta-rail-grp:hover .gta-rail-sq:not(.active) {
    background: #EEF5F0; box-shadow: none; transform: none;
  }
  html.gta-dark.gta-rail-hide:not(.gta-touch) .mud-drawer--closed .gta-rail-grp:hover .gta-rail-sq:not(.active) {
    background: rgba(255,255,255,.07);
  }

  /* زیرمنو: یک‌خطی و پهن‌تر («میزکار فروش اینترنتی» دو خط نشود) */
  .gta-rail-flyout { min-width: 230px; }
  .gta-rail-flyout .gta-fly-item { white-space: nowrap; }

  .mud-drawer-mini.mud-drawer--closed .gta-rail-sq { margin: 3px auto; min-height: 40px; padding: 5px 3px 4px; }
}
@media (min-width: 961px) and (max-height: 820px) {
  .mud-drawer-mini.mud-drawer--closed .gta-rail-sq { margin: 2px auto; min-height: 36px; padding: 4px; gap: 1px; }
  .mud-drawer-mini.mud-drawer--closed .gta-rail-sq .mud-icon-root { font-size: 1.15rem; }
}