/* ============================================================
   LTR Override Styles  — loaded only when locale = en
   Root cause: css-rtl/bootstrap.css swaps utility classes:
     .float-left  → float: right
     .float-right → float: left
     .mr-auto     → margin-left: auto
     .ml-auto     → margin-right: auto
     .mr-{n}      → margin-left
     .ml-{n}      → margin-right
     .pr-{n}      → padding-left
     .pl-{n}      → padding-right
     .text-left   → text-align: right
     .text-right  → text-align: left
   We un-swap all of these and then fix the layout.
   ============================================================ */

/* ── Base direction & font ── */
html[dir="ltr"],
html[dir="ltr"] body {
    direction: ltr !important;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* ── Un-swap Bootstrap RTL float utilities ── */
html[dir="ltr"] .float-left  { float: left  !important; }
html[dir="ltr"] .float-right { float: right !important; }

/* ── Un-swap Bootstrap RTL margin-auto utilities ── */
html[dir="ltr"] .mr-auto { margin-right: auto !important; margin-left: 0    !important; }
html[dir="ltr"] .ml-auto { margin-left:  auto !important; margin-right: 0   !important; }

/* ── Un-swap Bootstrap RTL margin size utilities ── */
html[dir="ltr"] .mr-0  { margin-right: 0      !important; margin-left: unset !important; }
html[dir="ltr"] .mr-1  { margin-right: .25rem !important; margin-left: unset !important; }
html[dir="ltr"] .mr-2  { margin-right: .5rem  !important; margin-left: unset !important; }
html[dir="ltr"] .mr-3  { margin-right: 1rem   !important; margin-left: unset !important; }
html[dir="ltr"] .mr-4  { margin-right: 1.5rem !important; margin-left: unset !important; }
html[dir="ltr"] .mr-5  { margin-right: 3rem   !important; margin-left: unset !important; }
html[dir="ltr"] .ml-0  { margin-left:  0      !important; margin-right: unset !important; }
html[dir="ltr"] .ml-1  { margin-left:  .25rem !important; margin-right: unset !important; }
html[dir="ltr"] .ml-2  { margin-left:  .5rem  !important; margin-right: unset !important; }
html[dir="ltr"] .ml-3  { margin-left:  1rem   !important; margin-right: unset !important; }
html[dir="ltr"] .ml-4  { margin-left:  1.5rem !important; margin-right: unset !important; }
html[dir="ltr"] .ml-5  { margin-left:  3rem   !important; margin-right: unset !important; }

/* ── Un-swap Bootstrap RTL padding utilities ── */
html[dir="ltr"] .pr-0  { padding-right: 0      !important; padding-left: unset !important; }
html[dir="ltr"] .pr-1  { padding-right: .25rem !important; padding-left: unset !important; }
html[dir="ltr"] .pr-2  { padding-right: .5rem  !important; padding-left: unset !important; }
html[dir="ltr"] .pr-3  { padding-right: 1rem   !important; padding-left: unset !important; }
html[dir="ltr"] .pl-0  { padding-left:  0      !important; padding-right: unset !important; }
html[dir="ltr"] .pl-1  { padding-left:  .25rem !important; padding-right: unset !important; }
html[dir="ltr"] .pl-2  { padding-left:  .5rem  !important; padding-right: unset !important; }
html[dir="ltr"] .pl-3  { padding-left:  1rem   !important; padding-right: unset !important; }

/* ── Un-swap text alignment utilities ── */
html[dir="ltr"] .text-left  { text-align: left  !important; }
html[dir="ltr"] .text-right { text-align: right !important; }

/* ── Sidebar: move to left ── */
html[dir="ltr"] .main-menu {
    right: auto !important;
    left:  0    !important;
}

/* Sidebar brand header */
html[dir="ltr"] body.vertical-layout.vertical-menu-modern.menu-expanded .navbar .navbar-header,
html[dir="ltr"] body.vertical-layout.vertical-menu-modern.menu-collapsed .navbar .navbar-header {
    float: left !important;
}

/* Sidebar menu icons */
html[dir="ltr"] body.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a > i {
    float: left  !important;
    margin-left:  0    !important;
    margin-right: 1rem !important;
}
html[dir="ltr"] body.vertical-layout.vertical-menu-modern .main-menu .navigation .menu-content > li > a > i {
    margin-left:  0       !important;
    margin-right: 1.38rem !important;
}

/* Sub-menu expand arrow */
html[dir="ltr"] body.vertical-layout.vertical-menu-modern .main-menu .navigation > li > a:after {
    right: auto !important;
    left:  20px !important;
}
html[dir="ltr"] body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.open > a:not(.mm-next):after {
    transform: rotate(90deg) !important;
}

/* ── Content area: swap side margin for sidebar ── */
html[dir="ltr"] body.vertical-layout.vertical-menu-modern.menu-expanded .app-content,
html[dir="ltr"] body.vertical-layout.vertical-menu-modern.menu-expanded .footer {
    margin-right: 0    !important;
    margin-left:  260px !important;
}
html[dir="ltr"] body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
html[dir="ltr"] body.vertical-layout.vertical-menu-modern.menu-collapsed .footer {
    margin-right: 0   !important;
    margin-left:  80px !important;
}
@media (min-width: 1200px) {
    html[dir="ltr"] body.vertical-layout.vertical-menu-modern .app-content,
    html[dir="ltr"] body.vertical-layout.vertical-menu-modern .footer {
        margin-right: 0    !important;
        margin-left:  260px !important;
    }
}

/* ── Mobile: slide sidebar out to the left ── */
@media (max-width: 1199.98px) {
    html[dir="ltr"] body.vertical-layout.vertical-menu-modern .main-menu {
        right: auto  !important;
        left: -260px !important;
    }
    html[dir="ltr"] body.vertical-layout.vertical-menu-modern .app-content,
    html[dir="ltr"] body.vertical-layout.vertical-menu-modern .footer {
        margin-left:  0 !important;
        margin-right: 0 !important;
    }
}

/* ── Floating navbar: push past the LEFT sidebar ── */
/*
   RTL default in bootstrap-extended.css:
     .header-navbar.floating-nav { left: 0; margin: 1.3rem 2.2rem 0;
       width: calc(100vw - (100vw - 100%) - 4.4rem - 260px); }
   In RTL the sidebar is on the RIGHT, so left:0 is correct (content side).
   In LTR the sidebar is on the LEFT, so we must shift the navbar right by
   the sidebar width so it starts AFTER the sidebar, not behind it.
*/
html[dir="ltr"] .header-navbar.floating-nav {
    margin-left:  calc(260px + 2.2rem) !important;
    margin-right: 2.2rem               !important;
    width: calc(100vw - (100vw - 100%) - calc(2.2rem * 2) - 260px) !important;
}

/* Collapsed sidebar: only 80px wide */
html[dir="ltr"] body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.floating-nav {
    margin-left: calc(80px + 2.2rem) !important;
    width: calc(100vw - (100vw - 100%) - calc(2.2rem * 2) - 80px) !important;
}

/* Mobile: no sidebar offset */
@media (max-width: 1199.98px) {
    html[dir="ltr"] .header-navbar.floating-nav {
        margin-left:  2.2rem !important;
        margin-right: 2.2rem !important;
        width: calc(100vw - (100vw - 100%) - calc(2.2rem * 2)) !important;
    }
}

/* ── Navbar container direction ── */
html[dir="ltr"] .header-navbar .navbar-wrapper,
html[dir="ltr"] .header-navbar .navbar-container,
html[dir="ltr"] .header-navbar .navbar-collapse {
    direction: ltr !important;
}

/* ── Dropdown menus ── */
html[dir="ltr"] .dropdown-menu {
    text-align: left  !important;
    right:      auto  !important;
    left:       0     !important;
}
html[dir="ltr"] .dropdown-menu-right {
    right: 0    !important;
    left:  auto !important;
}
html[dir="ltr"] .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu {
    right: 0    !important;
    left:  auto !important;
}
html[dir="ltr"] .dropdown-menu .dropdown-item i {
    margin-right: .5rem !important;
    margin-left:  0     !important;
}

/* ── Breadcrumb separator ── */
html[dir="ltr"] .breadcrumb .breadcrumb-item + .breadcrumb-item:before {
    content:       "/"  !important;
    padding-right: 0    !important;
    padding-left:  .5rem !important;
}

/* ── Form elements ── */
html[dir="ltr"] .form-control,
html[dir="ltr"] .form-group label,
html[dir="ltr"] textarea,
html[dir="ltr"] select {
    direction:  ltr  !important;
    text-align: left !important;
}
html[dir="ltr"] .custom-file-label::after {
    right:  auto !important;
    left:   0    !important;
    border-right: 1px solid #d8d6de !important;
    border-left:  none              !important;
    border-radius: 0.357rem 0 0 0.357rem !important;
}
html[dir="ltr"] .custom-file-input ~ .custom-file-label::after {
    content: "Browse" !important;
}

/* ── Select2 ── */
html[dir="ltr"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    float:        left  !important;
    margin-right: 5px   !important;
    margin-left:  0     !important;
}
html[dir="ltr"] .select2-container { direction: ltr !important; }

/* ── Badges in sidebar ── */
html[dir="ltr"] .badge-pill.float-right {
    float:       right !important;
    margin-right: .5rem !important;
    margin-left:  0     !important;
}

/* ── Tags input ── */
html[dir="ltr"] div.tagsinput span.tag {
    float:        left !important;
    margin-right: 5px  !important;
    margin-left:  0    !important;
}
html[dir="ltr"] div.tagsinput div { float: left  !important; }
html[dir="ltr"] div.tagsinput span.tag a { float: right !important; }
html[dir="ltr"] div.tagsinput input { margin: 0 5px 5px 0 !important; }

/* ── Toastr ── */
html[dir="ltr"] #toast-container > .toast { text-align: left !important; }

/* ── Card header: keep heading-elements (action buttons) on the right ── */
html[dir="ltr"] .card-header {
    flex-direction: row !important;
}
html[dir="ltr"] .card-header .heading-elements {
    float: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}