/*
 * RTL Layer - the layout Perfex does not ship.
 *
 * Every rule here is written under [dir="rtl"], and the file is only linked into a page that
 * is already right to left, so a staff member reading English never downloads it and nothing
 * in it can match. Switching a person back to left to right removes the file from their next
 * page; there is no state to unwind.
 *
 * It loads after app_compile_css()/compile_theme_css(), so it wins on source order over the
 * core stylesheets without having to out-specify them rule by rule.
 *
 * What Perfex already handles, and is deliberately NOT repeated here:
 *
 *   - Bootstrap 3 itself. assets/plugins/bootstrap-arabic is a fully mirrored build and is
 *     loaded in place of nothing - .pull-right, .text-right, .dropdown-menu, .input-group and
 *     the grid are already flipped there.
 *   - The admin chrome. assets/css/style.css carries around seventy hand written
 *     [dir="rtl"] rules for the sidebar, the toolbars, the task tables and the legacy
 *     .mleft and .mright helpers. The one gap is inside the sidebar menu items, see 8.
 *   - FullCalendar and TinyMCE, which read the isRTL flag in assets/js/main.js.
 *
 * What is left, and what this file is:
 *
 *   1. the Tailwind utility layer, which is physical (tw-ml-*, tw-pr-*, tw-space-x-*) and
 *      loads after the Arabic Bootstrap build, so it un-flips whatever that fixed;
 *   2. plugins with their own stylesheets - DataTables, bootstrap-select - and the Perfex
 *      form controls drawn with :before/:after;
 *   3. Latin runs inside Persian text, which the bidi algorithm reorders unless they are
 *      isolated;
 *   4. the customers area theme, whose own RTL coverage stops at a dozen rules;
 *   5. the inside of each sidebar menu item - icon, expand arrow and submenu indent.
 *
 * Section 1 is generated from the shipped Tailwind build by
 * modules/rtl_layer/tools/generate_utility_mirror.mjs, so it cannot drift from the utilities that actually
 * exist. Rebuild it after any change to assets/builds/tailwind.css.
 */

/* ------------------------------------------------------------------------------------- *
 * 1. Tailwind utility mirror (generated - see the note above before editing by hand)
 *
 * Each group is a low specificity reset wrapped in :where(), followed by the mirrored value
 * at normal specificity. That ordering is what lets an element carrying both tw-ml-3 and
 * tw-mr-2 keep both margins: every mirror outranks the reset, and the reset only survives on
 * the side no utility claimed.
 * ------------------------------------------------------------------------------------- */

[dir="rtl"] :where(.-tw-left-20, .-tw-left-9, .\[\&_select\]\:tw-left-auto select) { left: auto !important; }
[dir="rtl"] .-tw-left-20 { inset-inline-start: -5rem !important; }
[dir="rtl"] .-tw-left-9 { inset-inline-start: -2.25rem !important; }
[dir="rtl"] .\[\&_select\]\:tw-left-auto select { inset-inline-start: auto !important; }

[dir="rtl"] :where(.-tw-right-0, .-tw-right-0\.5, .-tw-right-1, .-tw-right-1\.5, .-tw-right-3, .\[\&_\.caret\]\:\!tw-right-1\.5 .caret, .tw-right-0, .tw-right-10) { right: auto !important; }
[dir="rtl"] .-tw-right-0 { inset-inline-end: 0 !important; }
[dir="rtl"] .-tw-right-0\.5 { inset-inline-end: -.125rem !important; }
[dir="rtl"] .-tw-right-1 { inset-inline-end: -.25rem !important; }
[dir="rtl"] .-tw-right-1\.5 { inset-inline-end: -.375rem !important; }
[dir="rtl"] .-tw-right-3 { inset-inline-end: -.75rem !important; }
[dir="rtl"] .tw-right-0 { inset-inline-end: 0 !important; }
[dir="rtl"] .tw-right-10 { inset-inline-end: 2.5rem !important; }
[dir="rtl"] .\[\&_\.caret\]\:\!tw-right-1\.5 .caret { inset-inline-end: .375rem !important; }

[dir="rtl"] :where(.-tw-ml-1, .-tw-ml-1\.5, .\!tw-ml-3, .tw-ml-0, .tw-ml-0\.5, .tw-ml-1, .tw-ml-1\.5, .tw-ml-2, .tw-ml-2\.5, .tw-ml-3, .tw-ml-4, .tw-ml-5, .tw-ml-6, .tw-ml-7, .tw-ml-9, .tw-ml-auto) { margin-left: 0 !important; }
[dir="rtl"] .\!tw-ml-3 { margin-inline-start: .75rem !important; }
[dir="rtl"] .-tw-ml-1 { margin-inline-start: -.25rem !important; }
[dir="rtl"] .-tw-ml-1\.5 { margin-inline-start: -.375rem !important; }
[dir="rtl"] .tw-ml-0 { margin-inline-start: 0 !important; }
[dir="rtl"] .tw-ml-0\.5 { margin-inline-start: .125rem !important; }
[dir="rtl"] .tw-ml-1 { margin-inline-start: .25rem !important; }
[dir="rtl"] .tw-ml-1\.5 { margin-inline-start: .375rem !important; }
[dir="rtl"] .tw-ml-2 { margin-inline-start: .5rem !important; }
[dir="rtl"] .tw-ml-2\.5 { margin-inline-start: .625rem !important; }
[dir="rtl"] .tw-ml-3 { margin-inline-start: .75rem !important; }
[dir="rtl"] .tw-ml-4 { margin-inline-start: 1rem !important; }
[dir="rtl"] .tw-ml-5 { margin-inline-start: 1.25rem !important; }
[dir="rtl"] .tw-ml-6 { margin-inline-start: 1.5rem !important; }
[dir="rtl"] .tw-ml-7 { margin-inline-start: 1.75rem !important; }
[dir="rtl"] .tw-ml-9 { margin-inline-start: 2.25rem !important; }
[dir="rtl"] .tw-ml-auto { margin-inline-start: auto !important; }

[dir="rtl"] :where(.-tw-mr-1, .-tw-mr-1\.5, .\[\&_\.btn\]\:tw-mr-0 .btn, .\[\&_\.caret\]\:\!tw-mr-px .caret, .\[\&_img\]\:tw-mr-3 img, .tw-mr-0, .tw-mr-0\.5, .tw-mr-1, .tw-mr-1\.5, .tw-mr-2, .tw-mr-2\.5, .tw-mr-3, .tw-mr-4) { margin-right: 0 !important; }
[dir="rtl"] .-tw-mr-1 { margin-inline-end: -.25rem !important; }
[dir="rtl"] .-tw-mr-1\.5 { margin-inline-end: -.375rem !important; }
[dir="rtl"] .tw-mr-0 { margin-inline-end: 0 !important; }
[dir="rtl"] .tw-mr-0\.5 { margin-inline-end: .125rem !important; }
[dir="rtl"] .tw-mr-1 { margin-inline-end: .25rem !important; }
[dir="rtl"] .tw-mr-1\.5 { margin-inline-end: .375rem !important; }
[dir="rtl"] .tw-mr-2 { margin-inline-end: .5rem !important; }
[dir="rtl"] .tw-mr-2\.5 { margin-inline-end: .625rem !important; }
[dir="rtl"] .tw-mr-3 { margin-inline-end: .75rem !important; }
[dir="rtl"] .tw-mr-4 { margin-inline-end: 1rem !important; }
[dir="rtl"] .\[\&_\.btn\]\:tw-mr-0 .btn { margin-inline-end: 0 !important; }
[dir="rtl"] .\[\&_\.caret\]\:\!tw-mr-px .caret { margin-inline-end: 1px !important; }
[dir="rtl"] .\[\&_img\]\:tw-mr-3 img { margin-inline-end: .75rem !important; }

[dir="rtl"] :where(.tw-border-l-0) { border-left-width: 0 !important; }
[dir="rtl"] .tw-border-l-0 { border-inline-start-width: 0 !important; }

[dir="rtl"] :where(.\!tw-pl-6, .tw-pl-2, .tw-pl-4, .tw-pl-8) { padding-left: 0 !important; }
[dir="rtl"] .\!tw-pl-6 { padding-inline-start: 1.5rem !important; }
[dir="rtl"] .tw-pl-2 { padding-inline-start: .5rem !important; }
[dir="rtl"] .tw-pl-4 { padding-inline-start: 1rem !important; }
[dir="rtl"] .tw-pl-8 { padding-inline-start: 2rem !important; }

[dir="rtl"] :where(.\[\&_button\]\:\!tw-pr-0 button, .tw-pr-10, .tw-pr-2, .tw-pr-2\.5) { padding-right: 0 !important; }
[dir="rtl"] .tw-pr-10 { padding-inline-end: 2.5rem !important; }
[dir="rtl"] .tw-pr-2 { padding-inline-end: .5rem !important; }
[dir="rtl"] .tw-pr-2\.5 { padding-inline-end: .625rem !important; }
[dir="rtl"] .\[\&_button\]\:\!tw-pr-0 button { padding-inline-end: 0 !important; }
@media (min-width:640px) {
    [dir="rtl"] :where(.sm\:tw-ml-1, .sm\:tw-ml-1\.5, .sm\:tw-ml-2) { margin-left: 0 !important; }
    [dir="rtl"] .sm\:tw-ml-1 { margin-inline-start: .25rem !important; }
    [dir="rtl"] .sm\:tw-ml-1\.5 { margin-inline-start: .375rem !important; }
    [dir="rtl"] .sm\:tw-ml-2 { margin-inline-start: .5rem !important; }

    [dir="rtl"] :where(.sm\:tw-mr-1, .sm\:tw-mr-1\.5, .sm\:tw-mr-2, .sm\:tw-mr-3) { margin-right: 0 !important; }
    [dir="rtl"] .sm\:tw-mr-1 { margin-inline-end: .25rem !important; }
    [dir="rtl"] .sm\:tw-mr-1\.5 { margin-inline-end: .375rem !important; }
    [dir="rtl"] .sm\:tw-mr-2 { margin-inline-end: .5rem !important; }
    [dir="rtl"] .sm\:tw-mr-3 { margin-inline-end: .75rem !important; }

    [dir="rtl"] :where(.sm\:tw-border-r, .sm\:tw-border-r-0) { border-right-width: 0 !important; }
    [dir="rtl"] .sm\:tw-border-r { border-inline-end-width: 1px !important; }
    [dir="rtl"] .sm\:tw-border-r-0 { border-inline-end-width: 0 !important; }
}
@media (min-width:768px) {
    [dir="rtl"] :where(.md\:tw-ml-6) { margin-left: 0 !important; }
    [dir="rtl"] .md\:tw-ml-6 { margin-inline-start: 1.5rem !important; }

    [dir="rtl"] :where(.md\:tw-border-r) { border-right-width: 0 !important; }
    [dir="rtl"] .md\:tw-border-r { border-inline-end-width: 1px !important; }
}
@media (min-width:1024px) {
    [dir="rtl"] :where(.lg\:last\:tw-border-r-0:last-child) { border-right-width: 0 !important; }
    [dir="rtl"] .lg\:last\:tw-border-r-0:last-child { border-inline-end-width: 0 !important; }
}
@media (min-width:1280px) {
    [dir="rtl"] :where(.xl\:tw-ml-3, .xl\:tw-ml-3\.5) { margin-left: 0 !important; }
    [dir="rtl"] .xl\:tw-ml-3 { margin-inline-start: .75rem !important; }
    [dir="rtl"] .xl\:tw-ml-3\.5 { margin-inline-start: .875rem !important; }

    [dir="rtl"] :where(.xl\:tw-border-l) { border-left-width: 0 !important; }
    [dir="rtl"] .xl\:tw-border-l { border-inline-start-width: 1px !important; }

    [dir="rtl"] :where(.xl\:tw-pl-3, .xl\:tw-pl-3\.5) { padding-left: 0 !important; }
    [dir="rtl"] .xl\:tw-pl-3 { padding-inline-start: .75rem !important; }
    [dir="rtl"] .xl\:tw-pl-3\.5 { padding-inline-start: .875rem !important; }

    [dir="rtl"] :where(.xl\:tw-pr-0) { padding-right: 0 !important; }
    [dir="rtl"] .xl\:tw-pr-0 { padding-inline-end: 0 !important; }
}
[dir="rtl"] .tw-text-left { text-align: right !important; }
[dir="rtl"] .tw-text-right { text-align: left !important; }
[dir="rtl"] .-tw-space-x-1>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .tw-space-x-0>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .tw-space-x-0\.5>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .tw-space-x-1>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .tw-space-x-1\.5>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .tw-space-x-2>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .tw-space-x-3>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
[dir="rtl"] .tw-space-x-4>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
@media (min-width:640px) {
    [dir="rtl"] .sm\:tw-space-x-1>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
    [dir="rtl"] .sm\:tw-space-x-1\.5>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
    [dir="rtl"] .sm\:tw-space-x-2>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
    [dir="rtl"] .sm\:tw-space-x-2\.5>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
    [dir="rtl"] .sm\:tw-space-x-3>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
    [dir="rtl"] .sm\:tw-space-x-4>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 1; }
}

/* ------------------------------------------------------------------------------------- *
 * 2. DataTables
 *
 * DataTables ships its own stylesheet, so the Arabic Bootstrap build never sees it. The
 * search box, the pager and the sort arrow are all pinned to a physical side.
 * ------------------------------------------------------------------------------------- */

[dir="rtl"] div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_filter label,
[dir="rtl"] div.dataTables_wrapper div.dataTables_length label {
    text-align: right;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0;
    margin-right: .5em;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_paginate {
    text-align: left;
}

/*
 * The 30px is the room the sort arrow needs; 10px is the padding a plain th carries
 * (.table > thead > tr > th in the Tailwind build).
 */
[dir="rtl"] table.dataTable thead > tr > th.sorting,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc,
[dir="rtl"] table.dataTable thead > tr > td.sorting,
[dir="rtl"] table.dataTable thead > tr > td.sorting_asc,
[dir="rtl"] table.dataTable thead > tr > td.sorting_desc {
    padding-right: 10px;
    padding-left: 30px;
}

[dir="rtl"] table.dataTable thead .sorting:after,
[dir="rtl"] table.dataTable thead .sorting_asc:after,
[dir="rtl"] table.dataTable thead .sorting_desc:after,
[dir="rtl"] table.dataTable thead .sorting_asc_disabled:after,
[dir="rtl"] table.dataTable thead .sorting_desc_disabled:after {
    right: auto;
    left: 8px;
}

[dir="rtl"] table.dataTable.table-condensed .sorting:after,
[dir="rtl"] table.dataTable.table-condensed .sorting_asc:after,
[dir="rtl"] table.dataTable.table-condensed .sorting_desc:after {
    right: auto;
    left: 6px;
}

/*
 * The frame of a data table is drawn one side at a time in the Tailwind build: every header
 * cell carries the divider on its right, the first and last header cell carry the outer
 * border, the bulk select column carries a divider on its right, and a row with a status
 * colour carries a stripe pinned to the left of its first cell. All of those are physical
 * sides, so under RTL they land one column over. The first cell is now the right hand one, so
 * its outer border and the status stripe are drawn down the inside of the tick box column and
 * the table's real right edge is left bare - which reads as the tick boxes sitting outside the
 * table.
 */
[dir="rtl"] table.dataTable thead > tr > th:not(:last-child) {
    border-right-width: 0;
    border-left-width: 1px;
}

[dir="rtl"] .table.dataTable > thead:first-child > tr:first-child > th:first-child {
    border-left-width: 0;
    border-right-width: 1px;
}

[dir="rtl"] .table.dataTable > thead:first-child > tr:first-child > th:last-child {
    border-right-width: 0;
    border-left-width: 1px;
}

[dir="rtl"] table.dataTable:has(.mass_select_all_wrap) tbody > tr > td:first-child {
    border-right-width: 0;
    border-left-width: 1px;
}

/*
 * The stripe is an empty absolutely positioned box, so what paints is its borders. Only the
 * left one is declared; the right one keeps the 3px initial width and paints too, which is
 * why the stripe reads as a 4px band rather than a hairline. Both are left alone here and
 * only the side the box is pinned to changes, so the Persian side gets the same band.
 */
[dir="rtl"] table.dataTable tbody tr.has-border-left.row-border-danger td:first-child:before,
[dir="rtl"] table.dataTable tbody tr.has-border-left.row-border-info td:first-child:before,
[dir="rtl"] table.dataTable tbody tr.has-border-left.row-border-warning td:first-child:before {
    left: auto;
    right: 0;
}

/*
 * The tick box is drawn 20px off the side the wrapper is padded on, so the padding is what
 * decides where in the cell it lands. In a table that padding is written on the left - 13px
 * normally, 15px with a 5px negative margin in a table that carries a status stripe, which
 * pulls the box out over the stripe. Under RTL the left is the empty side of the wrapper, so
 * both have to move to the right for the box to sit the same distance inside the cell as it
 * does in LTR.
 */
[dir="rtl"] table.dataTable tbody tr:has(.checkbox) > td > .checkbox,
[dir="rtl"] table.dataTable thead:has(.checkbox) th > .checkbox {
    padding-left: 0;
    padding-right: 13px;
}

[dir="rtl"] table.dataTable tbody tr.has-border-left > td > .checkbox,
[dir="rtl"] table.dataTable:has(tr.has-border-left) thead th > .checkbox {
    margin-right: 0;
    margin-left: -5px;
    padding-left: 0;
    padding-right: 15px;
}

/* ------------------------------------------------------------------------------------- *
 * 3. Form controls Perfex draws itself
 *
 * The checkbox and radio boxes are :before/:after pseudo elements hung off the label by a
 * negative left margin, so they land in the 20px left padding of the .checkbox/.radio
 * wrapper. The Arabic Bootstrap build flips that padding, but the Tailwind build loads after
 * it and puts both the padding and the pseudo elements back on the left, which leaves the
 * wrapper padded on both sides and the boxes on the wrong one.
 * ------------------------------------------------------------------------------------- */

[dir="rtl"] .checkbox,
[dir="rtl"] .radio,
[dir="rtl"] .checkbox-inline,
[dir="rtl"] .radio-inline {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .checkbox-inline + .checkbox-inline,
[dir="rtl"] .radio-inline + .radio-inline {
    margin-left: 0;
    margin-right: 10px;
}

[dir="rtl"] .checkbox input[type="checkbox"],
[dir="rtl"] .radio input[type="radio"] {
    margin-left: 0;
    margin-right: -20px;
}

/*
 * The negative margin above belongs to an input Bootstrap has taken out of the flow. Inside a
 * .form-inline the input is put back in the flow, and Bootstrap zeroes the margin with it -
 * otherwise the 13px input is pulled 20px past the side it sits on and everything after it,
 * the label and the drawn box hanging off the label, moves with it. The rule above out
 * specifies that reset, so it has to be restated here.
 *
 * This is not a corner case: DataTables' wrapper is built with the class in it - see the dom
 * string in assets/js/main.js - so every tick box in every table on the admin side is an
 * in flow input, and the drawn box was landing outside the table's right edge.
 */
[dir="rtl"] .form-inline .checkbox input[type="checkbox"],
[dir="rtl"] .form-inline .radio input[type="radio"],
[dir="rtl"] .navbar-form .checkbox input[type="checkbox"],
[dir="rtl"] .navbar-form .radio input[type="radio"] {
    margin-right: 0;
}

[dir="rtl"] .checkbox label,
[dir="rtl"] .radio label {
    padding-left: 0;
    padding-right: 5px;
}

[dir="rtl"] .checkbox label:before,
[dir="rtl"] .checkbox label:after,
[dir="rtl"] .radio label:before {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: -20px;
}

/*
 * The radio dot is an 11px circle inside a 17px box, centred by a 3px inset. Mirroring only
 * the side it is pinned to leaves the dot flush against the border and reads as a lopsided
 * blob, so the inset has to be mirrored with it.
 */
[dir="rtl"] .radio label:after {
    left: auto;
    right: 3px;
    margin-left: 0;
    margin-right: -20px;
}

[dir="rtl"] .checkbox label:after {
    padding-left: 0;
    padding-right: 3px;
}

[dir="rtl"] .checkbox.checklist-checkbox label::before {
    margin-left: 0;
    margin-right: -21px;
}

[dir="rtl"] .checkbox.checklist-checkbox label::after {
    margin-left: 0;
    margin-right: -20px;
    padding-left: 0;
    padding-right: 4.5px;
}

/* ------------------------------------------------------------------------------------- *
 * 4. bootstrap-select
 *
 * Another plugin with its own stylesheet. The label floats left inside the button and the
 * caret is pinned 12px from the right edge.
 * ------------------------------------------------------------------------------------- */

[dir="rtl"] .bootstrap-select .dropdown-toggle .filter-option {
    float: right;
    text-align: right;
}

[dir="rtl"] .bootstrap-select .dropdown-toggle .caret {
    right: auto;
    left: 12px;
}

[dir="rtl"] .bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
    right: auto;
    left: 15px;
}

[dir="rtl"] .bootstrap-select.btn-group .dropdown-menu li a span.text {
    margin-right: 0;
}

/* ------------------------------------------------------------------------------------- *
 * 5. Kanban boards
 *
 * The drag handle is a background image at a fixed offset, and the card title reserves room
 * for it with a left padding.
 * ------------------------------------------------------------------------------------- */

[dir="rtl"] #kan-ban .panel-body .lead-name,
[dir="rtl"] #kan-ban .panel-body .task-name {
    background-position: right 10px top 10px;
    padding-left: 0;
    padding-right: 25px;
}

[dir="rtl"] #kan-ban .panel-body .lead-name {
    margin-left: 0;
    margin-right: -10px;
}

/* ------------------------------------------------------------------------------------- *
 * 6. Latin runs inside Persian text
 *
 * An e-mail address, a URL or an invoice number is a left to right run. Inside a right to
 * left paragraph the bidi algorithm keeps the characters in order but moves the punctuation
 * that ends the run to the wrong side, which is how "info@example.com." becomes
 * ".info@example.com". Isolating these fields fixes it without touching the surrounding text.
 * ------------------------------------------------------------------------------------- */

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"],
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] pre,
[dir="rtl"] samp,
[dir="rtl"] .tw-font-mono {
    direction: ltr;
    text-align: left;
}

/*
 * Money keeps the document direction - a Persian invoice reads its totals right to left -
 * but the amount itself must not be reordered around its currency symbol.
 */
[dir="rtl"] .no-mtop.bold,
[dir="rtl"] td .amount,
[dir="rtl"] .invoice-number,
[dir="rtl"] .estimate-number {
    unicode-bidi: isolate;
}

/* ------------------------------------------------------------------------------------- *
 * 7. Customers area theme
 *
 * assets/themes/perfex/css/style.css carries thirteen [dir="rtl"] rules of its own, which
 * covers the DataTables wrapper and little else. These are the rest of its direction
 * sensitive rules, mirrored.
 * ------------------------------------------------------------------------------------- */

[dir="rtl"] .col-xs-5ths,
[dir="rtl"] .col-sm-5ths,
[dir="rtl"] .col-md-5ths,
[dir="rtl"] .col-lg-5ths {
    float: right;
}

[dir="rtl"] .border-right {
    border-right: 0;
    border-left: 1px solid #f0f0f0;
}

[dir="rtl"] .submenu {
    float: left;
}

[dir="rtl"] .submenu li {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] .submenu li:last-child {
    margin-left: 0;
}

[dir="rtl"] .navbar-default .navbar-nav > li > a {
    margin-right: 0;
    margin-left: 3px;
}

[dir="rtl"] .navbar-default .navbar-nav > li > a i {
    margin-right: 0;
    margin-left: 5px;
}

[dir="rtl"] .navbar-default .navbar-nav > li:last-child > a {
    margin-left: 0;
}

[dir="rtl"] .navbar a.navbar-brand {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .navbar a.navbar-brand img {
    margin-left: 0;
    margin-right: 25px;
}

[dir="rtl"] .navbar-default .navbar-brand.logo-text {
    margin-left: 0;
    margin-right: 15px;
}

[dir="rtl"] .navbar-default .navbar-nav > li.customers-nav-item-login > a {
    margin-left: 0;
    margin-right: 15px;
}

[dir="rtl"] .table.items thead th {
    border-right: 0;
    border-left: 1px solid #e2e8f0;
}

[dir="rtl"] .table.items thead th:first-child {
    border-left: 0;
    border-right: 1px solid #e2e8f0;
}

[dir="rtl"] .table.proposal-items thead > tr > th {
    padding-left: 0;
    padding-right: 10px;
}

[dir="rtl"] .table.proposal-items tbody > tr > td,
[dir="rtl"] .table.proposal-items thead > tr > th {
    text-align: right;
}

[dir="rtl"] .task-attachment .open-in-external {
    right: auto;
    left: 30px;
}

[dir="rtl"] .jquery-comments .textarea-wrapper {
    padding-left: 0;
    padding-right: 21px;
}

[dir="rtl"] .team-members .media-body {
    padding-right: 0;
    padding-left: 10px;
}

[dir="rtl"] .project-file-image,
[dir="rtl"] .task-user {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .project-file-image {
    margin-left: 15px;
}

[dir="rtl"] .task-checklist-indicator i {
    margin-left: 0;
    margin-right: 3px;
}

[dir="rtl"] .activity-feed .feed-item {
    padding-left: 0;
    padding-right: 30px;
    border-left: 0;
    border-right: 2px solid #84c529;
}

[dir="rtl"] .activity-feed .feed-item:after {
    left: auto;
    right: -6px;
}

[dir="rtl"] .tc-content ul,
[dir="rtl"] .tc-content ol {
    margin-left: 0;
    margin-right: 15px;
}

[dir="rtl"] .has-feedback.has-feedback-left .form-control-feedback {
    left: auto;
    right: 0;
}

[dir="rtl"] .kb-search .form-control-feedback {
    left: auto !important;
    right: 6px !important;
}

[dir="rtl"] .kb-search input[type="search"] {
    padding-left: 0;
    padding-right: 45px;
}

[dir="rtl"] .custom-field-inline-edit-link {
    float: right;
    margin-right: 0;
    margin-left: 5px;
}

[dir="rtl"] .task-single-status .label {
    float: right;
}

[dir="rtl"] .gpicker + div[id^="dropbox-chooser"] {
    float: left;
    margin-left: 0;
    margin-right: 5px;
}

[dir="rtl"] .preview-sticky-header {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .kan-ban-col {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] .honey-element {
    left: auto;
    right: 0;
}

/* ------------------------------------------------------------------------------------- *
 * 8. Sidebar menu items
 *
 * style.css flips the sidebar itself to the right edge but not what sits inside each item:
 * the icon still floats left, so it ends up at the far end of the row away from its label,
 * and the expand arrow floats right, next to the label. These rules mirror the LTR row -
 * icon first, beside the label, and the arrow at the far end pointing back at it - for the
 * main menu and the setup menu, which share the .sidebar markup.
 * ------------------------------------------------------------------------------------- */

[dir="rtl"] .sidebar ul.nav li a i.menu-icon {
    float: right;
    margin-right: 0;
    margin-left: 14px;
}

[dir="rtl"] .sidebar ul.nav > li .nav-second-level a .menu-icon {
    margin-left: 5px;
}

/*
 * A submenu icon placed inside the 48px indent beside its label left Persian labels too
 * little room, so the longer ones wrapped and the icon sat flush against the text. The
 * negative margin hangs the icon back into the indent, in the same column as the top level
 * icons (13px padding + 1px border = 14px from the edge), and the 16px gap brings the label
 * back to the 48px every icon-less submenu item already starts at.
 */
[dir="rtl"] #side-menu > li .nav-second-level a .menu-icon {
    margin-right: -34px;
    margin-left: 16px;
}

/* The id selectors match the core [dir="rtl"] #side-menu .arrow rule they replace. */
[dir="rtl"] #side-menu .arrow,
[dir="rtl"] #setup-menu .arrow {
    float: left;
    margin-left: 0;
    padding-left: 0;
    padding-right: 5px;
}

[dir="rtl"] .sidebar .fa.arrow:before {
    content: "\f105";
}

[dir="rtl"] .sidebar .active > a > .fa.arrow:before {
    content: "\f107";
}

[dir="rtl"] .sidebar ul.nav li .nav-second-level li a {
    padding-left: 15px;
    padding-right: 48px;
}

[dir="rtl"] #setup-menu li .nav-second-level li a {
    padding-left: 10px;
    padding-right: 24px;
}

[dir="rtl"] #side-menu li .nav-second-level li > .badge,
[dir="rtl"] #setup-menu li .nav-second-level li > .badge {
    right: auto;
    left: 11px;
}