:root{
  --nx-collapsed: 60px;
  --nx-expanded: 214px;          /* 10% کمتر از قبل */
  --nx-submenu-w: 190px;         /* عرض پنل زیرمنو */
  --nx-bg1: #3b4cc4;
  --nx-bg2: #2f56b5;
  --nx-fg: #ffffff;
  --nx-item-hover: rgba(255,255,255,0.12);
  --nx-shadow: 0 12px 30px rgba(26,39,99,.35);
  --nx-sub-overlap: 10px;   /* میزان ورود ساب‌منو روی سایدبار */

}
html, body { overflow-x: hidden; }

/* Backdrop */
.nx-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1020;
}
.nx-backdrop.show{ opacity:1; pointer-events:auto; }

/* Sidebar (overlay از راست) */
.nx-sidebar{
  position: fixed; top:0; bottom:0; right:0; left:auto; inset-inline-end:0;
  width: var(--nx-collapsed);
  background: linear-gradient(180deg, var(--nx-bg1), var(--nx-bg2));
  color: var(--nx-fg);
  display:flex; flex-direction:column;
  z-index:1030;
  transition: width .28s ease;
  box-shadow: var(--nx-shadow);
  overflow-x:hidden; overflow-y:hidden;
  will-change: width;
}
.nx-sidebar.nx-expanded{ width: var(--nx-expanded); }

.nx-brand{ display:flex; align-items:center; gap:.75rem; padding:1rem .75rem; border-bottom:1px solid rgba(255,255,255,.12); white-space:nowrap; }
.nx-logo{ font-size:1.25rem; }
.nx-name{ font-weight:700; opacity:0; transition:opacity .2s ease; }
.nx-sidebar.nx-expanded .nx-name{ opacity:1; }

.nx-nav{ padding:.5rem .5rem 1rem; overflow-y:auto; overflow-x:hidden; }
.nx-item{
  position:relative; display:flex; align-items:center; gap:.75rem;
  color:#fff; text-decoration:none;
  padding:.625rem .75rem; border-radius:.75rem; margin:.125rem .375rem;
  white-space:nowrap; cursor:pointer;
}
.nx-item:hover{ background: var(--nx-item-hover); }
.nx-ic{ font-size:1.1rem; flex:0 0 auto; }
.nx-label{ opacity:0; transition:opacity .2s ease; }
.nx-sidebar.nx-expanded .nx-label{ opacity:1; }

/* Chevron برای آیتم‌های دارای زیرمنو */
.has-sub .nx-chv{ margin-inline-start:auto;
transition: none !important;   /* انیمیشن نداشته باشه */
transform: none !important;    /* هرگونه چرخش غیرفعال */ }
.has-sub.open .nx-chv{
  transform: none !important;    /* در حالت open هم ثابت بمونه */
}

/* Submenu panel: کنار سایدبار، سمت چپ آن (چون سایدبار راست‌چین است) */
.nx-submenu{
  position: fixed;
   /* ⬇️ ساب‌منو کمی بر روی سایدبار میاد */
  right: calc(var(--nx-expanded) - var(--nx-sub-overlap));

  top: 12px;                                  /* با JS تنظیم دقیق می‌شود */
  width: var(--nx-submenu-w);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: linear-gradient(180deg, #3d52c7, #2f56b5);
  color: #fff;
    /* ⬇️ بوردر سفید دور قاب */
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px;
  box-shadow: var(--nx-shadow);
  padding: .25rem;
  opacity: 0; transform: translateX(12px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1040;           /* بالاتر از سایدبار */
}
.nx-submenu.show{ opacity:1; transform: translateX(0); pointer-events:auto; }
.nx-subitem{
  display:block; text-decoration:none; color:#fff;
  padding:.75rem 1rem; border-radius:10px;
}
.nx-subitem:hover, .nx-subitem.active{ background: var(--nx-item-hover); }

/* محتوا نباید جابه‌جا شود */
.main-content{ min-height:100vh; margin:0 !important; transition:none; }

/* ریسپانسیو */
@media (max-width: 1200px){
  :root{ --nx-expanded: 220px; }
}
@media (max-width: 992px){
  :root{ --nx-collapsed: 64px; --nx-expanded: min(82vw, 340px); --nx-submenu-w: min(84vw, 340px); }
  .nx-submenu{ right: 12px; }  /* روی موبایل کنار راستِ صفحه باز شود */
}