/*
 * 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. */
html[lang="ar"] .sidebar-collapse .content-wrapper,
html[lang="ar"] .sidebar-collapse .main-header,
html[lang="ar"] .sidebar-collapse .main-footer {
    margin-right: 4.6rem !important;
}

/* 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;
}