/* RTL overrides for Arabic. Loaded only when dir="rtl". */

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* No flex-direction override on .page-inner: dir="rtl" already reverses the
   flex row's main axis, so the theme's default `row` puts the sidebar on the
   right by itself. Forcing row-reverse here would cancel that and pin the
   sidebar back to the left. */

/* Bootstrap's mr-*/ml-*/text-*/float-* utilities are physical-direction —
   swap the handful this app actually uses. */
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }
html[dir="rtl"] .float-left { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }

/* Sidebar/header icon-text spacing was authored LTR (icon, then space, then
   label) — mirror it so the icon still sits nearest the edge in RTL. */
html[dir="rtl"] .page-sidebar .nav-menu > li > a i {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* The theme doesn't trust Popper for header dropdowns: in LTR it pins them
   all at right:1.5rem, under the icon cluster in the header's corner. Popper's
   own RTL placement is unreliable (its inline `left` fights the stylesheet
   `right`, and wide menus end up off-screen), so mirror the theme's approach
   instead: pin header menus at left:1.5rem — the icon cluster's corner in RTL.
   !important is required to beat Popper's inline left. */
html[dir="rtl"] .page-wrapper .page-header [data-toggle="dropdown"] + .dropdown-menu {
  left: 1.5rem !important;
  right: auto !important;
}
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .dropdown-item {
  text-align: right;
}

/* The header's minify/lock hover menu is pure CSS (not Popper) and anchored
   with a physical `left` in the theme — mirror it. */
html[dir="rtl"] .dropdown-icon-menu > ul {
  left: auto;
  right: -5px;
  margin-left: 0;
  margin-right: 1px;
}

/* Mobile off-canvas sidebar. The theme's LTR math: static position on-screen
   left, park with translate3d(-270px), show with translate3d(0). In RTL the
   fixed sidebar's hypothetical static position is BEYOND the right edge
   (Chrome places the out-of-flow first flex item to the right of the
   full-width content in a RTL row), so the theme's leftward park translate
   drags a strip of it INTO view, and its "show" translate of 0 leaves it
   off-screen. Mirror both states: park = no translate (already off-screen
   right), open = pull left by the sidebar width. Same breakpoint as the
   theme; !important + higher specificity to beat the theme's own !important. */
@media only screen and (max-width: 992px) {
  html[dir="rtl"] body:not(.mobile-nav-on) .page-wrapper .page-sidebar {
    -webkit-transform: translate3d(16.875rem, 0, 0) !important;
    transform: translate3d(16.875rem, 0, 0) !important;
  }
  html[dir="rtl"] body.mobile-nav-on .page-wrapper .page-sidebar {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }
}