/* RTL (Right-to-Left) Stylesheet for Arabic Language Support */

/* Global RTL text alignment */
html[dir="rtl"],
[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

/* Navbar adjustments */
[dir="rtl"] .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
}

/* Keep navbar items in the same visual order, don't reverse */
[dir="rtl"] .navbar-nav {
    flex-direction: row;
    /* Keep normal order */
}

[dir="rtl"] .navbar-nav .nav-item {
    margin-left: 0;
    margin-right: 0;
}

[dir="rtl"] .dropdown-menu {
    text-align: right;
    right: 0;
    left: auto;
}

[dir="rtl"] .dropdown-menu-end {
    right: auto;
    left: 0;
}

/* تحسين القائمة الجانبية في الموبايل للـ RTL - CSS قوي جداً */
html[dir="rtl"] .offcanvas,
html[dir="rtl"] .offcanvas.offcanvas-end,
html[dir="rtl"] .offcanvas.offcanvas-start,
html[dir="rtl"] .offcanvas.offcanvas-mobile,
html[dir="rtl"] .offcanvas.offcanvas-mobile.offcanvas-end,
html[dir="rtl"] .offcanvas.offcanvas-mobile.offcanvas-start,
html[dir="rtl"] #offcanvasNavbar,
html[dir="rtl"] #offcanvasNavbar.offcanvas-end,
html[dir="rtl"] #offcanvasNavbar.offcanvas-start,
html[dir="rtl"] #offcanvasNavbar.offcanvas-mobile {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
}

html[dir="rtl"] .offcanvas.show,
html[dir="rtl"] .offcanvas.offcanvas-end.show,
html[dir="rtl"] .offcanvas.offcanvas-start.show,
html[dir="rtl"] .offcanvas.offcanvas-mobile.show,
html[dir="rtl"] .offcanvas.offcanvas-mobile.offcanvas-end.show,
html[dir="rtl"] .offcanvas.offcanvas-mobile.offcanvas-start.show,
html[dir="rtl"] #offcanvasNavbar.show,
html[dir="rtl"] #offcanvasNavbar.offcanvas-end.show,
html[dir="rtl"] #offcanvasNavbar.offcanvas-start.show,
html[dir="rtl"] #offcanvasNavbar.offcanvas-mobile.show {
    transform: translateX(0) !important;
}

html[dir="rtl"] .offcanvas:not(.show),
html[dir="rtl"] .offcanvas.offcanvas-end:not(.show),
html[dir="rtl"] .offcanvas.offcanvas-start:not(.show),
html[dir="rtl"] .offcanvas.offcanvas-mobile:not(.show),
html[dir="rtl"] .offcanvas.offcanvas-mobile.offcanvas-end:not(.show),
html[dir="rtl"] .offcanvas.offcanvas-mobile.offcanvas-start:not(.show),
html[dir="rtl"] #offcanvasNavbar:not(.show),
html[dir="rtl"] #offcanvasNavbar.offcanvas-end:not(.show),
html[dir="rtl"] #offcanvasNavbar.offcanvas-start:not(.show),
html[dir="rtl"] #offcanvasNavbar.offcanvas-mobile:not(.show) {
    transform: translateX(100%) !important;
}

/* وضع زر القائمة الجانبية على اليمين في RTL */
@media (max-width: 991px) {
    html[dir="rtl"] .navbar {
        min-height: 56px !important;
    }
    
    html[dir="rtl"] .navbar .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-direction: row-reverse !important;
    }
    
    html[dir="rtl"] .navbar-toggler {
        order: 1 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    html[dir="rtl"] .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25) !important;
    }
    
    html[dir="rtl"] .navbar-brand {
        order: 2 !important;
        margin-right: 0 !important;
        margin-left: 1rem !important;
    }
    
    /* التأكد من أن القائمة الجانبية تظهر من اليمين في RTL */
    html[dir="rtl"] .offcanvas.offcanvas-mobile {
        right: 0 !important;
        left: auto !important;
    }
    
    html[dir="rtl"] .offcanvas.offcanvas-mobile.offcanvas-end {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important;
    }
    
    html[dir="rtl"] .offcanvas.offcanvas-mobile.offcanvas-end.show {
        transform: translateX(0) !important;
    }
}

[dir="rtl"] .offcanvas-body .nav-link {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .offcanvas-body .dropdown-menu {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .offcanvas-body .dropdown-item {
    text-align: right;
    direction: rtl;
    flex-direction: row-reverse;
}

[dir="rtl"] .offcanvas-body .nav-link {
    flex-direction: row-reverse;
}

/* تحسين القائمة في الموبايل للـ RTL */
@media (max-width: 768px) {
    [dir="rtl"] .navbar-nav .nav-link {
        text-align: right;
    }
    
    [dir="rtl"] .navbar-nav .dropdown-menu {
        text-align: right;
        direction: rtl;
    }
    
    [dir="rtl"] .navbar-nav .dropdown-item {
        text-align: right;
        direction: rtl;
    }
    
    [dir="rtl"] .navbar-nav.align-items-center .nav-link {
        flex-direction: row-reverse;
    }
}

/* Form elements */
[dir="rtl"] .form-label {
    text-align: right;
}

[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    text-align: right;
}

/* Fix caret position in input fields - keep caret on LEFT */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="search"],
[dir="rtl"] input[type="password"],
[dir="rtl"] textarea,
[dir="rtl"] .form-control {
    text-align: right;
    direction: rtl;
}

/* Fix button order in RTL - reverse flex direction */
[dir="rtl"] .d-flex.gap-2 {
    flex-direction: row-reverse !important;
    gap: 0.5rem !important;
}

[dir="rtl"] .btn-group {
    flex-direction: row-reverse !important;
}

/* Keep text direction correct inside buttons */
[dir="rtl"] .btn {
    direction: rtl;
    text-align: center;
}

/* Fix spacing between buttons in RTL */
[dir="rtl"] .btn+.btn {
    margin-right: 0.5rem;
    margin-left: 0;
}

[dir="rtl"] .btn-group>.btn+.btn {
    margin-right: 0.25rem;
    margin-left: 0;
}

/* Fix Select2 clear button (X icon) position in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    right: auto !important;
    left: 35px !important;
}

/* Fix Select2 arrow position in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    right: auto !important;
    left: 1px !important;
}

/* Fix Select2 selection padding in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.375rem 0.75rem 0.375rem 2.25rem !important;
}

/* Fix Select2 dropdown alignment in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-dropdown {
    text-align: right;
    direction: rtl;
}

/* Fix Select2 search field in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    text-align: right;
    direction: rtl;
}

/* Fix Select2 results list in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-results__option {
    text-align: right;
    direction: rtl;
    padding-right: 0.75rem;
    padding-left: 2.25rem;
}

/* Fix Select2 multiple selection tags in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    float: right;
    margin-right: 0;
    margin-left: 0.375rem;
}

[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0;
    margin-left: 0.375rem;
    float: left;
}

/* Fix Select2 container positioning in RTL */
[dir="rtl"] .select2-container {
    direction: rtl;
}

/* Fix Select2 selection rendered text alignment in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-selection__rendered {
    text-align: right;
    direction: rtl;
    padding-right: 0;
    padding-left: 0;
}

/* Fix Select2 loading spinner position in RTL */
[dir="rtl"] .select2-container--bootstrap-5 .select2-selection__arrow b {
    right: auto;
    left: 50%;
    margin-left: -4px;
    margin-right: 0;
}