/*
 * Right-to-left overrides.
 *
 * The theme underneath is Bootstrap 4, which has no RTL build, so this flips
 * what actually matters rather than mirroring every rule: reading direction,
 * the side the sidebar sits on, and the handful of paddings and floats that
 * would otherwise leave text hanging off the wrong edge.
 *
 * Only loaded when the page is in a right-to-left language, so nothing here
 * can affect the English side.
 *
 * Deliberately untouched: anything that is not directional. Icons that mean
 * "up" or "down", colours, and shadows read the same in both scripts, and
 * flipping them would be change for its own sake.
 */

[dir="rtl"] body {
    text-align: right;
    /* Latin faces have no Arabic glyphs; these do, and each falls back to the
       next so a mixed line does not lose its Latin words. */
    font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Amiri", sans-serif;
}

/* ---- the page frame ------------------------------------------------- */

[dir="rtl"] .page-content {
    display: flex;
    flex-direction: row;
    position: relative;
    overflow-x: hidden;
}

[dir="rtl"] .sidebar-main {
    order: 0;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    [dir="rtl"] .content-wrapper {
        order: 1;
        flex-grow: 1;
        min-width: 0;
        width: calc(100% - 16.875rem);
    }

    [dir="rtl"].sidebar-xs .content-wrapper {
        width: calc(100% - 3.5rem);
    }
}

@media (max-width: 767.98px) {
    [dir="rtl"] .content-wrapper {
        width: 100% !important;
        min-width: 0;
        order: 1;
    }
}

/* ---- navigation ----------------------------------------------------- */

[dir="rtl"] .nav-sidebar .nav-link { text-align: right; }
[dir="rtl"] .nav-sidebar .nav-link > i { margin-right: 0; margin-left: 1rem; }

[dir="rtl"] .nav-item-submenu > .nav-link:after {
    right: auto;
    left: 1.25rem;
    transform: rotate(180deg);
}

[dir="rtl"] .nav-group-sub .nav-link { padding-right: 3.25rem; padding-left: 1.25rem; }
[dir="rtl"] .nav-group-sub .nav-group-sub .nav-link { padding-right: 4.25rem; }

[dir="rtl"] .navbar-nav { padding-right: 0; }
[dir="rtl"] .navbar-brand { margin-right: 0; margin-left: 1rem; }

/* ---- text and tables ------------------------------------------------ */

[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .text-left { text-align: right !important; }

[dir="rtl"] .table th,
[dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .table th.text-center,
[dir="rtl"] .table td.text-center { text-align: center; }
[dir="rtl"] .table th.text-right,
[dir="rtl"] .table td.text-right { text-align: left; }

/* A code or a reference number is not Arabic and must not be reordered. */
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] pre,
[dir="rtl"] .ltr {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ---- forms ---------------------------------------------------------- */

[dir="rtl"] .form-control,
[dir="rtl"] .custom-select { text-align: right; }

/* Numbers stay left-to-right whatever the surrounding script. */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] .form-check { padding-right: 1.25rem; padding-left: 0; }
[dir="rtl"] .form-check-input { margin-right: -1.25rem; margin-left: 0; }
[dir="rtl"] .input-group > .form-control:not(:last-child) { border-radius: 0.25rem 0 0 0.25rem; }
[dir="rtl"] .input-group > .form-control:not(:first-child) { border-radius: 0 0.25rem 0.25rem 0; }

/* ---- spacing utilities ---------------------------------------------- */

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

[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }

[dir="rtl"] .float-right { float: left !important; }
[dir="rtl"] .float-left { float: right !important; }

/* ---- components ----------------------------------------------------- */

[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; }
[dir="rtl"] .dropdown-menu-left { left: auto; right: 0; }
[dir="rtl"] .dropdown-item > i { margin-right: 0; margin-left: .5rem; }

[dir="rtl"] .card-header .header-elements { margin-right: auto; margin-left: 0; }

[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: .5rem; padding-left: 0; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0;
    padding-left: .5rem;
    content: "\\";
}

[dir="rtl"] .close { float: left; }
[dir="rtl"] .alert-dismissible { padding-right: 1.25rem; padding-left: 3.8125rem; }
[dir="rtl"] .alert-dismissible .close { right: auto; left: 0; }

[dir="rtl"] .custom-control { padding-right: 1.5rem; padding-left: 0; }
[dir="rtl"] .custom-control-label::before,
[dir="rtl"] .custom-control-label::after { right: -1.5rem; left: auto; }

[dir="rtl"] .list-icons { margin-right: auto; }
[dir="rtl"] .media > .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }

/* DataTables puts its own controls on the wrong side once the page flips. */
[dir="rtl"] .dataTables_filter { float: left; }
[dir="rtl"] .dataTables_length { float: right; }
[dir="rtl"] .dataTables_paginate { float: left; }
[dir="rtl"] .dt-buttons { float: right; }