/* اصلاح سایدبار در حالت RTL برای موبایل و دسکتاپ */
html[dir="rtl"] #nav-sidebar {
    right: 0 !important;
    left: auto !important;
    border-right: 1px solid var(--color-base-200);
    border-left: none !important;
}

/* دسکتاپ RTL - حالت مخفی */  
@media (min-width: 1280px) {
    html[dir="rtl"] .navigation_wrapper {
        position: relative !important;
        transform: none !important;
        right: auto !important;
        transition: width 0.3s ease, margin 0.3s ease !important;
    }
    
    /* مخفی کردن کامل sidebar در دسکتاپ */
    html[dir="rtl"] .navigation_wrapper.xl\\:hidden\\! {
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    
    html[dir="rtl"] .navigation_wrapper.xl\\:hidden\\! .bg-gray-50 {
        display: none !important;
    }
}

/* موبایل RTL - سایدبار پنهان به طور پیش‌فرض */
@media (max-width: 1279px) {
    html[dir="rtl"] .navigation_wrapper {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 288px !important;
        height: 100vh !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 9999 !important;
        background: transparent !important;
    }
    
    /* باز کردن sidebar در موبایل - با Alpine.js */
    html[dir="rtl"] .navigation_wrapper[style*="display: block"],
    html[dir="rtl"] .navigation_wrapper:not(.hidden) {
        transform: translateX(0%) !important;
    }
    
    /* اطمینان از نمایش درست */
    html[dir="rtl"] .navigation_wrapper[style*="display: block"] .bg-gray-50,
    html[dir="rtl"] .navigation_wrapper:not(.hidden) .bg-gray-50 {
        display: block !important;
    }
    
    /* sidebar content در موبایل RTL */
    html[dir="rtl"] #nav-sidebar {
        box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.1) !important;
        z-index: 10000 !important;
    }
}

/* Dark mode support */
html[dir="rtl"].dark #nav-sidebar {
    border-right-color: var(--color-base-800) !important;
}