/* ==========================================================================
   custom.css
   تم اختصاصی "مانا" روی قالب داشبورد Meno
   این فایل باید همیشه بعد از styles.css لود شود تا override انجام شود.
   منبع طراحی: بررسی بصری کامل قالب فروشگاهی مانا (پوشه tem4/)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1) توکن‌های رنگ و متغیرهای پایه — بازنویسی متغیرهای rgb موجود در styles.css
   -------------------------------------------------------------------------- */
:root {
  /* رنگ اصلی: آبی مانا */
  --primary-rgb: 47, 111, 237;
  --primary-color: rgb(var(--primary-rgb));

  /* رنگ‌های نقشی که در کارت محصول / بج‌ها / وضعیت‌ها استفاده می‌شوند */
  --secondary-rgb: 123, 118, 254;
  --success-rgb: 34, 197, 94;
  --danger-rgb: 245, 61, 87;
  --warning-rgb: 245, 158, 11;
  --info-rgb: 59, 130, 246;
  --orange-rgb: 253, 126, 20;
  --pink-rgb: 236, 72, 153;
  --teal-rgb: 13, 148, 136;
  --purple-rgb: 124, 58, 237;
  --green-rgb: 34, 197, 94;

  /* پس‌زمینه و سطوح خنثی، دقیقاً مطابق پس‌زمینه‌ی خاکستری روشن مانا */
  --body-bg-rgb: 245, 246, 250;
  --default-background: #f5f6fa;
  --menu-bg: #ffffff;
  --header-bg: #ffffff;
  --default-border: #eef0f4;
  --input-border: #e5e8f0;
  --form-control-bg: #ffffff;

  /* توکن‌های اختصاصی مانا */
  --mana-blue: rgb(var(--primary-rgb));
  --mana-blue-soft: rgba(var(--primary-rgb), 0.1);
  --mana-red: #f53d57;
  --mana-red-soft: rgba(245, 61, 87, 0.1);
  --mana-green: #22c55e;
  --mana-green-soft: rgba(34, 197, 94, 0.1);
  --mana-orange: #f59e0b;
  --mana-orange-soft: rgba(245, 158, 11, 0.1);
  --mana-dark: #0b1220;
  --mana-dark-soft: #101a2c;
  --mana-gray-bg: #f5f6fa;
  --mana-card-bg: #ffffff;
  --mana-text-muted: #616d80;
  --mana-text-dark: #101828;

  /* شعاع گردی — کارت‌های مانا خیلی گرد هستند */
  --mana-radius-xl: 22px;
  --mana-radius-lg: 16px;
  --mana-radius-md: 12px;
  --mana-radius-sm: 8px;
  --mana-radius-pill: 999px;

  /* سایه‌های نرم استاندارد مانا */
  --mana-shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.04);
  --mana-shadow-md: 0 4px 20px rgba(16, 24, 40, 0.06);
  --mana-shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.10);
  --mana-shadow-hover: 0 12px 28px rgba(16, 24, 40, 0.12);

  /* هندسه‌ی پوسته‌ی شناور: هدر و سایدبار به‌عنوان کارت مجزا از بک‌گراند اصلی
     با فاصله‌ی یکسان (mana-shell-gap) شناور می‌شوند. عرض/ارتفاع پایه‌ی قالب
     (15rem / 4.25rem) دست‌نخورده می‌ماند تا محاسبه‌ی offset محتوای صفحه در
     styles.css همچنان درست کار کند؛ فاصله فقط با padding داخل همان جعبه‌ی
     ثابت اضافه می‌شود. */
  --mana-shell-gap: .65rem;
  --mana-sidebar-width: 17.5rem;
  --mana-header-height: 4.25rem;
}

body {
  background-color: var(--mana-gray-bg) !important;
}


/* --------------------------------------------------------------------------
   1b) حالت دارک — بازنویسی توکن‌های مانا برای data-theme-mode="dark"
   قالب پایه (styles.css) مقادیر دارک درستی برای header-bg/menu-bg/... دارد،
   اما توکن‌های بالا آن‌ها را به‌صورت ثابت (سفید) بازنویسی می‌کنند؛ اینجا
   برای حالت دارک دوباره override می‌شوند تا کنتراست درست بماند.
   -------------------------------------------------------------------------- */
[data-theme-mode="dark"] {
  --body-bg-rgb: 13, 20, 32;
  --default-background: #0b0f17;
  --menu-bg: #10161f;
  --header-bg: #10161f;
  --default-border: rgba(255, 255, 255, 0.08);
  --input-border: rgba(255, 255, 255, 0.12);
  --form-control-bg: #161d29;

  --mana-dark: #0b1220;
  --mana-gray-bg: #0b0f17;
  --mana-card-bg: #10161f;
  --mana-text-muted: #8894a8;
  --mana-text-dark: #eef1f6;

  --mana-blue-soft: rgba(var(--primary-rgb), 0.16);
  --mana-red-soft: rgba(245, 61, 87, 0.16);
  --mana-green-soft: rgba(34, 197, 94, 0.16);
  --mana-orange-soft: rgba(245, 158, 11, 0.16);

  --mana-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --mana-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.32);
  --mana-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
  --mana-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.45);
}

[data-theme-mode="dark"] body {
  background-color: var(--mana-gray-bg) !important;
}

[data-theme-mode="dark"] .card,
[data-theme-mode="dark"] .card.custom-card {
  background-color: var(--mana-card-bg);
  box-shadow: var(--mana-shadow-md);
}

[data-theme-mode="dark"] .plx-store-row,
[data-theme-mode="dark"] .input-group-text,
[data-theme-mode="dark"] .mana-status-neutral,
[data-theme-mode="dark"] .plx-action-neutral {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

[data-theme-mode="dark"] .table thead th {
  background-color: rgba(255, 255, 255, 0.03);
}

[data-theme-mode="dark"] .mana-product-card .mana-product-image {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme-mode="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.35);
}


/* --------------------------------------------------------------------------
   2) تایپوگرافی
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.card-title,
.plx-page-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mana-text-dark);
}

/* عنوان صفحه: تم وندور با [data-theme-mode="light"] .page-header-breadcrumb h4 رنگ سفید
   را با !important تحمیل می‌کند و عنوان روی پس‌زمینه‌ی روشن نامرئی می‌شود؛ چون قانون وندور
   !important دارد، این override هم باید !important داشته باشد تا برنده شود (specificity برابر
   کافی نیست). توکن در حالت تیره خودش به رنگ روشن فلیپ می‌شود. */
[data-theme-mode="light"] .page-header-breadcrumb h4.plx-page-title {
  color: var(--mana-text-dark) !important;
}

.text-muted {
  color: var(--mana-text-muted) !important;
}

a {
  transition: color .15s ease;
}


/* --------------------------------------------------------------------------
   3) کارت‌ها — گوشه‌گرد، سایه‌ی نرم، بدون border سنگین
   -------------------------------------------------------------------------- */
.card,
.card.custom-card {
  border: none;
  border-radius: var(--mana-radius-lg);
  box-shadow: var(--mana-shadow-md);
  background-color: var(--mana-card-bg);
}

.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--default-border);
  border-top-right-radius: var(--mana-radius-lg);
  border-top-left-radius: var(--mana-radius-lg);
  padding: 1.1rem 1.4rem;
}

.card .card-footer {
  background: transparent;
  border-top: 1px solid var(--default-border);
  padding: .9rem 1.4rem;
}

.card .card-body {
  padding: 1.4rem;
}

/* کارت‌های آماری قابل هاور (dashboard KPI tiles) */
.plx-stat-card,
.mana-stat-card {
  transition: box-shadow .2s ease, transform .2s ease;
}
.plx-stat-card:hover,
.mana-stat-card:hover {
  box-shadow: var(--mana-shadow-hover);
  transform: translateY(-3px);
}


/* --------------------------------------------------------------------------
   4) دکمه‌ها — پیل‌شکل، آبی توپر مانا
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--mana-radius-sm);
  font-weight: 600;
  padding-top: .55rem;
  padding-bottom: .55rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn-sm { border-radius: 8px; }

.btn-primary {
  background-color: var(--mana-blue);
  border-color: var(--mana-blue);
  box-shadow: var(--mana-shadow-sm);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #2559c9 !important;
  border-color: #2559c9 !important;
  box-shadow: var(--mana-shadow-hover);
  transform: translateY(-1px);
}

.btn-primary-light,
.btn-light {
  background-color: var(--mana-blue-soft);
  border-color: transparent;
  color: var(--mana-blue);
}
.btn-primary-light:hover,
.btn-light:hover {
  background-color: rgba(var(--primary-rgb), .18);
  color: var(--mana-blue);
}

.btn-danger {
  background-color: var(--mana-red);
  border-color: var(--mana-red);
}
.btn-danger:hover {
  background-color: #d92e46 !important;
  border-color: #d92e46 !important;
}

.btn-success {
  background-color: var(--mana-green);
  border-color: var(--mana-green);
}

/* دکمه‌ی پیل کامل (رفت‌وآمد بین صفحات، برچسب‌ها) */
.plx-pill-btn,
.btn-pill,
.rounded-pill {
  border-radius: var(--mana-radius-pill) !important;
}

/* دکمه‌ی دایره‌ای آبی افزودن به سبد (مثل کارت محصول مانا) */
.mana-btn-add {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mana-blue);
  color: #fff;
  border: none;
  box-shadow: var(--mana-shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mana-btn-add:hover {
  transform: scale(1.08);
  box-shadow: var(--mana-shadow-hover);
  color: #fff;
}


/* --------------------------------------------------------------------------
   5) بج‌ها و برچسب‌های وضعیت — پیل‌شکل با متن رنگی روی زمینه‌ی روشن
   -------------------------------------------------------------------------- */
.badge {
  border-radius: var(--mana-radius-pill);
  font-weight: 600;
  padding: .35em .75em;
}

.plx-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .65rem;
  border-radius: var(--mana-radius-pill);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.plx-pill-primary { background: var(--mana-blue-soft); color: var(--mana-blue); }
.plx-pill-success,
.mana-status-success { background: var(--mana-green-soft); color: var(--mana-green); }
.plx-pill-danger,
.mana-status-danger { background: var(--mana-red-soft); color: var(--mana-red); }
.plx-pill-warning,
.mana-status-warning { background: var(--mana-orange-soft); color: var(--mana-orange); }
.mana-status-neutral { background: #eef0f4; color: #64748b; }

/* حالت‌های رنگی transparent که در قالب پایه استفاده می‌شوند */
.bg-primary-transparent { background-color: var(--mana-blue-soft) !important; color: var(--mana-blue) !important; }
.bg-success-transparent { background-color: var(--mana-green-soft) !important; color: var(--mana-green) !important; }
.bg-danger-transparent  { background-color: var(--mana-red-soft) !important; color: var(--mana-red) !important; }
.bg-warning-transparent { background-color: var(--mana-orange-soft) !important; color: var(--mana-orange) !important; }
.bg-info-transparent    { background-color: rgba(var(--info-rgb), .12) !important; color: rgb(var(--info-rgb)) !important; }
.bg-secondary-transparent { background-color: rgba(var(--secondary-rgb), .12) !important; color: rgb(var(--secondary-rgb)) !important; }


/* --------------------------------------------------------------------------
   6) آواتار / آیکون‌های دایره‌ای گوشه‌گرد
   -------------------------------------------------------------------------- */
.avatar {
  border-radius: var(--mana-radius-md);
}
.plx-avatar-icon {
  border-radius: var(--mana-radius-md) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   7) فرم‌ها — ورودی‌های گردگوشه با فوکوس آبی مانا
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: var(--mana-radius-sm);
  border-color: var(--input-border);
  background-color: var(--form-control-bg);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mana-blue);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .12);
}

.form-floating > .form-control,
.form-floating > .form-select {
  border-radius: var(--mana-radius-sm);
}

.form-check-input:checked {
  background-color: var(--mana-blue);
  border-color: var(--mana-blue);
}

.input-group-text {
  border-radius: var(--mana-radius-sm);
  background-color: #f5f6fa;
  border-color: var(--input-border);
}

/* سوییچ‌های آی‌اواس‌استایل مانا */
.form-switch .form-check-input {
  width: 2.5em;
  height: 1.4em;
  border-radius: var(--mana-radius-pill);
}
.form-switch .form-check-input:checked {
  background-color: var(--mana-blue);
  border-color: var(--mana-blue);
}


/* --------------------------------------------------------------------------
   8) جدول‌ها — بدون بوردر سنگین، badge رنگی برای وضعیت، هاور ملایم
   -------------------------------------------------------------------------- */
.table {
  --bs-table-border-color: var(--default-border);
}
.table > :not(caption) > * > * {
  padding: .85rem 1rem;
  vertical-align: middle;
}
.table thead th {
  font-size: .78rem;
  font-weight: 600;
  color: var(--mana-text-muted);
  border-bottom-width: 1px;
  background-color: #fafbfc;
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(var(--primary-rgb), .035);
}

/* دکمه‌های عملیات (ویرایش/حذف) به‌شکل دایره کوچک مانا */
.plx-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
  font-size: .95rem;
}
.plx-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--mana-shadow-md);
}
.plx-action-neutral { background: #eef0f4; color: #64748b; }
.plx-action-danger   { background: var(--mana-red-soft); color: var(--mana-red); }
.plx-action-primary  { background: var(--mana-blue-soft); color: var(--mana-blue); }

/* صفحه‌بندی مانا: پیل‌های شماره‌دار */
.pagination .page-link {
  border-radius: var(--mana-radius-pill);
  margin: 0 .15rem;
  border: none;
  color: var(--mana-text-dark);
  min-width: 36px;
  text-align: center;
}
.pagination .page-item.active .page-link {
  background-color: var(--mana-blue);
  color: #fff;
  box-shadow: var(--mana-shadow-sm);
}
.pagination .page-link:hover {
  background-color: var(--mana-blue-soft);
  color: var(--mana-blue);
}


/* --------------------------------------------------------------------------
   9) هدر بالای صفحه (main-header) — کارت شناور کاملاً مستقل، غیرچسبان
   عمداً از position:fixed خارج شده: با اسکرول صفحه همراه محتوا بالا می‌رود
   (چسبان نیست)، هیچ لبه‌ی مشترکی با سایدبار ندارد و صرفاً یک کارت گرد و
   سایه‌دار در جریان عادی صفحه، بالای app-content است.
   -------------------------------------------------------------------------- */
.app-header,
.main-header {
  background-color: var(--header-bg);
  border-bottom: none;
}

@media (min-width: 992px) {
  .app-header {
    /* margin shorthand همیشه فیزیکی (چپ/راست ثابت) است، نه منطقی (start/end)؛
       چون صفحه RTL است باید صریحاً از margin-inline-* استفاده شود وگرنه
       هدر از سمت اشتباه صفحه فاصله می‌گیرد و با app-content هم‌تراز نمی‌شود. */
    position: static;
    height: var(--mana-header-height);
    margin-inline-start: calc(var(--mana-sidebar-width) + var(--mana-shell-gap) * 2);
    margin-inline-end: var(--mana-shell-gap);
    margin-block-start: var(--mana-shell-gap);
    margin-block-end: 0;
    padding-inline-start: 0;
    border-radius: var(--mana-radius-lg);
    box-shadow: var(--mana-shadow-md);
  }
  .main-header-container {
    height: 100%;
  }
  .app-content {
    margin-block-start: var(--mana-shell-gap);
  }
}

/* نوار پروموشن/اطلاع‌رسانی بالای صفحه، مشابه نوار تخفیف مانا */
.mana-promo-bar {
  background-color: var(--mana-dark);
  color: #fff;
  font-size: .8rem;
  text-align: center;
  padding: .5rem 1rem;
}
.mana-promo-bar .mana-promo-code {
  color: #7fb1ff;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   9b) دکمه‌ی باز/بسته کردن منوی کناری (همبرگری) — ساخت مستقل
   این دکمه عمداً کلاس sidemenu-toggle قالب پایه را ندارد: آن کلاس در
   defaultmenu.js یک addEventListener مستقل (toggleSidemenu) به همراه دارد که
   روی همین data-toggled کار می‌کرد و با اسکریپت اختصاصی ما مسابقه می‌داد
   (هر کدام دیگری را بلافاصله خنثی می‌کرد). به همین دلیل کلاس و کنترل کاملاً
   جدا شدند: sidebar-toggle-btn-el + آی‌دی #sidebar-toggle-btn، فقط با اسکریپت
   انتهای _Main.html کنترل می‌شود.
   -------------------------------------------------------------------------- */
.main-header-container .sidebar-toggle-btn-el.header-link {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin-inline: .5rem;
  border: 0;
  background: transparent;
  border-radius: var(--mana-radius-md);
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease;
}
.main-header-container .sidebar-toggle-btn-el.header-link:hover {
  background-color: rgba(var(--primary-rgb), .08);
}
.sidemenu-toggle-bars {
  position: relative;
  width: 1.35rem;
  height: 1rem;
  display: block;
}
.sidemenu-toggle-bars span {
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--mana-radius-pill);
  background-color: var(--mana-text-dark);
  transition: transform .2s ease, opacity .2s ease, background-color .15s ease;
}
.sidemenu-toggle-bars span:nth-child(1) { inset-block-start: 0; }
.sidemenu-toggle-bars span:nth-child(2) { inset-block-start: 50%; margin-block-start: -1px; }
.sidemenu-toggle-bars span:nth-child(3) { inset-block-start: 100%; margin-block-start: -2px; }

/* حالت باز: سه خط به ضربدر تبدیل می‌شوند */
[data-toggled="open"] .sidemenu-toggle-bars span:nth-child(1) {
  inset-block-start: 50%;
  transform: rotate(45deg);
}
[data-toggled="open"] .sidemenu-toggle-bars span:nth-child(2) {
  opacity: 0;
}
[data-toggled="open"] .sidemenu-toggle-bars span:nth-child(3) {
  inset-block-start: 50%;
  transform: rotate(-45deg);
}


/* --------------------------------------------------------------------------
   10) سایدبار (app-sidebar) — چیدمان کامل و مستقل، ریسپانسیو واقعی
   قالب پایه رفتار باز/بسته شدن را از data-vertical-style (overlay/closed/...)
   می‌گیرد که ترکیب چندین حالت مختلف و بسیار شکننده است. اینجا با یک
   قانون ساده و صریح جایگزین می‌شود: data-toggled="open" روی <html>
   یعنی سایدبار باز است، در غیر این صورت بسته — هم در موبایل/تبلت (کشویی
   روی محتوا) هم در دسکتاپ (همیشه باز، فقط برای ثبات همان attribute خوانده می‌شود).
   -------------------------------------------------------------------------- */
.app-sidebar {
  background-color: var(--menu-bg);
  border-left: none;
  display: flex;
  flex-direction: column;
  width: var(--mana-sidebar-width);
  padding: 0;
}

/* قالب پایه این هدر لوگو را position:fixed می‌کند (برای پین‌شدن مستقل از
   اسکرول سایدبار در چیدمان اصلی). چون سایدبار الان خودش یک کارت گرد شناور
   است، fixed باعث می‌شد این بخش از overflow:hidden سایدبار فرار کند و گوشه‌های
   بالا را مربعی نشان دهد؛ static آن را به‌طور طبیعی داخل جریان flex سایدبار
   برمی‌گرداند و گردی گوشه‌ها درست کلیپ می‌شود. */
.app-sidebar .main-sidebar-header {
  position: static;
  width: auto;
  height: auto;
  border-bottom: 1px solid var(--default-border);
  border-inline-end: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding-block: .35rem;
}
.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--mana-radius-md);
  background: rgba(var(--primary-rgb), .08);
  color: var(--mana-text-dark);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-inline-end: .5rem;
  cursor: pointer;
  transition: background-color .15s ease;
}
.sidebar-close-btn:hover {
  background: rgba(var(--primary-rgb), .16);
}

/* بدنه‌ی قابل اسکرول منو: بین هدر سایدبار و فوتر (دکمه‌ی خروج) جا می‌گیرد و هرگز آن را بیرون نمی‌راند.
   اسکرول واقعی توسط SimpleBar (simplebar.js روی #sidebar-scroll) مدیریت می‌شود؛
   خود overflow-y این‌جا فقط fallback است اگر اسکریپت لود نشود. */
.app-sidebar .main-sidebar {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-block: .5rem;
}
.app-sidebar .main-sidebar-footer {
  flex-shrink: 0;
}

/* ردیف منو: پیل گرد با فاصله‌ی نرم؛ حالت فعال با پس‌زمینه‌ی آبی کمرنگ +
   نوار باریک کنار آیتم مشخص می‌شود تا صفحه‌ی جاری کاربر واضح دیده شود */
.side-menu__item {
  position: relative;
  border-radius: var(--mana-radius-sm);
  margin: 3px 10px;
  padding-inline-start: .65rem;
  transition: background-color .15s ease, color .15s ease;
}
.side-menu__item.active,
.side-menu__item:hover {
  background-color: var(--mana-blue-soft);
  color: var(--mana-blue);
}
.side-menu__item.active .side-menu__icon,
.side-menu__item:hover .side-menu__icon {
  color: var(--mana-blue);
}
.side-menu__item.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: .3rem;
  width: 3px;
  border-radius: var(--mana-radius-pill);
  background-color: var(--mana-blue);
}

.slide__category .category-name {
  font-size: .72rem;
  font-weight: 700;
  color: var(--mana-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* -------- اسکرول‌بار سایدبار (SimpleBar) --------
   SimpleBar یک ترک/thumb اختصاصی خارج از جریان معمولی صفحه رندر می‌کند
   (simplebar-track/simplebar-scrollbar) که ::-webkit-scrollbar روی آن اثر
   ندارد؛ این‌جا همان زبان بصری اسکرول سراسری (بخش ۱۶) برای SimpleBar تکرار
   می‌شود: مسیر نامرئی، میله نازک و فقط هنگام هاور روی سایدبار یا اسکرول دیده
   می‌شود. */
.app-sidebar .simplebar-track.simplebar-vertical {
  width: 6px;
  inset-inline-end: 2px;
}
.app-sidebar .simplebar-scrollbar::before {
  inset-inline-start: 1px;
  inset-inline-end: 1px;
  background-color: var(--mana-blue);
  border-radius: var(--mana-radius-pill);
  opacity: 0;
  transition: opacity .2s ease;
}
.app-sidebar .simplebar-scrollbar.simplebar-visible::before {
  opacity: .3;
}
.app-sidebar:hover .simplebar-scrollbar.simplebar-visible::before {
  opacity: .5;
}

/* ---- دسکتاپ (≥992px): سایدبار همیشه ثابت و باز؛ آفست محتوا/هدر/فوتر را
   خود قالب پایه با margin/padding-inline-start: 15rem انجام می‌دهد ---- */
@media (min-width: 992px) {
  /* صفحه‌ی پس‌زمینه‌ی اصلی کمی روشن‌تر از کارت‌ها تا هدر/سایدبار شناور با
     سایه از آن جدا دیده شوند (به‌جای بوردر خط‌کشی‌شده‌ی قبلی) */
  body {
    background-color: #eef1f7 !important;
  }
  [data-theme-mode="dark"] body {
    background-color: #05070c !important;
  }

  .app-sidebar {
    /* ارتفاع سایدبار عمداً کمی کمتر از تمام صفحه است (گپ پایین بزرگ‌تر از گپ
       بالا): روی صفحه‌ی خیلی بلند، گردی ۲۲px گوشه‌ها در یک جعبه‌ی تقریباً
       تمام‌قد صفحه عملاً دیده نمی‌شود؛ فاصله‌ی پایین بیشتر باعث می‌شود کارت
       واقعاً «کارت» به نظر برسد، نه یک نوار تمام‌ارتفاع. */
    /* قالب پایه height:100% روی [data-nav-layout=vertical] .app-sidebar می‌گذارد
       که چون position:fixed است نسبت به viewport حساب می‌شود و روی inset-block-end
       این‌جا برنده می‌شود (ارتفاع صریح بر top+bottom اولویت دارد)؛ height:auto
       صریح لازم است تا bottom واقعاً ارتفاع را کوتاه کند. */
    position: fixed;
    height: auto !important;
    inset-inline-start: var(--mana-shell-gap);
    inset-block-start: var(--mana-shell-gap);
    inset-block-end: calc(var(--mana-shell-gap) * 7);
    z-index: 105;
    border-radius: var(--mana-radius-xl);
    box-shadow: var(--mana-shadow-lg);
    overflow: hidden;
    transform: none !important;
  }
  #sidebar-overlay,
  .sidebar-close-btn,
  .sidebar-toggle-btn-el.header-link {
    display: none !important;
  }
  /* ایمن‌سازی در برابر یک قانون قدیمی قالب پایه که با data-toggled=open
     کل .page را position:absolute می‌کند (برای چیدمان‌های دیگری بود) */
  [data-toggled="open"] .page {
    position: relative !important;
  }

  /* فاصله‌ی محتوا از سایدبار شناور: عرض پایه (15rem) + همان گپ استفاده‌شده
     برای شناور کردن سایدبار، تا محتوا به لبه‌ی کارت نچسبد */
  .app-content {
    margin-inline-start: calc(var(--mana-sidebar-width) + var(--mana-shell-gap) * 2);
    margin-inline-end: var(--mana-shell-gap);
  }
  .footer {
    padding-inline-start: calc(var(--mana-sidebar-width) + var(--mana-shell-gap) * 2) !important;
    padding-inline-end: var(--mana-shell-gap);
  }
}

/* ---- موبایل/تبلت (<992px): سایدبار کشویی خارج از جریان محتوا، پنهان با transform ----
   قالب پایه یک قانون translateX(15rem) با مقدار ثابت (نه 100%) روی
   [data-toggled=close][dir=rtl] دارد که چون عرض سایدبار الان بیشتر از 15rem
   شده، دیگر کامل مخفی نمی‌کرد؛ این‌جا با همان specificity override می‌شود. */
@media (max-width: 991.98px) {
  .app-sidebar {
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: 0;
    inset-block-end: 0;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: var(--mana-shadow-lg);
  }
  [dir="rtl"] .app-sidebar {
    transform: translateX(100%);
  }
  [data-toggled="close"][dir="rtl"] .app-sidebar {
    transform: translateX(100%);
  }
  [data-toggled="open"] .app-sidebar {
    transform: translateX(0);
  }
  .app-header {
    padding-inline-start: 0;
  }
  .sidebar-close-btn {
    display: flex;
  }
  /* بازگرداندن هدر سایدبار (لوگو + دکمه‌ی بستن) که قالب پایه در این breakpoint
     با !important مخفی می‌کرد (برای چیدمان دیگری طراحی شده بود که لوگو را
     به هدر بالایی منتقل می‌کرد؛ در طراحی ما لوگو و دکمه‌ی بستن باید همیشه
     بالای پنل کشویی سایدبار دیده شوند) */
  .app-sidebar .main-sidebar-header {
    display: flex !important;
  }

  #sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: rgba(15, 23, 42, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  [data-toggled="open"] #sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* وقتی سایدبار باز است، اسکرول پس‌زمینه قفل شود */
  [data-toggled="open"] body {
    overflow: hidden;
  }
}


/* --------------------------------------------------------------------------
   11) فوتر — همسو با فوتر تیره‌ی مانا (نسخه‌ی سبک برای پنل مدیریتی)
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--mana-card-bg) !important;
  border-top: 1px solid var(--default-border);
}

/* نسخه‌ی تیره‌ی کامل فوتر (در صورت نیاز به استفاده در صفحات عمومی/فروشگاهی) */
.mana-footer-dark {
  background-color: var(--mana-dark);
  color: rgba(255, 255, 255, .7);
  border-radius: var(--mana-radius-lg) var(--mana-radius-lg) 0 0;
  padding: 2.5rem 0 1.5rem;
}
.mana-footer-dark a {
  color: rgba(255, 255, 255, .7);
}
.mana-footer-dark a:hover {
  color: #fff;
}
.mana-footer-dark .mana-trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.mana-footer-dark .mana-trust-item .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   12) نوار اعتماد چهارتایی بالای فوتر (trust bar) — دقیقاً مطابق مانا
   -------------------------------------------------------------------------- */
.mana-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1.75rem 0;
}
@media (max-width: 767.98px) {
  .mana-trust-bar { grid-template-columns: repeat(2, 1fr); }
}
.mana-trust-bar .mana-trust-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
}
.mana-trust-bar .mana-trust-tile .icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mana-card-bg);
  box-shadow: var(--mana-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mana-blue);
  font-size: 1.3rem;
}
.mana-trust-bar .mana-trust-tile .title {
  font-weight: 700;
  font-size: .85rem;
  color: var(--mana-text-dark);
}
.mana-trust-bar .mana-trust-tile .desc {
  font-size: .72rem;
  color: var(--mana-text-muted);
}


/* --------------------------------------------------------------------------
   13) نمودارها — استایل کانتینر ApexCharts هماهنگ با مانا
   -------------------------------------------------------------------------- */
.apexcharts-canvas .apexcharts-tooltip {
  border-radius: var(--mana-radius-sm) !important;
  box-shadow: var(--mana-shadow-md) !important;
  border: none !important;
}


/* --------------------------------------------------------------------------
   14) کارت محصول — الگوی کارت محصول مانا (تصویر مربع + بج گوشه + قیمت + دکمه)
   -------------------------------------------------------------------------- */
.mana-product-card {
  position: relative;
  background: var(--mana-card-bg);
  border-radius: var(--mana-radius-lg);
  box-shadow: var(--mana-shadow-md);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.mana-product-card:hover {
  box-shadow: var(--mana-shadow-hover);
  transform: translateY(-3px);
}
.mana-product-card .mana-product-image {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fb;
  overflow: hidden;
}
.mana-product-card .mana-product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.mana-product-card .mana-product-badge {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  background: var(--mana-red);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: var(--mana-radius-pill);
  box-shadow: var(--mana-shadow-sm);
}
.mana-product-card .mana-product-body {
  padding: .9rem 1rem 1.1rem;
}
.mana-product-card .mana-product-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--mana-text-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.mana-product-card .mana-product-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--mana-text-dark);
}
.mana-product-card .mana-product-price .currency {
  font-size: .68rem;
  font-weight: 500;
  color: var(--mana-text-muted);
  margin-inline-start: .25rem;
}
.mana-product-card .mana-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .6rem;
}


/* --------------------------------------------------------------------------
   15) وضعیت‌های خالی / موفقیت / خطا (empty state) — آیکون دایره‌ای رنگی
   -------------------------------------------------------------------------- */
.mana-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}
.mana-empty-state .icon-badge {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  margin-bottom: 1.25rem;
}
.mana-empty-state .icon-badge.success { background: var(--mana-green-soft); color: var(--mana-green); }
.mana-empty-state .icon-badge.danger  { background: var(--mana-red-soft); color: var(--mana-red); }
.mana-empty-state .icon-badge.neutral { background: var(--mana-blue-soft); color: var(--mana-blue); }
.mana-empty-state h4 { font-weight: 700; margin-bottom: .5rem; }
.mana-empty-state p { color: var(--mana-text-muted); }


/* --------------------------------------------------------------------------
   16) اسکرول‌بار سراسری — نازک، تمیز، تقریباً نامرئی تا وقتی هاور/اسکرول شود
   این قانون همه‌جای سایت را می‌گیرد: خودِ صفحه، جدول‌ها، مودال‌ها، هر
   overflow دیگری — همان زبان بصری اسکرول سایدبار (بخش ۱۰) اما برای موتور
   اسکرول native مرورگر (نه SimpleBar). Firefox از scrollbar-color/width
   استفاده می‌کند، Chrome/Edge/Safari از ::-webkit-scrollbar. مسیر (track)
   همیشه شفاف است؛ فقط خود میله‌ی نازک دیده می‌شود.
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), .3) transparent;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(var(--primary-rgb), .3);
  border-radius: var(--mana-radius-pill);
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--primary-rgb), .5);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* لینک‌های اصلی متن با رنگ آبی مانا */
.text-primary { color: var(--mana-blue) !important; }
.border-primary { border-color: var(--mana-blue) !important; }

/* دراپ‌داون‌ها هماهنگ با کارت‌های مانا */
.dropdown-menu {
  border: none;
  border-radius: var(--mana-radius-md);
  box-shadow: var(--mana-shadow-lg);
  padding: .5rem;
}
.dropdown-item {
  border-radius: var(--mana-radius-sm);
  padding: .55rem .75rem;
}
.dropdown-item:hover,
.dropdown-item.active {
  background-color: var(--mana-blue-soft);
  color: var(--mana-blue);
}

/* Toast ها هماهنگ با کارت گرد مانا */
.toast {
  border-radius: var(--mana-radius-md);
  border: none;
  box-shadow: var(--mana-shadow-lg);
}

/* --------------------------------------------------------------------------
   چگالی و ارتفاع — سراسری
   -------------------------------------------------------------------------- */

/* چگالی کلی رابط: همه‌ی مقادیر rem (پدینگ‌ها، فاصله‌ها، فونت‌های rem-پایه) از
   این عدد مشتق می‌شوند؛ 15px یعنی همه‌چیز ~۶٪ جمع‌وجورتر از پیش‌فرض ۱۶.
   ponytail: تنها دستگیره‌ی بزرگ/کوچک کردن کل UI همین یک خط است. */
html { font-size: 15px; }

/* مودال‌ها کمی باریک‌تر از پیش‌فرض بوت‌استرپ */
.modal-lg { --bs-modal-width: 720px; }

/* همه‌ی مودال‌ها روی صفحه‌های کم‌ارتفاع: به‌جای بیرون‌زدن از پایین صفحه،
   هدر/فوتر ثابت بمانند و فقط بدنه اسکرول بخورد — همان مکانیزم رسمی
   modal-dialog-scrollable بوت‌استرپ، ولی سراسری برای همه‌ی مودال‌ها
   (height قطعی لازم است؛ max-height درصدی روی والد auto کار نمی‌کند). */
.modal-dialog {
  height: calc(100% - var(--bs-modal-margin, 1.75rem) * 2);
}
.modal-dialog .modal-content {
  max-height: 100%;
  overflow: hidden;
}
/* وقتی form دور header/body/footer پیچیده شده، زنجیره‌ی flex را نگه دار
   تا باز هم فقط بدنه اسکرول بخورد (نه اینکه فوتر بیرون بیفتد و clip شود). */
.modal-dialog .modal-content > form {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
.modal-dialog .modal-body { overflow-y: auto; }

/* مودال‌های تمام‌صفحه‌ی موبایل باید تمام ارتفاع بمانند */
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down { height: 100%; }
}

/* ابزارک‌های هدر: تایمر کار در حال اجرا + وضعیت اتصال AI — ظاهر یکپارچه به‌شکل
   پیل، هم‌ارتفاع، با انیمیشن ظریف برای حس «زنده بودن» */
.header-live-pill {
  display: flex;
  align-items: center;
  gap: .375rem;
  height: 2rem;
  padding: 0 .65rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  border: 1px solid var(--bs-border-color);
  background-color: rgba(var(--bs-primary-rgb), .06);
  transition: background-color .15s ease, border-color .15s ease;
}

#job-timer-link.header-live-pill {
  color: var(--bs-primary);
  border-color: rgba(var(--bs-primary-rgb), .25);
}
#job-timer-link.header-live-pill:hover {
  background-color: rgba(var(--bs-primary-rgb), .12);
}
#job-timer-link .ri-time-line {
  font-size: .95rem;
  animation: header-pulse 1.6s ease-in-out infinite;
}
#job-timer-text {
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

#ai-status-badge.header-live-pill {
  background-color: transparent;
  cursor: pointer;
}
#ai-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bs-secondary);
  transition: background-color .2s ease;
  flex-shrink: 0;
}

/* سوییچر فروشگاه در هدر: نام فروشگاه فعال (تک‌خطی، هم‌قواره با سایر پیل‌های
   هدر) + منوی جابه‌جایی بین همه‌ی فروشگاه‌های کاربر */
.store-switcher-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 2rem;
  padding: 0 .65rem;
  border-radius: 999px;
  max-width: 13rem;
  border: 1px solid var(--bs-border-color);
  background-color: rgba(var(--bs-primary-rgb), .06);
  transition: background-color .15s ease, border-color .15s ease;
}
.store-switcher-btn:hover,
.store-switcher-btn[aria-expanded="true"] {
  background-color: rgba(var(--bs-primary-rgb), .12);
  border-color: rgba(var(--bs-primary-rgb), .25);
}

.store-switcher-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #94a3b8;
}
.store-switcher-dot-success { background-color: #28D785; }
.store-switcher-dot-danger { background-color: #F94F4F; }
.store-switcher-dot-warning { background-color: #FFC107; }

.store-switcher-icon {
  flex-shrink: 0;
  font-size: .9rem;
  color: var(--bs-primary);
}
.store-switcher-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: right;
  font-size: .75rem;
  font-weight: 500;
}
.store-switcher-caret {
  flex-shrink: 0;
  font-size: .9rem;
  color: var(--bs-secondary-color, #8c9097);
  transition: transform .15s ease;
}
.store-switcher-btn[aria-expanded="true"] .store-switcher-caret { transform: rotate(180deg); }

.store-switcher-menu {
  width: 16rem;
  padding: .4rem !important;
}
.store-switcher-item {
  padding: .5rem .65rem;
  border-radius: 8px !important;
}
.store-switcher-item.active {
  background-color: rgba(var(--bs-primary-rgb), .08);
  font-weight: 500;
}
.store-switcher-item-check {
  flex-shrink: 0;
  color: var(--bs-primary);
  font-size: 1rem;
}
.store-switcher-item-icon {
  flex-shrink: 0;
  font-size: .95rem;
}

/* لیست کشویی سوییچ provider: هر گزینه یک ردیف کلیک‌پذیر با نقطه‌ی وضعیت +
   نام/مدل، گزینه‌ی فعال با پس‌زمینه‌ی ملایم primary مشخص می‌شود */
.ai-provider-option {
  width: 100%;
  border: none;
  background: transparent;
  text-align: start;
  transition: background-color .12s ease;
}
.ai-provider-option:hover:not(:disabled) {
  background-color: rgba(var(--bs-primary-rgb), .08);
}
.ai-provider-option.active {
  background-color: rgba(var(--bs-primary-rgb), .1);
}
.ai-provider-option:disabled {
  opacity: .6;
  cursor: wait;
}

@keyframes header-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}


/* ==========================================================================
   17) لایه‌ی پولیش سراسری (ارتقای بصری نهایی)
   روی پایه‌ی مانا سوار می‌شود و فقط صیقل می‌دهد؛ چیدمان/ساختار دست‌نخورده
   می‌ماند و توکن‌های موجود (--mana-*) بازاستفاده می‌شوند.
   ========================================================================== */

/* 17a) تایپوگرافی — رندر تمیزتر متن فارسی، فاصله‌ی خطوط خواناتر */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
}
h1, h2, h3, h4, h5, h6,
.card-title,
.plx-page-title { line-height: 1.55; }
p { line-height: 1.8; }

/* اعداد تراز جدولی (tabular-nums) در نواحی عددمحور تا ارقام زیر هم بنشینند:
   جدول‌ها، کارت‌های آماری، قیمت‌ها، صفحه‌بندی، تایمر */
.table,
.plx-stat-card, .mana-stat-card,
.mana-product-price,
.pagination,
.plx-kpi-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 17b) جدول‌ها — سرستون خواناتر، جداکننده‌ی ملایم، ردیف قابل‌تنفس‌تر */
.table thead th {
  letter-spacing: .01em;
  padding-top: 1rem;
  padding-bottom: 1rem;
  white-space: nowrap;
}
.table-hover > tbody > tr { transition: background-color .12s ease; }
/* جدولی که آخرین فرزند کارت است: گوشه‌های پایین با کارت هماهنگ گرد شود */
.card > .table-responsive:last-child,
.card > .table:last-child {
  border-bottom-left-radius: var(--mana-radius-lg);
  border-bottom-right-radius: var(--mana-radius-lg);
  overflow: hidden;
}

/* 17c) مودال‌ها — کارت گرد با سایه‌ی عمیق و backdrop مات
   (گپ واقعی پایه: modal-content اصلاً radius/سایه‌ی مانا نداشت) */
.modal-content {
  border: none;
  border-radius: var(--mana-radius-lg);
  box-shadow: var(--mana-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--default-border);
  padding: 1.1rem 1.4rem;
}
.modal-header .modal-title {
  font-weight: 700;
  color: var(--mana-text-dark);
}
.modal-footer {
  border-top: 1px solid var(--default-border);
  padding: .9rem 1.4rem;
  gap: .5rem;
}
.modal-body { padding: 1.4rem; }
.modal-backdrop.show {
  background-color: rgba(15, 23, 42, .45);
  opacity: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* 17d) ورودی‌ها — placeholder ملایم‌تر (خواناتر ولی بی‌سروصدا) */
.form-control::placeholder,
.form-select::placeholder {
  color: var(--mana-text-muted);
  opacity: .7;
}

/* 17e) دسترس‌پذیری — حلقه‌ی فوکوسِ کیبورد واضح، بدون آسیب به کلیک ماوس */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible,
.side-menu__item:focus-visible {
  outline: 2px solid var(--mana-blue);
  outline-offset: 2px;
}


/* ==========================================================================
   18) صفحه‌ی بازبینی نهایی محصولات استخراج‌شده (scraping/item_review.html)
   بازطراحی کامل هویت بصری: هدر/دکمه‌های اصلی، نوار ابزار، سرچ‌باکس،
   ستون‌بندی جدول، بج‌های وضعیت و دکمه‌های عملیات هر ردیف.
   ========================================================================== */

/* 18a) دکمه‌های اکشن اصلی هدر صفحه (اعمال نهایی / بازگشت / دانلود)
   سه سطح وزن بصری متفاوت: اعمال نهایی = دکمه‌ی اصلی صفحه با گرادیان و سایه‌ی
   رنگی؛ دانلود = ثانویه با قاب مشخص؛ بازگشت = کم‌رنگ‌ترین، فقط آیکون+متن خنثی */
.page-header-breadcrumb .btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--mana-radius-md);
  font-weight: 700;
  font-size: .875rem;
  padding-inline: 1.1rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

#applyItemsBtn {
  background: linear-gradient(135deg, var(--mana-green), #16a34a);
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(34, 197, 94, .55);
}
#applyItemsBtn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(34, 197, 94, .6);
}
#applyItemsBtn:active:not(:disabled) { transform: translateY(0); }
#applyItemsBtn:disabled {
  background: var(--mana-text-muted);
  box-shadow: none;
  opacity: .55;
}
#applyItemsCountBadge {
  border-radius: var(--mana-radius-pill);
  font-weight: 800;
  padding: .3em .65em;
}

/* بازگشت: دکمه‌ی خنثی سطح سوم — بدون سایه، فقط قاب ظریف */
a.btn.btn-light[href*="job_detail"],
.page-header-breadcrumb > div > a.btn.btn-light {
  background-color: transparent;
  border: 1px solid var(--default-border);
  color: var(--mana-text-muted);
  box-shadow: none;
}
a.btn.btn-light[href*="job_detail"]:hover,
.page-header-breadcrumb > div > a.btn.btn-light:hover {
  background-color: var(--mana-gray-bg);
  color: var(--mana-text-dark);
  border-color: var(--input-border);
  transform: none;
}

/* دانلود: دکمه‌ی ثانویه با قاب مشخص و آیکون رنگی برای هر نوع خروجی داخل منو */
#downloadMenuBtn {
  background-color: var(--mana-card-bg);
  border: 1.5px solid var(--input-border);
  color: var(--mana-text-dark);
  box-shadow: var(--mana-shadow-sm);
}
#downloadMenuBtn:hover {
  border-color: var(--mana-blue);
  color: var(--mana-blue);
  background-color: var(--mana-blue-soft);
  transform: translateY(-2px);
  box-shadow: var(--mana-shadow-hover);
}
#downloadMenu {
  border: none;
  border-radius: var(--mana-radius-md);
  box-shadow: var(--mana-shadow-lg);
  padding: .5rem;
  min-width: 220px;
}
#downloadMenu .dropdown-item {
  display: flex;
  align-items: center;
  border-radius: var(--mana-radius-sm);
  padding: .6rem .7rem;
  font-size: .85rem;
  font-weight: 600;
  gap: .6rem;
}
#downloadMenu .dropdown-item:hover { background-color: var(--mana-gray-bg); }
.export-btn-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--mana-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.export-btn-icon-json   { background: var(--mana-blue-soft);   color: var(--mana-blue); }
.export-btn-icon-excel  { background: var(--mana-green-soft);  color: var(--mana-green); }
.export-btn-icon-images { background: var(--mana-orange-soft); color: var(--mana-orange); }

/* چیپ‌های خلاصه‌ی وضعیت زیر عنوان صفحه — کمی درشت‌تر و پررنگ‌تر تا در نگاه اول اسکن شوند */
.plx-pill {
  padding: .3rem .8rem;
  font-size: .76rem;
  font-weight: 700;
}

/* 18b) نوار چسبنده‌ی تب‌ها/جستجو/عملیات گروهی */
.item-review-toolbar-sticky {
  border-radius: var(--mana-radius-lg) !important;
  border: 1px solid var(--default-border);
}
.item-review-toolbar-sticky .card-body {
  padding-top: .85rem;
  padding-bottom: .85rem;
}

/* تب‌های وضعیت: پیل با قاب، حالت فعال توپر آبی (نه فقط پس‌زمینه‌ی کم‌رنگ) تا
   واضح باشد کدام تب انتخاب شده */
#itemStatusTabs {
  gap: .35rem;
  background-color: var(--mana-gray-bg);
  padding: .3rem;
  border-radius: var(--mana-radius-pill);
}
#itemStatusTabs .nav-link {
  border-radius: var(--mana-radius-pill);
  font-weight: 700;
  font-size: .82rem;
  padding: .5rem 1rem;
  color: var(--mana-text-muted);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
#itemStatusTabs .nav-link:hover:not(.active) {
  background-color: rgba(255, 255, 255, .6);
  color: var(--mana-text-dark);
}
#itemStatusTabs .nav-link.active {
  background-color: var(--mana-blue);
  color: #fff;
  box-shadow: var(--mana-shadow-sm);
}
#itemStatusTabs .nav-link .badge {
  font-weight: 800;
}
#itemStatusTabs .nav-link.active .badge {
  background-color: rgba(255, 255, 255, .25) !important;
  color: #fff !important;
}

/* سرچ‌باکس: قاب واحد و واضح، فوکوس آبی مانا، بدون هم‌پوشانی آیکون/متن */
.item-search-box {
  border: 1.5px solid var(--input-border);
  border-radius: var(--mana-radius-pill);
  overflow: hidden;
  min-width: 260px;
  height: 38px;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.item-search-box:focus-within {
  border-color: var(--mana-blue);
  box-shadow: 0 0 0 4px var(--mana-blue-soft) !important;
}
.item-search-box .input-group-text {
  background-color: transparent;
  padding-inline-start: .9rem;
  padding-inline-end: 0;
}
.item-search-box .input-group-text,
.item-search-box .form-control,
.item-search-box .btn {
  border: none !important;
  background-color: transparent;
  box-shadow: none !important;
}
.item-search-box .form-control {
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: .85rem;
}
.item-category-filter-select {
  border-radius: var(--mana-radius-pill);
  min-width: 170px;
  height: 38px;
  font-size: .82rem;
  font-weight: 600;
  border: 1.5px solid var(--input-border);
}

/* دکمه‌های عملیات گروهی — پیل با قاب رنگی متناسب با شدت اکشن (لغو=قرمز، عملیات=آبی) */
#bulkRejectBtn,
#bulkOpsBtn {
  height: 38px;
  border-radius: var(--mana-radius-pill);
  font-weight: 700;
  font-size: .8rem;
  padding-inline: 1rem;
  border: 1.5px solid transparent;
}
#bulkRejectBtn:not(:disabled) { border-color: rgba(245, 61, 87, .25); }
#bulkOpsBtn:not(:disabled) { border-color: rgba(var(--primary-rgb), .25); }
#selectedCountBadge {
  padding: .4rem .8rem;
  font-size: .78rem;
}

/* 18c) جدول اصلی — ستون‌بندی پایدار با auto layout (نه fixed): ستون‌های کوتاه
   با white-space:nowrap عرض واقعی محتوایشان را می‌گیرند، فقط دو ستون متنی
   (نام یافته‌شده/محصول تطابق‌یافته) آزادند رشد کنند و باقی فضا را پر کنند؛
   این‌طور محتوای بلند (دامنه‌ی فروشگاه، نام محصول) بدون اسکرول افقی جا می‌شود */
#itemsTableWrap {
  border-radius: 0 0 var(--mana-radius-lg) var(--mana-radius-lg);
}
#itemsTable {
  table-layout: auto;
}
#itemsTable thead th {
  background-color: var(--mana-gray-bg);
  font-size: .76rem;
  font-weight: 700;
  color: var(--mana-text-muted);
  border-bottom: 2px solid var(--default-border);
  padding-top: .9rem;
  padding-bottom: .9rem;
}
/* ستون‌های کوتاه: عرض به‌اندازه‌ی محتوا، بدون شکستن خط سرستون */
#itemsTable th:nth-child(1),
#itemsTable th:nth-child(3),
#itemsTable th:nth-child(5),
#itemsTable th:nth-child(6),
#itemsTable th:nth-child(8),
#itemsTable th:nth-child(9),
#itemsTable th:nth-child(10) {
  width: 1%;
  white-space: nowrap;
}
/* دو ستون متنی: حداقل عرض معقول تا خیلی له نشوند، بقیه‌ی جا را با هم تقسیم می‌کنند.
   مجموع دو min-width نباید از عرض معقول جدول رد شود، وگرنه کل جدول اسکرول افقی می‌خورد. */
#itemsTable th:nth-child(4),
#itemsTable th:nth-child(7) {
  min-width: 160px;
}

#itemsTable td {
  vertical-align: middle;
  font-size: .85rem;
  padding-top: .65rem;
  padding-bottom: .65rem;
}
#itemsTable td.text-start {
  overflow-wrap: anywhere;
}
.item-desc-cell {
  max-width: 220px;
}
/* ردیف‌های زوج با پس‌زمینه‌ی خیلی ملایم برای اسکن راحت‌تر چشم در جدول‌های چگال */
#itemsTable > tbody > tr.item-row:nth-of-type(4n+1),
#itemsTable > tbody > tr.item-row:nth-of-type(4n+2) {
  background-color: rgba(148, 163, 184, .045);
}
#itemsTable > tbody > tr.item-row:hover {
  background-color: var(--mana-blue-soft) !important;
}

.item-review-thumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--mana-radius-sm);
  border: 1px solid var(--default-border);
  background-color: var(--mana-gray-bg);
}

/* بج «محصول جدید / ویرایش» ستون عملیات — کمی درشت‌تر برای خوانایی سریع */
#itemsTable td .badge {
  font-size: .72rem;
  padding: .4em .7em;
}

/* ستون «مدیریت» پرکاربردترین ستون جدول است؛ چون صفحه RTL است این ستون در
   لبه‌ی چپ می‌افتد و با اسکرول افقی جدول (که در جدول‌های ده‌ستونی روی
   صفحه‌های کوچک/نرمال معمولی است) از دید کاربر خارج می‌شود. با sticky روی
   لبه‌ی چپ، همیشه در دسترس می‌ماند بدون آنکه در عرض کلی جدول جایی گرفته شود. */
#itemsTable th:last-child,
#itemsTable td:last-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--mana-card-bg);
  box-shadow: 2px 0 6px -2px rgba(16, 24, 40, .08);
}
#itemsTable thead th:last-child {
  background-color: var(--mana-gray-bg);
  z-index: 3;
}
#itemsTable > tbody > tr.item-row:hover td:last-child {
  background-color: var(--mana-blue-soft);
}

/* دکمه‌های دایره‌ای مدیریت ردیف (انتخاب تکی/ویرایش کامل/تغییر تطابق/لغو):
   قاب رنگی مشخص به‌جای پس‌زمینه‌ی خیلی کم‌رنگ، اندازه‌ی بزرگ‌تر و فاصله‌ی
   بیشتر بین دکمه‌ها تا در نگاه اول قابل تفکیک باشند */
#itemsTable td .d-flex.gap-1 { gap: .4rem !important; }
#itemsTable .btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#itemsTable .btn-icon:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--mana-shadow-sm);
}
#itemsTable .select-item-btn { border-color: rgba(var(--primary-rgb), .25); }
#itemsTable .edit-details-btn { border-color: rgba(245, 158, 11, .3); }
#itemsTable .change-match-btn { border-color: rgba(var(--primary-rgb), .25); }
#itemsTable .reject-item-btn,
#itemsTable .unreject-item-btn { border-color: rgba(245, 61, 87, .25); }
#itemsTable .unreject-item-btn { border-color: rgba(34, 197, 94, .3); }