@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

/* =========================================================
   ERIS DESIGN SYSTEM — ADMIN PANEL OVERRIDES  (v2)
   هماهنگ‌شده با apps/frontend/styles.css و PageBackground.tsx

   تغییرات اصلی نسبت به نسخه‌ی قبلی (رفع باگ/ضعف دیزاین):
   1) حذف بلوک قدیمی و متضاد نارنجی/صورتی (--bs-primary نارنجی +
      گرادینت active منو نارنجی→صورتی) که با سیستم زیتونی ERIS
      تداخل داشت و صرفاً به‌خاطر ترتیب CSS بی‌اثر شده بود (dead code).
   2) حذف تعریف تکراری --bs-font-sans-serif / --bs-body-font-family
      (دو بار در فایل تعریف شده بود).
   3) پس‌زمینه‌ی صفحه از رادیال گرادینت ساده به الگوی «ستون‌های
      عمودی نرم» دقیقاً بر اساس PageBackground.tsx تغییر کرد؛ برای
      این کار کانتینرهای layout به‌جای پس‌زمینه‌ی تخت (opaque)،
      شفاف شدند تا لایه‌ی fixed پشت صفحه دیده شود (قبلاً پس‌زمینه‌ی
      تخت cream روی لایه‌ی زینتی را کامل می‌پوشاند).
   4) انیمیشن glow بی‌نهایت که روی *همه‌ی* دکمه‌های btn-primary
      اعمال می‌شد حذف شد — در فرانت این پالس فقط روی یک المان خاص
      (.eris-cta) اعمال می‌شود نه روی هر دکمه‌ی primary. معادلش
      این‌جا کلاس اختیاری .btn-cta است.
   5) انیمیشن fade-up از .layout-menu و .layout-navbar (چرومِ ثابت
      صفحه) حذف شد؛ چون این عناصر در ناوبری SPA-مانند ادمین ممکن
      است دوباره mount/rerender شوند و باعث پرش/فلیکر مداوم شوند.
      فقط روی .card باقی ماند (محتوای هر تب/صفحه).
   6) حالت focus-visible سراسری برای دسترسی‌پذیری کیبورد اضافه شد
      (قبلاً فقط form-control فوکاس داشت، نه لینک‌ها/دکمه‌ها).
   7) rgb فوکوس دکمه‌های Bootstrap (--bs-btn-focus-shadow-rgb) که
      قبلاً به رنگ آبی پیش‌فرض بوتسترپ می‌ماند، به زیتون ست شد.
   ========================================================= */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* --- برند / رنگ‌بندی هماهنگ با فرانت (styles.css) --- */
  --eris-olive: #eb9ac3;
  --eris-olive-dark: #ac72a2;
  --eris-olive-light: #f9a5eb;
  --eris-cream: #ede8df;
  --eris-charcoal: #1e1e1e;
  --eris-stone: #a89f94;
  --eris-border: #d8d1c7;
  --eris-muted: #e4dfd6;
  --eris-card: #ffffff;
  --eris-brass: #a9743f;
  --eris-brass-light: #d9bf92;

  /* --- توکن‌های اختصاصی پس‌زمینه، عیناً از PageBackground.tsx ---
     توجه: این کرمِ تزئینی (#F8F3E6) با کرمِ برند رابط‌کاربری
     (--eris-cream: #EDE8DF) کمی متفاوت است چون منبع آن کامپوننت
     PageBackground است، نه توکن‌های styles.css. برای یکپارچگی کامل
     در آینده بهتر است هر دو به یک متغیر مشترک ارجاع بدهند. */
  --eris-bg-cream: #f8f3e6;
  --eris-bg-brown: #8b6f47;
  --eris-bg-olive: #6f7d33;
  --eris-bg-brown-24: #8b6f4724; /* ستون قهوه‌ای، ~14% opacity */
  --eris-bg-brown-26: #8b6f4726; /* تینت پایین صفحه */
  --eris-bg-olive-1a: #6f7d331a; /* ستون زیتونی، ~10% opacity */
  --eris-bg-cream-e6: #f8f3e6e6; /* وینیت مرکزی */

  --bs-primary: var(--eris-olive) !important;
  --bs-primary-rgb: 92, 107, 58 !important;
  --bs-primary-bg-subtle: #e5e9dc !important;
  --bs-primary-border-subtle: #c8d0b5 !important;
  --bs-link-color: var(--eris-olive) !important;
  --bs-link-hover-color: var(--eris-olive-dark) !important;
  --bs-body-bg: var(--eris-cream) !important;
  --bs-body-color: var(--eris-charcoal) !important;
  --bs-border-color: var(--eris-border) !important;

  --bs-font-sans-serif: "Vazirmatn", sans-serif;
  --bs-body-font-family: "Vazirmatn", sans-serif;
  --font-family: "Vazirmatn", sans-serif;
  --font-public-sans: "Vazirmatn", sans-serif;
}

/* ---------------------------------------------------------
   لوگو / برند سایدبار
   --------------------------------------------------------- */

.app-brand-logo img {
  height: 32px !important;
  width: auto !important;
  object-fit: contain;
}

.layout-menu-collapsed .app-brand-logo img {
  height: 32px !important;
  width: 32px !important;
  object-fit: contain;
}

.layout-menu-collapsed .app-brand-link {
  justify-content: center !important;
  padding: 0 !important;
}

.layout-menu-collapsed .app-brand-logo {
  margin: 0 auto !important;
}

/* ---------------------------------------------------------
   z-index المان‌های شناور (دراپ‌داون/مودال/پاپ‌آور روی سایدبار)
   --------------------------------------------------------- */

.dropdown-menu,
.modal,
.popover,
.tooltip,
.bs-popover-auto,
.bs-tooltip-auto {
  z-index: 9999 !important;
}


.navbar .dropdown,
.navbar .dropup,
.navbar .dropright,
.navbar .dropleft {
  position: relative;
  z-index: 9999;
}

.dropdown-menu[data-bs-popper] {
  z-index: 9999 !important;
}

.dropdown-style-switcher {
  position: relative;
}

.dropdown-style-switcher .dropdown-menu[data-bs-popper] {
  right: auto !important;
  left: 0 !important;
  transform: none !important;
  inset: auto 0 auto auto !important;
}

/* ---------------------------------------------------------
   فونت سراسری
   --------------------------------------------------------- */

body,
html {
  font-family: "Vazirmatn", sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Vazirmatn", sans-serif !important;
}

.btn, .form-control, .form-select,
.menu-link, .menu-header-text,
table, .dropdown-item,
input, textarea, select {
  font-family: "Vazirmatn", sans-serif !important;
}

/* ---------------------------------------------------------
   Global foundation
   --------------------------------------------------------- */

html,
body {
  color: var(--eris-charcoal) !important;
  font-family: "Vazirmatn", sans-serif !important;
}

body {
  -webkit-font-smoothing: antialiased;
  /* پس‌زمینه‌ی تخت قبلی حذف شد؛ رنگ پایه از لایه‌ی fixed زیر تأمین می‌شود */
  background-color: transparent !important;
}

a {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

::selection {
  background: rgba(92, 107, 58, 0.18);
  color: var(--eris-charcoal);
}

/* دسترسی‌پذیری کیبورد — قبلاً فقط form-control فوکاس مشخص داشت */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.menu-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--eris-olive) !important;
  outline-offset: 2px;
}

.btn-primary,
.btn-outline-primary {
  --bs-btn-focus-shadow-rgb: 92, 107, 58;
}

/* ---------------------------------------------------------
   پس‌زمینه‌ی ثابت صفحه — رنگ تخت ساده (بدون الگوی ستونی)
   --------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--eris-bg-cream);
}

/* ---------------------------------------------------------
   Layout / page — قبلاً این کانتینرها یک پس‌زمینه‌ی تخت (opaque)
   رادیال+cream داشتند که کامل روی لایه‌ی fixed بالا را می‌پوشاند؛
   حالا شفاف‌اند تا الگوی ستونی از پشت دیده شود، دقیقاً مثل رفتار
   PageBackground.tsx زیر محتوای صفحه در فرانت.
   --------------------------------------------------------- */

.layout-wrapper,
.layout-page,
.content-wrapper {
  background: transparent !important;
}

.content-wrapper {
  min-height: 100vh;
}

/* ---------------------------------------------------------
   Sidebar
   --------------------------------------------------------- */

.layout-menu {
  background: rgba(255, 255, 255, 0.88) !important;
  border-left: 1px solid var(--eris-border) !important;
  box-shadow: -8px 0 30px rgba(30, 30, 30, 0.035) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.layout-menu .menu-inner {
  background: transparent !important;
}

.app-brand {
  background: transparent !important;
  border-bottom: 1px solid rgba(216, 209, 199, 0.65);
}

.app-brand-link {
  color: var(--eris-charcoal) !important;
}

.menu-header-text {
  color: var(--eris-stone) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.menu-item > .menu-link {
  color: #57564f !important;
  border-radius: 0.85rem !important;
  margin: 2px 10px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.18s ease,
    box-shadow 0.2s ease;
}

.menu-item > .menu-link i,
.menu-item > .menu-link .menu-icon {
  color: #77736b !important;
  transition: color 0.2s ease, transform 0.2s ease;
}

.menu-item:not(.active):not(.open) > .menu-link:hover {
  background: rgba(92, 107, 58, 0.09) !important;
  color: var(--eris-olive) !important;
  transform: translateX(-2px);
}

.menu-item:not(.active):not(.open) > .menu-link:hover i,
.menu-item:not(.active):not(.open) > .menu-link:hover .menu-icon {
  color: var(--eris-olive) !important;
}

.menu-item.active > .menu-link,
.menu-item-active > .menu-link,
.menu-link.active {
  background: linear-gradient(
    135deg,
    var(--eris-olive) 0%,
    var(--eris-olive-dark) 100%
  ) !important;
  color: var(--eris-cream) !important;
  box-shadow: 0 8px 20px -10px rgba(70, 83, 45, 0.75) !important;
}

.menu-item.active > .menu-link i,
.menu-item.active > .menu-link .menu-icon,
.menu-item-active > .menu-link i,
.menu-item-active > .menu-link .menu-icon,
.menu-link.active i,
.menu-link.active .menu-icon {
  color: var(--eris-cream) !important;
}

.menu-item.open > .menu-link.menu-toggle {
  background: rgba(92, 107, 58, 0.08) !important;
  color: var(--eris-olive) !important;
  box-shadow: none !important;
}

.menu-item.open > .menu-link.menu-toggle i,
.menu-item.open > .menu-link.menu-toggle .menu-icon {
  color: var(--eris-olive) !important;
}

.menu-sub .menu-item > .menu-link {
  border-radius: 0.7rem !important;
}

.menu-sub .menu-item.active > .menu-link {
  background: rgba(92, 107, 58, 0.12) !important;
  color: var(--eris-olive) !important;
  box-shadow: inset -3px 0 0 var(--eris-olive) !important;
}

.menu-sub .menu-item.active > .menu-link i,
.menu-sub .menu-item.active > .menu-link .menu-icon {
  color: var(--eris-olive) !important;
}

/* ---------------------------------------------------------
   Navbar / top bar
   بک‌گراند/شادو navbar از اینجا حذف شد — منبع واحد آن پایین فایل
   در بلوک «ERIS — Admin Navbar» با #layout-navbar تعریف شده تا
   تداخل specificity بین این‌جا و آن بلوک (که قبلاً باعث می‌شد
   هدر در تم لایت هم مشکی نمایش داده شود) پیش نیاید.
   --------------------------------------------------------- */

.navbar .nav-link {
  color: #5c5a54 !important;
}

.navbar .nav-link:hover {
  color: var(--eris-olive) !important;
}

/* ---------------------------------------------------------
   Cards / panels
   --------------------------------------------------------- */

.card {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--eris-charcoal) !important;
  border: 1px solid rgba(216, 209, 199, 0.78) !important;
  border-radius: 1rem !important;
  box-shadow: 0 1px 2px rgba(30, 30, 30, 0.045) !important;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.card:hover {
  border-color: rgba(92, 107, 58, 0.22) !important;
  box-shadow: 0 18px 38px -24px rgba(30, 30, 30, 0.22) !important;
}

/* ---------------------------------------------------------
   استثنا برای کارت واریانت‌ها (رنگ/سایز):
   select2 با dropdownParent روی یک div کوچک داخل همین کارت
   init می‌شه، بنابراین overflow:hidden کلی کارت‌ها باعث بریده
   شدن dropdown رنگ/سایز می‌شد. این استثنا فقط همین یک کارت را
   از قانون کلی .card { overflow: hidden } معاف می‌کند.
   نکته: اگر بعداً محتوای دیگری (تصویر/جدول) با گوشه‌ی تیز به
   لبه‌ی همین کارت چسبید، گوشه‌ی گرد کارت روی آن اعمال نمی‌شود.
   --------------------------------------------------------- */
#variants-container-card.card {
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important;
}

.card-header,
.card-footer {
  background: transparent !important;
  border-color: rgba(216, 209, 199, 0.72) !important;
}

.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  color: var(--eris-charcoal) !important;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: var(--eris-olive);
  --bs-btn-border-color: var(--eris-olive);
  --bs-btn-hover-bg: var(--eris-olive-dark);
  --bs-btn-hover-border-color: var(--eris-olive-dark);
  --bs-btn-active-bg: var(--eris-olive-dark);
  --bs-btn-active-border-color: var(--eris-olive-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;

  background: linear-gradient(
    135deg,
    var(--eris-olive),
    var(--eris-olive-dark)
  ) !important;
  border-color: transparent !important;
  border-radius: 0.85rem !important;
  box-shadow: 0 7px 18px -10px rgba(70, 83, 45, 0.7);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 11px 24px -11px rgba(70, 83, 45, 0.78);
}

.btn-primary:active {
  transform: translateY(0);
}

/* کلاس اختیاری برای CTAهای واقعاً ویژه (مثل .eris-cta در فرانت)
   نه برای هر دکمه‌ی primary — فقط جایی که آگاهانه اضافه کنی،
   مثلاً روی دکمه‌ی «ثبت نهایی سفارش» یا «انتشار». */
.btn-cta {
  animation: erisAdminGlow 2.8s ease-in-out infinite;
}

.btn-cta:active,
.btn-cta:disabled {
  animation: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--eris-olive);
  --bs-btn-border-color: rgba(92, 107, 58, 0.45);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--eris-olive);
  --bs-btn-hover-border-color: var(--eris-olive);

  border-radius: 0.85rem !important;
}

.btn-secondary,
.btn-outline-secondary {
  border-radius: 0.85rem !important;
}

.btn-light {
  background: #f5f1eb !important;
  border-color: var(--eris-border) !important;
  color: var(--eris-charcoal) !important;
}

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */

.form-control,
.form-select,
.input-group-text {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border-color: var(--eris-border) !important;
  color: var(--eris-charcoal) !important;
  border-radius: 0.8rem !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.form-control:focus,
.form-select:focus {
  background-color: #fff !important;
  border-color: var(--eris-olive) !important;
  box-shadow: 0 0 0 0.2rem rgba(92, 107, 58, 0.12) !important;
}

.form-label {
  color: #55534d !important;
  font-weight: 600 !important;
}

.form-check-input:checked {
  background-color: var(--eris-olive) !important;
  border-color: var(--eris-olive) !important;
}

/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--eris-charcoal);
  --bs-table-border-color: rgba(216, 209, 199, 0.7);
}

.table thead th {
  background: #f4f0e9 !important;
  color: #5b5952 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid var(--eris-border) !important;
}

.table tbody tr {
  transition: background-color 0.18s ease;
}

.table tbody tr:hover {
  background: rgba(92, 107, 58, 0.045) !important;
}

/* ---------------------------------------------------------
   Badges / alerts / status colors
   --------------------------------------------------------- */

.badge.bg-primary,
.bg-primary {
  background-color: var(--eris-olive) !important;
}

.text-primary {
  color: var(--eris-olive) !important;
}

.alert-primary {
  --bs-alert-color: var(--eris-olive-dark);
  --bs-alert-bg: #e9eddf;
  --bs-alert-border-color: #cdd5bc;
}

.badge.bg-label-primary {
  background: rgba(92, 107, 58, 0.12) !important;
  color: var(--eris-olive) !important;
}

/* ---------------------------------------------------------
   Dropdowns / popovers / modals
   --------------------------------------------------------- */

.dropdown-menu,
.popover,
.modal-content {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--eris-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 45px -25px rgba(30, 30, 30, 0.28) !important;
  backdrop-filter: blur(12px);
}

.dropdown-item {
  color: var(--eris-charcoal) !important;
  border-radius: 0.65rem;
  margin: 2px 4px;
  width: calc(100% - 8px);
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(92, 107, 58, 0.09) !important;
  color: var(--eris-olive) !important;
  transform: translateX(-2px);
}

.modal-header,
.modal-footer {
  border-color: var(--eris-border) !important;
}

/* ---------------------------------------------------------
   Breadcrumbs / pagination
   --------------------------------------------------------- */

.breadcrumb-item a {
  color: var(--eris-olive) !important;
}

.page-link {
  color: var(--eris-olive) !important;
  border-color: var(--eris-border) !important;
  transition: all 0.18s ease;
}

.page-link:hover {
  background: rgba(92, 107, 58, 0.08) !important;
  border-color: rgba(92, 107, 58, 0.25) !important;
}

.page-item.active .page-link {
  background: var(--eris-olive) !important;
  border-color: var(--eris-olive) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   Progress / loaders
   --------------------------------------------------------- */

.progress {
  background: #e4dfd6 !important;
  border-radius: 999px !important;
}

.progress-bar {
  background: linear-gradient(
    90deg,
    var(--eris-olive-dark),
    var(--eris-olive)
  ) !important;
}

.spinner-border.text-primary {
  color: var(--eris-olive) !important;
}

/* ---------------------------------------------------------
   Vuexy decorative motion
   حرکتِ محدود و هدفمند، هماهنگ با فلسفه‌ی motion فرانت:
   fade-up فقط برای محتوای هر صفحه/تب (.card)، نه چرومِ ثابت
   (سایدبار/نوبار) که نباید هر بار دوباره انیمیت شود.
   --------------------------------------------------------- */

@keyframes erisAdminFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes erisAdminShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes erisAdminGlow {
  0%,
  100% {
    box-shadow: 0 8px 24px -16px rgba(92, 107, 58, 0.45);
  }
  50% {
    box-shadow: 0 14px 30px -16px rgba(92, 107, 58, 0.62);
  }
}

.card {
  animation: erisAdminFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.skeleton,
.placeholder {
  background: linear-gradient(
    90deg,
    #e4dfd6 25%,
    #f5f1eb 50%,
    #e4dfd6 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: erisAdminShimmer 1.4s infinite !important;
}

/* ---------------------------------------------------------
   Scrollbar
   --------------------------------------------------------- */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(92, 107, 58, 0.38) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(92, 107, 58, 0.32);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 107, 58, 0.52);
}

/* ---------------------------------------------------------
   Dark theme
   باگی که در اسکرین‌شات دیدی: با زدن دکمه‌ی ماه، data-bs-theme
   روی html به "dark" تغییر می‌کند، اما بالای فایل مقادیر یکسانی
   برای [data-bs-theme="light"] و [data-bs-theme="dark"] تعریف
   شده بود (--eris-cream, --eris-charcoal, ...) — یعنی dark
   عملاً هیچ مقدار جداگانه‌ای نداشت و کل صفحه (پس‌زمینه‌ی ستونی،
   سایدبار، کارت‌ها، فرم، جدول) روشن می‌ماند.

   چون بیشتر رنگ‌ها در فایل از طریق var(--eris-charcoal)،
   var(--eris-cream) و var(--eris-border) نوشته شده بودند، فقط با
   بازتعریف همین متغیرها برای dark، خیلی از قسمت‌ها (متن، حاشیه‌ی
   کارت‌ها، پس‌زمینه‌ی ستونی fixed) خودکار تیره می‌شوند. باقی موارد
   (سایدبار، نوبار، کارت، فرم، جدول، دراپ‌داون/مودال، اسکلتون) چون
   رنگشان hardcode بود (نه متغیر)، این‌جا صریحاً override شدند.
   --------------------------------------------------------- */

[data-bs-theme="dark"] {
  --eris-cream: #1b1b19;
  --eris-charcoal: #ece7dd;
  --eris-stone: #9b9186;
  --eris-border: #3a3935;
  --eris-muted: #2a2a26;
  --eris-card: #222220;

  /* پس‌زمینه‌ی ستونیِ fixed برای حالت تیره؛ چون body::before از
     همین متغیرها استفاده می‌کند، الگو خودکار تیره می‌شود */
  --eris-bg-cream: #17181a;
  --eris-bg-brown-24: #a9743f1f;
  --eris-bg-brown-26: #a9743f24;
  --eris-bg-olive-1a: #7b8d4a17;
  --eris-bg-cream-e6: #17181ae6;
}

[data-bs-theme="dark"] .layout-menu {
  background: rgba(28, 28, 26, 0.92) !important;
}

[data-bs-theme="dark"] .app-brand {
  border-bottom-color: var(--eris-border);
}

[data-bs-theme="dark"] .menu-item > .menu-link {
  color: #d8d3c8 !important;
}

[data-bs-theme="dark"] .menu-item > .menu-link i,
[data-bs-theme="dark"] .menu-item > .menu-link .menu-icon {
  color: #9b9689 !important;
}

[data-bs-theme="dark"] .menu-header-text {
  color: #857f73 !important;
}

[data-bs-theme="dark"] .navbar .nav-link {
  color: #cfc9bd !important;
}

[data-bs-theme="dark"] .card {
  background: rgba(34, 34, 32, 0.94) !important;
  border-color: var(--eris-border) !important;
}

[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 18px 38px -24px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  border-color: var(--eris-border) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 0 0 0.2rem rgba(123, 141, 74, 0.2) !important;
}

[data-bs-theme="dark"] .form-label {
  color: #b9b3a6 !important;
}

[data-bs-theme="dark"] .table thead th {
  background: #26251f !important;
  color: #c8c2b5 !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
  background: rgba(123, 141, 74, 0.09) !important;
}

[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .modal-content {
  background: rgba(30, 30, 28, 0.97) !important;
}

[data-bs-theme="dark"] .btn-light {
  background: #2a2a26 !important;
}

[data-bs-theme="dark"] .progress {
  background: #2a2a26 !important;
}

[data-bs-theme="dark"] .alert-primary {
  --bs-alert-color: #d7e0c3;
  --bs-alert-bg: #2a3320;
  --bs-alert-border-color: #435330;
}

/* اسکلتون/placeholder روشن روی کارت تیره کنتراست نداشت */
[data-bs-theme="dark"] .skeleton,
[data-bs-theme="dark"] .placeholder {
  background: linear-gradient(
    90deg,
    #2a2a26 25%,
    #38372f 50%,
    #2a2a26 75%
  ) !important;
  background-size: 200% 100% !important;
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   Revenue chart tooltip — بج شناور گرد، هماهنگ با برند ERIS
   --------------------------------------------------------- */

.apexcharts-tooltip.apexcharts-theme-light {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.eris-revenue-tooltip {
  background: var(--eris-charcoal);
  color: var(--eris-cream);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  box-shadow: 0 8px 20px -8px rgba(30, 30, 30, 0.45);
  white-space: nowrap;
}

.eris-tt-label {
  color: var(--eris-stone);
  font-size: 10px;
  text-align: center;
}

.eris-tt-value {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.eris-tt-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
}

.eris-tt-badge.eris-tt-up {
  background: rgba(117, 134, 82, 0.35); /* eris-olive-light */
  color: #d7e0c3;
}

.eris-tt-badge.eris-tt-down {
  background: rgba(169, 116, 63, 0.35); /* eris-brass */
  color: #f0d9bd;
}

[data-bs-theme="dark"] .eris-revenue-tooltip {
  background: #2a2a26;
  color: #ece7dd;
}

/* Hide Template Customizer - keep theme persistence enabled */
#template-customizer {
    display: none !important;
}

/* =========================================================
   ERIS — Admin Navbar
   Override Vuexy bg-navbar-theme
   منبع واحد بک‌گراند/بردر/شادو navbar برای هر دو تم (جایگزین
   بلوک‌های پراکنده‌ی .layout-navbar/.navbar که در بالای فایل
   حذف شدند). از #layout-navbar استفاده شده تا specificity کافی
   برای غلبه بر استایل پیش‌فرض قالب را داشته باشد؛ به همین دلیل
   نسخه‌ی لایت هم اینجا صریحاً (بدون شرط تم) تعریف شده است —
   قبلاً همین بلوک بدون تفکیک تم، هدر را در حالت لایت هم مشکی
   می‌کرد چون specificity‌اش از بلوک لایتِ بالای فایل بیشتر بود.

   box-shadow و background-image صراحتاً none شدند تا سایه/گرادیان
   پیش‌فرض قالب (Vuexy/Sneat، رنگ primary پیش‌فرض بنفش/سورمه‌ای)
   که پشت backdrop-blur نیمه‌شفاف navbar در تم دارک به‌صورت هاله
   دیده می‌شد، بی‌اثر شود.
   ========================================================= */

/* Light (پیش‌فرض) — صورتی گرادیانی */
/* =========================================================
   Navbar — صورتی گرادیانی (هم‌رنگ آیتم فعال سایدبار)
   ========================================================= */

/* Light */
#layout-navbar.bg-navbar-theme,
#layout-navbar.layout-navbar,
#layout-navbar.navbar {
  background: linear-gradient(135deg, #4b142d 0%, #361731 100%) !important;
  background-image: linear-gradient(135deg, #4d1a33 0%, #291b27 100%) !important;
  border-bottom: 1px solid rgba(136, 44, 121, 0.35) !important;
  box-shadow: 0 4px 20px -8px rgba(77, 26, 51, 0.45) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* متن و آیکن‌های navbar — تیره برای خوانایی روی صورتی */
#layout-navbar .nav-link,
#layout-navbar .nav-link i,
#layout-navbar .icon-base {
  color: #4a0a38 !important;
}

#layout-navbar .nav-link:hover,
#layout-navbar .nav-link:hover i,
#layout-navbar .nav-link:hover .icon-base {
  color: #2a0518 !important;
  opacity: 1;
}

#layout-navbar .navbar-brand,
#layout-navbar .app-brand-text {
  color: #4a0a38 !important;
}

#layout-navbar .btn-icon {
  color: #4a0a38 !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

#layout-navbar .btn-icon:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #2a0518 !important;
}

#layout-navbar .avatar img {
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
}

/* Dark */
[data-bs-theme="dark"] #layout-navbar.bg-navbar-theme,
[data-bs-theme="dark"] #layout-navbar.layout-navbar,
[data-bs-theme="dark"] #layout-navbar.navbar {
  background: linear-gradient(135deg, #4a0a38 0%, #6b1050 50%, #8b1560 100%) !important;
  background-image: linear-gradient(135deg, #4a0a38 0%, #6b1050 50%, #8b1560 100%) !important;
  border-bottom: 1px solid rgba(232, 111, 201, 0.3) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] #layout-navbar .nav-link,
[data-bs-theme="dark"] #layout-navbar .nav-link i,
[data-bs-theme="dark"] #layout-navbar .icon-base {
  color: #ffd9ec !important;
}