/*
 * Right-to-left for the offices panel.
 *
 * AdminLTE 3 sits on Bootstrap 4, which has no RTL build, so `direction: rtl`
 * alone flips the text and leaves the furniture where it was: the sidebar
 * still on the left, the content still pushed away from it, every `ml-`/`mr-`
 * utility now pointing the wrong way.
 *
 * What follows patches the pieces the panel actually uses. It is deliberately
 * scoped to Arabic — English keeps the layout it was designed with, and
 * nothing here can reach it.
 */

html[lang="ar"] {
    direction: rtl;
}

html[lang="ar"] body {
    text-align: right;
}

/* ---- The main frame: sidebar right, content beside it ---- */

html[lang="ar"] .main-sidebar {
    left: auto;
    right: 0;
}

html[lang="ar"] .content-wrapper,
html[lang="ar"] .main-header,
html[lang="ar"] .main-footer {
    /* AdminLTE sets these inside a media query, so the override has to
       out-rank it rather than merely come after it. */
    margin-left: 0 !important;
    margin-right: 250px !important;
}

/*
 * Collapsed sidebar keeps only the icon rail.
 *
 * Both margins have to be named. AdminLTE's own rule is
 * `.sidebar-mini.sidebar-collapse .content-wrapper { margin-left: 4.6rem !important }`,
 * which out-ranks the `margin-left: 0` set for the expanded state above — so
 * collapsing left a 4.6rem strip of dead space down the left of the page while
 * the content also pulled away from the sidebar on the right. Hence the
 * body.sidebar-mini.sidebar-collapse prefix: it has to beat that rule, not
 * merely follow it.
 */
html[lang="ar"] body.sidebar-mini.sidebar-collapse .content-wrapper,
html[lang="ar"] body.sidebar-mini.sidebar-collapse .main-header,
html[lang="ar"] body.sidebar-mini.sidebar-collapse .main-footer,
html[lang="ar"] .sidebar-collapse .content-wrapper,
html[lang="ar"] .sidebar-collapse .main-header,
html[lang="ar"] .sidebar-collapse .main-footer {
    margin-left: 0 !important;
    margin-right: 4.6rem !important;
}

/* The label that fades out as the rail narrows is pulled by a negative
   margin on the side it slides towards, which is the other one here. */
html[lang="ar"] body.sidebar-mini.sidebar-collapse .brand-text,
html[lang="ar"] body.sidebar-mini.sidebar-collapse .sidebar .nav-sidebar .nav-link p,
html[lang="ar"] body.sidebar-mini.sidebar-collapse .sidebar .user-panel > .info {
    margin-left: 0;
    margin-right: -10px;
}

/* Hovering the collapsed rail expands it back to full width; these two are
   floated/offset for LTR inside that expanded state. */
html[lang="ar"] body.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel {
    text-align: right;
}

html[lang="ar"] body.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .user-panel .image {
    float: right;
}

html[lang="ar"] body.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover .brand-image {
    margin-right: 0;
    margin-left: .5rem;
}

/*
 * A <ul> carries a 40px `padding-inline-start` from the browser's own default
 * stylesheet. Bootstrap cancels it with `.nav { padding-left: 0 }` — which is
 * the START edge only while the page reads left to right. Under `direction:
 * rtl` the start edge is the right one, so the 40px survived there and pushed
 * every sidebar item 40px past the edge of its container: harmless-looking
 * indentation at full width, but once the rail narrows to 4.6rem the icons sat
 * outside it and were clipped.
 */
html[lang="ar"] .nav {
    padding-right: 0;
}

/* On a phone the sidebar slides in from the right, off-screen when closed. */
@media (max-width: 991.98px) {
    html[lang="ar"] .main-sidebar {
        transform: translateX(250px);
    }

    html[lang="ar"] .sidebar-open .main-sidebar {
        transform: translateX(0);
    }

    html[lang="ar"] .content-wrapper,
    html[lang="ar"] .main-header,
    html[lang="ar"] .main-footer {
        margin-right: 0 !important;
    }
}

/* ---- Sidebar internals ---- */

html[lang="ar"] .nav-sidebar .nav-link p {
    margin-left: 0;
    margin-right: 0;
}

html[lang="ar"] .nav-sidebar .nav-icon {
    margin-right: 0;
    margin-left: .2rem;
}

html[lang="ar"] .nav-sidebar > .nav-item .nav-icon + p {
    margin-right: .5rem;
}

/* The chevron on an expandable item, and the badge, swap sides. */
html[lang="ar"] .nav-sidebar .nav-link p > .right,
html[lang="ar"] .nav-sidebar .nav-link p > .badge {
    right: auto;
    left: 1rem;
}

html[lang="ar"] .nav-sidebar .menu-open > .nav-link i.right {
    transform: rotate(-90deg);
}

html[lang="ar"] .nav-treeview {
    padding-left: 0;
    padding-right: 1rem;
}

/* The coloured accent strip these menus use sits on the leading edge. */
html[lang="ar"] .border-left {
    border-left: 0 !important;
    border-right: 3px solid !important;
}

html[lang="ar"] .brand-link .brand-image {
    margin-left: .5rem;
    margin-right: 0;
    float: right;
}

/* ---- Bootstrap utilities that hard-code a side ---- */

html[lang="ar"] .float-left {
    float: right !important;
}

html[lang="ar"] .float-right {
    float: left !important;
}

html[lang="ar"] .text-right {
    text-align: left !important;
}

html[lang="ar"] .text-left {
    text-align: right !important;
}

html[lang="ar"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[lang="ar"] .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

html[lang="ar"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[lang="ar"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
html[lang="ar"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[lang="ar"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[lang="ar"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
html[lang="ar"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }

html[lang="ar"] .dropdown-menu-right {
    right: auto !important;
    left: 0 !important;
}

html[lang="ar"] .input-group > .input-group-prepend > .btn {
    border-radius: 0 .25rem .25rem 0;
}

/* ---- Numbers, references and phone numbers stay left-to-right ---- */

/*
 * A negative amount in an RTL paragraph renders as "1,234-": the minus is a
 * neutral character, so it drifts to the end of the run. Money is written
 * left to right in every language on this panel, so the figures say so.
 * Alignment stays on the reading edge — only the digits are unflipped.
 */
html[lang="ar"] .small-box .inner h3,
html[lang="ar"] .kpi .v {
    direction: ltr;
    text-align: right;
}

html[lang="ar"] [dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* The card layout the panel falls back to on a phone: the label is on the
   leading edge, which is now the right one. */
html[lang="ar"] .table-stack td::before {
    float: right;
}