/*
 * Side-menu.css
 * 
 * هذا الملف يحتوي على جميع الإصلاحات الخاصة بالقائمة الجانبية والـ RTL
 * ترتيب الملفات في _DashboardLayout.cshtml:
 * 1. core.css (vendor)
 * 2. theme-default.css (vendor)
 * 3. theme-overrides.css (custom - RTL base)
 * 4. Side-menu.css (custom - RTL sidebar fixes) ← هذا الملف
 * 5. menu-fixes.css (custom - menu arrow fixes)
 * 
 * لا يوجد تكرار - كل ملف له دور محدد
 */

/* نقل القائمة الجانبية إلى الجانب الأيمن */

/* قاعدة عامة: تطبيق RTL فوراً عند التحميل */
html, body {
    direction: rtl !important;
}

.layout-container {
    direction: rtl !important;
}

/* التأكد من RTL في جميع عناصر القائمة */
#layout-menu {
    direction: rtl !important;
}

#layout-menu .menu-inner {
    direction: rtl !important;
}

#layout-menu .menu-link {
    direction: rtl !important;
    text-align: right !important;
}

#layout-menu .menu-icon {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

/* Desktop: القائمة على اليمين - إصلاح كامل مع إجبار */
@media (min-width: 1200px) {
    /* قلب ترتيب العناصر في layout-container */
    .layout-container {
        flex-direction: row-reverse !important;
        direction: rtl !important;
        gap: 0 !important;
        margin: 0 !important;
    }
    
    /* القائمة على اليمين - إجبار كامل */
    .layout-menu,
    #layout-menu {
        order: 2 !important;
        border-right: none !important;
        border-left: 1px solid rgba(255,255,255,0.06) !important;
        left: auto !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative !important;
        direction: rtl !important;
    }
    
    /* إلغاء جميع padding-left من core.css وإضافة padding-right */
    .layout-page {
        order: 1 !important;
        padding-left: 0 !important;
        padding-right: 16.25rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transition: padding-right 0.3s ease !important;
        width: 100% !important;
        direction: rtl !important;
    }
    
    /* إجبار إلغاء padding-left من جميع الحالات وإضافة padding-right */
    html .layout-page,
    html:not(.layout-navbar-fixed):not(.layout-menu-fixed):not(.layout-menu-fixed-offcanvas) .layout-page,
    html:not(.layout-navbar-fixed) .layout-content-navbar .layout-page,
    html.layout-content-navbar .layout-page,
    .layout-content-navbar .layout-page {
        padding-left: 0 !important;
        padding-right: 16.25rem !important;
    }
    
    /* عندما تكون القائمة مطوية */
    html.layout-menu-collapsed:not(.layout-menu-fixed):not(.layout-menu-fixed-offcanvas) #layout-menu,
    body.sidebar-collapsed #layout-menu {
        margin-left: 0 !important;
        margin-right: -16.25rem !important;
        left: auto !important;
        right: -16.25rem !important;
        transform: none !important;
        opacity: 1 !important;
        position: relative !important;
    }
    
    html.layout-menu-collapsed:not(.layout-menu-fixed):not(.layout-menu-fixed-offcanvas) .layout-page,
    html.layout-menu-collapsed .layout-content-navbar .layout-page,
    body.sidebar-collapsed .layout-page,
    html.layout-menu-collapsed .layout-page,
    html.layout-menu-collapsed:not(.layout-menu-fixed):not(.layout-menu-fixed-offcanvas) .layout-content-navbar .layout-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* إصلاح navbar عند وجود قائمة ثابتة */
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
        left: 0 !important;
        right: 16.25rem !important;
    }
    
    .layout-menu-fixed.layout-menu-collapsed .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
    .layout-menu-fixed-offcanvas.layout-menu-collapsed .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
        left: 0 !important;
        right: 0 !important;
    }
    
    /* إصلاح footer */
    .layout-footer-fixed:not(.layout-menu-collapsed) .layout-wrapper:not(.layout-without-menu) .content-footer {
        left: 0 !important;
        right: 16.25rem !important;
    }
    
    .layout-footer-fixed.layout-menu-collapsed .layout-wrapper:not(.layout-without-menu) .content-footer {
        left: 0 !important;
        right: 0 !important;
    }
}

/* Desktop: إصلاح إضافي - إجبار padding-right وإزالة المسافات */
@media (min-width: 1200px) {
    /* إزالة أي مساحة خضراء أو خلفية غير مرغوب فيها */
    .layout-wrapper {
        background: transparent !important;
    }
    
    .layout-container {
        background: transparent !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* إجبار padding-right عند وجود قائمة */
    html:not(.layout-menu-collapsed):not(.layout-menu-fixed):not(.layout-menu-fixed-offcanvas) .layout-content-navbar .layout-page {
        padding-left: 0 !important;
        padding-right: 16.25rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    html.layout-menu-collapsed:not(.layout-menu-fixed):not(.layout-menu-fixed-offcanvas) .layout-content-navbar .layout-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* إلغاء padding-left من core.css للحالات الثابتة */
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page {
        padding-left: 0 !important;
        padding-right: 16.25rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .layout-menu-fixed.layout-menu-collapsed .layout-page,
    .layout-menu-fixed-offcanvas.layout-menu-collapsed .layout-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* إزالة المسافة الفارغة بين المحتوى والقائمة */
    .layout-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .layout-page .content-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .layout-page .container-xxl {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        max-width: 100% !important;
    }
    
    #layout-menu {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 16.25rem !important;
        flex-shrink: 0 !important;
    }
    
    /* إزالة أي خلفية خضراء من القائمة */
    #layout-menu .app-brand {
        background: transparent !important;
    }
    
    #layout-menu .app-brand-logo {
        background: transparent !important;
    }
}

/* إصلاح إضافي للتابلت - ضمان ظهور القائمة */
@media (min-width: 768px) and (max-width: 1199.98px) {
    html:not(.layout-menu-collapsed) #layout-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    html.layout-menu-collapsed #layout-menu,
    body.sidebar-collapsed #layout-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* Tablet: القائمة ثابتة بجانب المحتوى مثل Desktop */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .layout-container {
        flex-direction: row-reverse !important;
        direction: rtl !important;
        gap: 0 !important;
        margin: 0 !important;
    }
    
    #layout-menu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: 0 !important;
        width: 260px !important;
        max-width: 260px !important;
        height: 100vh !important;
        z-index: auto !important;
        overflow-y: auto;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-shadow: none !important;
        background-color: inherit;
        order: 2 !important;
        border-right: none !important;
        border-left: 1px solid rgba(255,255,255,0.06) !important;
        display: block !important;
        direction: rtl !important;
    }
    
    .layout-page {
        direction: rtl !important;
    }

    .layout-page {
        order: 1 !important;
        flex: 1;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    #layout-menu.menu-show {
        transform: none !important;
        opacity: 1 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }

    #layoutOverlay {
        display: none !important;
    }
    
    #layoutOverlay.show {
        display: none !important;
    }
    
    /* إخفاء زر الرجوع داخل القائمة الجانبية في التابلت */
    #layout-menu .app-brand .layout-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Mobile: القائمة overlay من اليمين - RTL */
@media (max-width: 767.98px) {
    /* تطبيق RTL على container */
    .layout-container {
        direction: rtl !important;
    }
    
    /* إجبار القائمة للظهور من اليمين - إصلاح كامل */
    #layout-menu {
        position: fixed !important;
        top: 0 !important;
        left: auto !important;
        right: -260px !important;
        inset-inline-start: auto !important;
        inset-inline-end: -260px !important;
        width: 260px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 1050 !important;
        overflow-y: auto;
        transition: right 0.3s ease-in-out !important;
        box-shadow: var(--shadow-md, 0 14px 40px rgba(0, 0, 0, 0.35)) !important;
        background-color: inherit;
        border-left: 1px solid rgba(255,255,255,0.06);
        border-right: none !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        opacity: 1 !important;
        direction: rtl !important;
    }

    /* عند فتح القائمة - تظهر من اليمين */
    #layout-menu.menu-show {
        right: 0 !important;
        left: auto !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        transform: none !important;
    }

    /* التأكد من أن القائمة مخفية عند تحميل الصفحة */
    #layout-menu:not(.menu-show) {
        right: -260px !important;
        left: auto !important;
        transform: none !important;
    }
    
    /* في RTL: دفع المحتوى لليمين (قيمة موجبة) عند فتح القائمة من اليمين */
    body.sidebar-open-mobile .layout-page,
    body.sidebar-open-mobile .layout-page * {
        transform: translateX(260px) !important; /* دفع لليمين في RTL */
    }
    
    /* إجبار القائمة للظهور من اليمين عند الفتح - إصلاح شامل */
    #layout-menu.menu-show {
        right: 0 !important;
        left: auto !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    /* منع أي تعارض من ملفات CSS أخرى */
    html #layout-menu.menu-show,
    body #layout-menu.menu-show,
    .layout-wrapper #layout-menu.menu-show {
        right: 0 !important;
        left: auto !important;
    }
    
    /* وضع زر فتح القائمة في اليمين في الموبايل */
    .navbar-nav-right {
        flex-direction: row-reverse !important;
    }
    
    #sidebarToggleBtn {
        order: 1 !important;
        margin-left: 0 !important;
        margin-right: 0.5rem !important;
    }
    
    .navbar-nav-right form {
        order: 2 !important;
        margin-right: auto !important;
        margin-left: 0.5rem !important;
    }
    
    #themeToggle {
        order: 3 !important;
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }

    #layoutOverlay {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }

    #layoutOverlay.show {
        display: block !important;
    }
    
    /* تحريك محتوى الصفحة عند فتح القائمة */
    .layout-page {
        transition: transform 0.3s ease-in-out;
    }
    
    /* تم نقله إلى الأعلى في قسم Mobile */
    
    /* إخفاء زر الرجوع داخل القائمة الجانبية في الموبايل */
    #layout-menu .app-brand .layout-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* منع ظهور القائمة تلقائياً */
    html.layout-menu-expanded #layout-menu:not(.menu-show) {
        right: -260px !important;
        left: auto !important;
        transform: none !important;
    }
    
    body.sidebar-collapsed #layout-menu:not(.menu-show) {
        right: -260px !important;
        left: auto !important;
        transform: none !important;
    }
    
    /* التأكد من RTL في جميع عناصر القائمة */
    #layout-menu .menu-inner {
        direction: rtl !important;
    }
    
    #layout-menu .menu-link {
        direction: rtl !important;
        text-align: right !important;
    }
    
    /* إخفاء أي قائمة جانبية إضافية */
    aside.layout-menu:not(#layout-menu) {
        display: none !important;
    }
}

/* تحسين الأزرار للجوال */
@media (max-width: 575.98px) {
    .btn-group {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

        .btn-group .btn {
            flex: 1 1 auto;
            min-width: 70px;
            font-size: 0.75rem;
            padding: 0.375rem 0.5rem;
        }

    .card-body {
        padding: 1rem;
    }

    .table-responsive {
        font-size: 0.875rem;
    }

    .h5 {
        font-size: 1rem;
    }

    .h3 {
        font-size: 1.25rem;
    }
}

/* تحسين الجداول */
@media (max-width: 767.98px) {
    .table {
        font-size: 0.875rem;
    }

        .table th,
        .table td {
            padding: 0.5rem;
        }
}

/* تحسين الرسوم البيانية */
@media (max-width: 991.98px) {
    #salesChart,
    #purchaseChart,
    #inventoryChart {
        height: 250px !important;
    }
}

/* تحسين البطاقات */
.card {
    margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
    .card {
        margin-bottom: 0.75rem;
    }
}

/* تحسين النافبار - RTL */
.layout-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    direction: rtl !important;
}

/* التأكد من RTL في navbar */
.layout-navbar .navbar-nav-right {
    direction: rtl !important;
    flex-direction: row-reverse !important;
}

.layout-navbar .input-group {
    direction: rtl !important;
}

.layout-navbar .input-group-text {
    border-left: none !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 0 10px 10px 0 !important;
}

.layout-navbar .form-control {
    text-align: right !important;
    border-radius: 10px 0 0 10px !important;
}

/* RTL للأزرار في navbar */
.layout-navbar .btn {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

.layout-navbar .btn:first-child {
    margin-left: 0 !important;
}

/* تحسين القائمة الجانبية */
#layout-menu {
    transition: transform 0.3s ease-in-out;
}

/* إصلاح التنقل في القائمة - التأكد من أن الروابط العادية قابلة للنقر */
#layout-menu .menu-link:not(.menu-toggle) {
    cursor: pointer;
    pointer-events: auto;
}

#layout-menu .menu-link.menu-toggle {
    cursor: pointer;
}

/* إزالة النقاط من أسماء القائمة - إخفاء السهم من menu-toggle */
#layout-menu .menu-link:not(.menu-toggle)::after,
#layout-menu .menu-link:not(.menu-toggle)::before {
    display: none !important;
    content: none !important;
}

/* التأكد من عدم ظهور نقاط في أسماء القائمة */
#layout-menu .menu-link div {
    text-decoration: none !important;
}

#layout-menu .menu-link div::after,
#layout-menu .menu-link div::before {
    display: none !important;
    content: none !important;
}

/* التأكد من أن زر toggleSidebarBtn مرئي ويعمل */
#sidebarToggleBtn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1050;
}

/* منع layout-menu-toggle من الظهور أو العمل في الموبايل */
@media (max-width: 1199.98px) {
    .layout-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    #layout-menu .app-brand .layout-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}
/* Desktop/Tablet: 3 كروت في كل صف */
@media (min-width: 768px) {
    #quickStatsRow .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* التأكد من RTL في جميع الأجهزة */
@media (min-width: 768px) {
    html, body {
        direction: rtl !important;
    }
    
    .layout-container {
        direction: rtl !important;
    }
    
    .layout-page {
        direction: rtl !important;
    }
    
    .container-xxl {
        direction: rtl !important;
    }
    
    .layout-navbar {
        direction: rtl !important;
    }
}

/* إصلاح اتجاه الأسهم في القائمة الجانبية - RTL */
/* نقل السهم من اليمين إلى اليسار في RTL */
#layout-menu .menu-link.menu-toggle {
    padding-right: 1rem !important;
    padding-left: calc(1rem + 1.26em) !important;
}

#layout-menu .menu-link.menu-toggle::after {
    right: auto !important;
    left: 1rem !important;
    transform: translateY(-50%) rotate(-135deg) !important; /* تدوير السهم للاتجاه الصحيح في RTL */
}

#layout-menu .menu-item.open > .menu-link.menu-toggle::after {
    transform: translateY(-50%) rotate(-45deg) !important; /* عند الفتح */
}

/* إصلاح اتجاه الأسهم في القوائم الفرعية */
#layout-menu .menu-sub .menu-link::before {
    transform: scaleX(-1) !important;
}

/* إصلاح زر فتح القائمة - وضعه في الجانب الأيمن */
@media (min-width: 1200px) {
    #sidebarToggleBtn {
        order: -1 !important;
        margin-left: auto !important;
        margin-right: 0.5rem !important;
    }
}

/* RTL للزر في جميع الأجهزة - وضع الزر في اليمين */
#sidebarToggleBtn {
    margin-left: auto !important;
    margin-right: 0.5rem !important;
    order: 1 !important;
}

/* Desktop: وضع الزر في اليمين */
@media (min-width: 1200px) {
    .navbar-nav-right {
        flex-direction: row-reverse !important;
    }
    
    #sidebarToggleBtn {
        order: 1 !important;
        margin-left: 0 !important;
        margin-right: 0.5rem !important;
    }
    
    .navbar-nav-right form {
        order: 2 !important;
        margin-right: auto !important;
        margin-left: 0.5rem !important;
    }
    
    #themeToggle {
        order: 3 !important;
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }
}

/* إصلاح لون hover في الفلتر - من الخارج وليس من الداخل */
.btn-group .btn-outline-primary:hover {
    background-color: transparent !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.25) !important;
}

.btn-group .btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn-group .btn-primary:hover {
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 255, 0.25) !important;
}

/* إصلاح مشاكل الرسم البياني - RTL */
.apexcharts-canvas {
    direction: ltr !important;
}

.apexcharts-xaxis {
    direction: ltr !important;
}

/* إضافة hover effect للكروت القابلة للنقر */
.quick-stat-item a.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-stat-item a.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* إصلاح مشاكل الموبايل */
@media (max-width: 767.98px) {
    html, body {
        direction: rtl !important;
    }
    
    .layout-container {
        direction: rtl !important;
    }
    
    .layout-page {
        padding-right: 0 !important;
        padding-left: 0 !important;
        direction: rtl !important;
    }
    
    .container-xxl {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
        direction: rtl !important;
    }
    
    /* إصلاح زر فتح القائمة في الموبايل */
    #sidebarToggleBtn {
        order: -1 !important;
        margin-left: auto !important;
        margin-right: 0.5rem !important;
    }
    
    /* التأكد من RTL في navbar */
    .layout-navbar {
        direction: rtl !important;
    }
    
    .layout-navbar .navbar-nav-right {
        direction: rtl !important;
    }
    
    /* التأكد من RTL في النماذج */
    .form-control, .form-select, input, select, textarea {
        direction: rtl !important;
        text-align: right !important;
    }
    
    /* تحسين الكروت القابلة للنقر في الموبايل */
    #mobileCardsCharts .card.shadow-sm.text-decoration-none {
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    #mobileCardsCharts .card.shadow-sm.text-decoration-none:active {
        transform: scale(0.98);
    }
    
    /* إخفاء زر "تفاصيل" في الموبايل إذا كانت الكارت نفسها قابلة للنقر */
    #mobileCardsCharts .card.shadow-sm .btn.btn-outline-primary {
        pointer-events: auto;
    }
}