/* کانتینر کلی سایدبار */
.sidebar-wrapper {
    position: fixed;
    top: 0;
    right: 0; /* اگر می‌خوای چپ باشه left:0; */
    width: 260px;
    height: 100vh;
    display: flex;
    flex-direction: column; /* مهم: اجازه میده محتوا عمودی توزیع بشه */
    background: #1e1e2d;
    z-index: 999; /* اگر چیزی رویش کشیده شده باشه */
}

/* خود نِیو که داخل سایدباره */
#sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* هدر / لوگو / دکمه‌-تُگل (باقی بمونه ثابت) */
.navbar-nav.theme-brand {
    flex: 0 0 auto; /* به اندازه محتوا فیکس باشه */
}

/* سایه یا چیزهای ثابت پایین هدر */
.shadow-bottom {
    flex: 0 0 auto;
}

/* لیست منو — این قسمت بزرگ شده و اسکرول می‌خوره */
.menu-categories {
    flex: 1 1 auto; /* میگیره بقیه فضا رو */
    overflow-y: auto !important; /* اسکرول فعال */
    -webkit-overflow-scrolling: touch; /* اسکرول روان روی موبایل */
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* اگر پلاگینی (ps / PerfectScrollbar) کلاس گذاشته بود، مطمئن شو overflow مسدود نشه */
    .menu-categories.ps, .menu-categories.ps--active-y {
        overflow-y: auto !important;
        height: auto !important;
    }

    /* برای دیباگ: موقتا حاشیه ببینیم اندازه دقیق چقدره
   بعد از اینکه درست شد این خط رو بردار */
    .menu-categories.debug-outline {
        outline: 2px dashed rgba(255,0,0,.6);
    }

    /* اگر میخوای نوار اسکرول دیده بشه (در حال دیباگ) */
    .menu-categories::-webkit-scrollbar {
        width: 8px;
    }

    .menu-categories::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
        border-radius: 4px;
    }

    /* (اختیاری) اگر قبلاً مخفی‌شونده scrollbar رو حذف کنید */
    .menu-categories::-webkit-scrollbar {
        display: block;
    }
/* برای حالت دیباگ */