/*
 * WHMCS Twenty-One RTL Extension
 * Directional overrides for right-to-left languages (e.g. Persian/Arabic)
 * Loaded after the theme styles so the original theme remains upgrade-friendly.
 */

html,
body {
    direction: rtl;
}

body {
    text-align: right;
    font-family: Tahoma, Arial, "Noto Sans Arabic", "Noto Sans", sans-serif;
}

/* Bootstrap directional utilities */
.text-left { text-align: right !important; }
.text-right { text-align: left !important; }
.float-left { float: right !important; }
.float-right { float: left !important; }

.mr-auto { margin-right: 0 !important; margin-left: auto !important; }
.ml-auto { margin-left: 0 !important; margin-right: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
.mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }
.mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
.mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
.mr-5 { margin-right: 0 !important; margin-left: 3rem !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
.ml-2 { margin-left: 0 !important; margin-right: .5rem !important; }
.ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }
.ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
.ml-5 { margin-left: 0 !important; margin-right: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
.pr-2 { padding-right: 0 !important; padding-left: .5rem !important; }
.pr-3 { padding-right: 0 !important; padding-left: 1rem !important; }
.pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
.pr-5 { padding-right: 0 !important; padding-left: 3rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
.pl-2 { padding-left: 0 !important; padding-right: .5rem !important; }
.pl-3 { padding-left: 0 !important; padding-right: 1rem !important; }
.pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
.pl-5 { padding-left: 0 !important; padding-right: 3rem !important; }

/* Grid: Bootstrap's columns use left floats; mirror them for RTL layouts. */
.row > [class*="col-"],
.row > .col,
.row > .col-auto {
    float: right;
}

/* Navigation */
.navbar,
.navbar-nav,
.navbar .container,
.navbar .container-fluid {
    direction: rtl;
}

.navbar-brand {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

.navbar-nav .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

.dropdown-menu-right {
    right: auto !important;
    left: 0 !important;
}

.navbar-nav .dropdown-toggle::after {
    margin-right: .255em;
    margin-left: 0;
}

/* Main header / toolbar */
.header .topbar .d-flex,
.header .navbar .container,
.header .input-group,
.header .toolbar {
    direction: rtl;
}

.header .topbar .mr-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.header .topbar .ml-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

.header .search .input-group-prepend {
    order: 2;
}

.header .search .form-control {
    text-align: right;
}

/* Sidebar and primary content */
.sidebar {
    text-align: right;
}

.sidebar .list-group,
.sidebar .list-group-item,
.sidebar .panel,
.sidebar .panel-heading,
.sidebar .panel-body {
    text-align: right;
}

/* Breadcrumb */
.breadcrumb {
    direction: rtl;
}

.breadcrumb-item + .breadcrumb-item {
    padding-right: .5rem;
    padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
    padding-right: 0;
    padding-left: .5rem;
    content: "\\00a0/\\00a0";
}

/* Forms and input groups */
.form-control,
.custom-select,
select,
textarea,
input {
    direction: rtl;
    text-align: right;
}

.input-group-prepend {
    margin-right: 0;
    margin-left: -1px;
}

.input-group-append {
    margin-left: 0;
    margin-right: -1px;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
    border-radius: 0 .25rem .25rem 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
    border-radius: .25rem 0 0 .25rem;
}

/* Tables */
table,
.table {
    direction: rtl;
}

thead th,
.table th,
.table td {
    text-align: right;
}

/* Common directional borders */
.border-left { border-right: 1px solid #dee2e6 !important; border-left: 0 !important; }
.border-right { border-left: 1px solid #dee2e6 !important; border-right: 0 !important; }
.border-left-0 { border-right: 0 !important; border-left: initial !important; }
.border-right-0 { border-left: 0 !important; border-right: initial !important; }

/* Cards, panels and content */
.card,
.panel,
.modal-content,
.popover,
.alert,
.list-group,
.list-group-item {
    text-align: right;
}

/* Pagination */
.pagination {
    padding-right: 0;
}

/* Icons immediately preceding labels should keep a natural gap in RTL. */
.fa-fw,
.fas.fa-fw,
.far.fa-fw,
.fal.fa-fw,
.fad.fa-fw {
    margin-left: .15em;
}

/* Preserve code, URLs and technical strings as LTR where appropriate. */
pre,
code,
kbd,
samp,
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"] {
    direction: ltr;
}

pre,
code,
kbd,
samp {
    text-align: left;
}

/* Invoice / quote pages */
.invoice-container {
    direction: rtl;
    text-align: right;
}

.invoice-container .text-sm-left,
.invoice-container .text-left {
    text-align: right !important;
}

/* Modals / popovers */
.modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

/* Mobile navigation */
@media (max-width: 1199.98px) {
    .main-navbar-wrapper .navbar-nav {
        text-align: right;
    }

    .main-navbar-wrapper .navbar-nav .dropdown-menu {
        text-align: right;
    }
}

/* Avoid breaking elements explicitly marked as LTR. */
[dir="ltr"],
.ltr {
    direction: ltr !important;
    text-align: left;
}
