/* =========================================
   1. CORE RTL SETUP
   ========================================= */
html[dir="rtl"],
body[dir="rtl"] {
    direction: rtl;
    text-align: right;
    overflow-x: hidden; /* Prevent horizontal scroll caused by layout shifts */
}

/* =========================================
   2. LAYOUT & POSITIONING (The "Major" Fixes)
   ========================================= */

/* Sidebar (Vertical Menu) - Fixed to the RIGHT */
[dir="rtl"] .app-menu.navbar-menu {
    right: 0 !important;
    left: auto !important;
    border-right: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border for dark theme */
    transform: none !important;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1004;
}

/* Sidebar Logo Area Alignment */
[dir="rtl"] .navbar-brand-box {
    text-align: center;
    padding: 0 1.3rem;
}

/* =========================================
   2.1. COLOR CONSISTENCY (Match EN Colors)
   ========================================= */

/* Force sidebar to use the same dark theme colors as LTR */
[dir="rtl"] .app-menu.navbar-menu {
    background-color: #405189 !important; /* Standard dark sidebar color */
}

[dir="rtl"] .navbar-brand-box {
    background-color: #405189 !important; /* Match sidebar background */
}

/* Sidebar navigation link colors */
[dir="rtl"] .navbar-menu .navbar-nav .nav-link {
    color: #abb9e8 !important; /* Default link color */
}

[dir="rtl"] .navbar-menu .navbar-nav .nav-link:hover,
[dir="rtl"] .navbar-menu .navbar-nav .nav-link.active,
[dir="rtl"] .navbar-menu .navbar-nav .nav-link[aria-expanded="true"] {
    color: #fff !important; /* Active/hover link color */
}

[dir="rtl"] .navbar-menu .navbar-nav .nav-link.active i,
[dir="rtl"] .navbar-menu .navbar-nav .nav-link:hover i {
    color: #fff !important; /* Active/hover icon color */
}

/* Menu title color */
[dir="rtl"] .navbar-menu .menu-title {
    color: #919db4 !important;
}

/* Ensure light logo is displayed on dark background */
[dir="rtl"] .navbar-brand-box .logo-dark {
    display: none !important;
}

[dir="rtl"] .navbar-brand-box .logo-light {
    display: block !important;
}

/* Header (Topbar) - Pushed to the LEFT of the sidebar */
[dir="rtl"] #page-topbar {
    right: 250px !important; /* Matches sidebar width */
    left: 0 !important;
    width: auto !important; /* Takes remaining space */
    transition: all 0.1s ease-out;
    background-color: #405189 !important;
}

/* Main Content Area - Pushed to the LEFT of the sidebar */
[dir="rtl"] .main-content {
    margin-right: 250px !important; /* Matches sidebar width */
    margin-left: 0 !important;
    transition: all 0.1s ease-out;
}

/* Footer - Pushed to the LEFT of the sidebar */
[dir="rtl"] .footer {
    right: 250px !important; /* Matches sidebar width */
    left: 0 !important;
    width: auto !important;
}

/* =========================================
   3. COLLAPSED SIDEBAR (Icons Only)
   ========================================= */

/* Adjust margins when sidebar is collapsed (data-sidebar-size="sm") */
[dir="rtl"][data-sidebar-size="sm"] .main-content,
[dir="rtl"][data-sidebar-size="sm"] .footer {
    margin-right: 70px !important; /* Small sidebar width */
}

[dir="rtl"][data-sidebar-size="sm"] #page-topbar {
    right: 70px !important; /* Small sidebar width */
}

[dir="rtl"][data-sidebar-size="sm"] .navbar-menu {
    width: 70px !important;
}

/* Hide text in collapsed mode */
[dir="rtl"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link span {
    display: none;
}

/* Center icons in collapsed mode */
[dir="rtl"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link i {
    margin-right: 0;
    margin-left: 0;
    display: block;
    text-align: center;
    font-size: 22px;
}

/* =========================================
   4. RESPONSIVE / MOBILE (Screens < 768px)
   ========================================= */
@media (max-width: 767.98px) {
    /* Reset margins for mobile */
    [dir="rtl"] .main-content {
        margin-right: 0 !important;
    }
    [dir="rtl"] #page-topbar {
        right: 0 !important;
    }
    [dir="rtl"] .footer {
        right: 0 !important;
    }
    
    /* Hide sidebar off-screen to the right */
    [dir="rtl"] .navbar-menu {
        right: -250px !important; 
        display: none; /* Hidden by default */
    }

    /* When mobile menu is active (add class 'vertical-sidebar-enable' to body via JS) */
    [dir="rtl"].vertical-sidebar-enable .navbar-menu {
        display: block;
        right: 0 !important;
    }
}

/* =========================================
   5. COMPONENT OVERRIDES & FIXES
   ========================================= */

/* Flip Directional Icons (Arrows, Chevrons) */
[dir="rtl"] .bx-right-arrow-alt:before { content: "\ea19"; } /* Left arrow code */
[dir="rtl"] .bx-left-arrow-alt:before { content: "\ea27"; }  /* Right arrow code */
[dir="rtl"] .ri-arrow-right-line:before { content: "\ea60"; } /* Left arrow */
[dir="rtl"] .ri-arrow-left-line:before { content: "\ea6c"; }  /* Right arrow */
[dir="rtl"] .mdi-chevron-right:before { content: "\f0141"; } /* Chevron Left */
[dir="rtl"] .mdi-chevron-left:before { content: "\f0142"; }  /* Chevron Right */

/* Dropdown Menus */
[dir="rtl"] .dropdown-menu {
    text-align: right;
    right: auto !important; /* Let Popper.js or Bootstrap handle positioning, but reset 'right' */
}
[dir="rtl"] .dropdown-menu-end {
    left: 0 !important;
    right: auto !important;
}

/* List Groups (Tasks, Notifications) */
[dir="rtl"] .list-group {
    padding-right: 0;
    padding-left: 0;
}

/* Form Inputs & Checks */
[dir="rtl"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}
[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}
[dir="rtl"] .form-control, 
[dir="rtl"] .form-select {
    text-align: right;
    background-position: left 0.75rem center; /* Move select dropdown arrow to left */
}

/* Input Groups (Search bars, etc.) */
[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: -1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}
[dir="rtl"] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/* Search Box Icon Positioning */
[dir="rtl"] .search-box .search-icon {
    left: auto;
    right: 13px;
}
[dir="rtl"] .search-box .form-control {
    padding-right: 40px;
    padding-left: 30px;
}

/* Spacing Utilities Reversal (Flip MS/ME) */
[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }

/* Float & Text Align Reversal */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end { float: left !important; }
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }

/* Close Buttons */
[dir="rtl"] .btn-close {
    margin-left: 0;
    margin-right: auto;
}

/* ApexCharts RTL fix */
[dir="rtl"] .apexcharts-canvas {
    direction: ltr; /* Charts often break in strict RTL, keep container LTR but align legend manually via JS/Options */
}
[dir="rtl"] .apexcharts-legend-marker {
    margin-right: 0;
    margin-left: 5px;
}