/* =====================================================================
   direction.css -- Al-Asasat, Phase 16
   ---------------------------------------------------------------------
   One place decides which side every control faces.

   The theme ships two full stylesheets, style.css and style-rtl.css, but
   style-rtl.css is only a partial mirror: it flips the theme's own floats
   and utilities and leaves every Bootstrap form component exactly as the
   left-to-right sheet has it. Roughly 1 300 of its 30 000 lines differ.
   So in Arabic the checkbox sat to the left of its label, the switch knob
   travelled the wrong way, and the close button stayed in the far corner.

   The select arrow is the plainest case: style-rtl.css leaves both of the
   theme's arrow implementations pinned to "right", so an Arabic page drew
   the chevron on the wrong side of every dropdown on every screen.

   Rather than patch a 645 KB vendor file we load this layer last and
   express the two directions explicitly: a control's chrome sits at the
   INLINE END -- the right in LTR, the left in RTL. Logical properties do
   that on their own; the declarations CSS has no logical form for
   (background-position, and the vendor pseudo-elements that hard-code
   left/right) are written out per direction.

   Nothing here is page-specific. Selectors that pair [dir] with a class
   always out-specify the theme, and this file is loaded after it, so the
   cascade alone is enough -- the only two forced declarations are the
   text-align utilities, which Bootstrap itself defines that way.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Native <select>
   ---------------------------------------------------------------------
   Two separate arrow implementations exist in the theme:
     .form-select                     -- Bootstrap 5's own
     select.form-control / .custom-select / .dataTable-selector / .dataTable-input
                                      -- the theme's override, a `background`
                                         shorthand, so only the position is
                                         restated here and the size survives.
   --------------------------------------------------------------------- */

[dir="ltr"] .form-select {
    background-position: right 1rem center;
}

[dir="rtl"] .form-select {
    background-position: left 1rem center;
}

[dir="ltr"] select.form-control,
[dir="ltr"] select.custom-select,
[dir="ltr"] select.dataTable-selector,
[dir="ltr"] select.dataTable-input {
    background-position: right 0.75rem center;
}

[dir="rtl"] select.form-control,
[dir="rtl"] select.custom-select,
[dir="rtl"] select.dataTable-selector,
[dir="rtl"] select.dataTable-input {
    background-position: left 0.75rem center;
}

/* Keep the label clear of the chevron. The theme padded both sides equally,
   so a long option name ran underneath the arrow in either direction. */
.form-select,
select.form-control,
select.custom-select,
select.dataTable-selector,
select.dataTable-input {
    padding-inline-end: 2.25rem;
    padding-inline-start: 1rem;
}

.form-select-sm,
select.form-control-sm {
    padding-inline-end: 1.85rem;
    padding-inline-start: 0.5rem;
}

/* A multi-line select has no arrow at all, so it needs no room for one. */
.form-select[multiple],
.form-select[size]:not([size="1"]),
select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
    padding-inline-end: 1rem;
}


/* ---------------------------------------------------------------------
   2. Choices.js
   ---------------------------------------------------------------------
   Choices sets dir="rtl" on its own container only when the element's
   computed direction DIFFERS from <html>'s (see _direction in
   choices.min.js). On a page that is RTL throughout they agree, so the
   container is left without the attribute and the vendor's own
   .choices[dir="rtl"]::after never matches. Anchoring on the ancestor
   instead makes it work in both cases, including a mixed-direction field.
   --------------------------------------------------------------------- */

[dir="ltr"] .choices[data-type*="select-one"]::after {
    right: 11.5px;
    left: auto;
}

[dir="rtl"] .choices[data-type*="select-one"]::after,
[dir="rtl"] .choices[data-type*="select-one"][dir="rtl"]::after {
    left: 11.5px;
    right: auto;
}

/* the little "x" that clears a single-select */
[dir="ltr"] .choices[data-type*="select-one"] .choices__button {
    right: 0;
    left: auto;
    margin-right: 25px;
    margin-left: 0;
}

[dir="rtl"] .choices[data-type*="select-one"] .choices__button {
    left: 0;
    right: auto;
    margin-left: 25px;
    margin-right: 0;
}

[dir="rtl"] .choices__list--single,
[dir="rtl"] .choices__list--multiple .choices__item,
[dir="rtl"] .choices__list--dropdown .choices__item {
    text-align: right;
}

.choices__inner {
    padding-inline-end: 24px;
}

[dir="rtl"] .choices__input {
    direction: rtl;
}


/* ---------------------------------------------------------------------
   3. Select2
   ---------------------------------------------------------------------
   Select2 is NOT bundled with this installation -- the classes and the
   data-toggle="select2" attributes left in the stock views are inert and
   those fields render as native selects, which section 1 covers. These
   rules are here so that the day someone does load it, the arrow and the
   clear cross are already on the correct side rather than becoming a new
   page-specific patch.
   --------------------------------------------------------------------- */

[dir="ltr"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 1px;
    left: auto;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-inline-start: 8px;
    padding-inline-end: 20px;
    text-align: right;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__clear {
    float: left;
}

[dir="rtl"] .select2-container--default .select2-search--dropdown .select2-search__field {
    direction: rtl;
    text-align: right;
}


/* ---------------------------------------------------------------------
   4. Bootstrap dropdowns, input groups and the rest of the chrome
   --------------------------------------------------------------------- */

.dropdown-toggle::after,
.dropup .dropdown-toggle::after,
.dropend .dropdown-toggle::after {
    margin-inline-start: 0.255em;
    margin-inline-end: 0;
}

.dropdown-toggle:empty::after {
    margin-inline-start: 0;
}

[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* the theme's own "..." action menus and card tool-bars */
[dir="rtl"] .dropdown-item {
    text-align: right;
}


/* ---------------------------------------------------------------------
   5. Tables, pagination and the simple-datatables chrome
   --------------------------------------------------------------------- */

[dir="rtl"] table.table > :not(caption) > * > *,
[dir="rtl"] .dataTable-table th,
[dir="rtl"] .dataTable-table td {
    text-align: right;
}

/* numeric and money columns stay readable: digits are LTR runs either way */
[dir="rtl"] .text-end {
    text-align: left !important;
}

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

[dir="rtl"] .dataTable-sorter::before,
[dir="rtl"] .dataTable-sorter::after {
    right: auto;
    left: 4px;
}

[dir="rtl"] .dataTable-top,
[dir="rtl"] .dataTable-bottom {
    direction: rtl;
}

[dir="rtl"] .pagination {
    padding-inline-start: 0;
}


/* ---------------------------------------------------------------------
   6. Forms, modals, alerts and toasts
   --------------------------------------------------------------------- */

/* style-rtl.css is only a partial mirror: it flips the theme's own floats and
   utilities but leaves every Bootstrap form component exactly as the LTR sheet
   has it, so in Arabic the checkbox sat to the left of its label and the switch
   knob travelled the wrong way. The measurements below are the theme's own. */
[dir="rtl"] .form-check {
    padding-inline-start: 1.75em;
    padding-inline-end: 0;
}

[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-inline-start: -1.75em;
    margin-inline-end: 0;
}

[dir="rtl"] .form-switch .form-check-input {
    margin-inline-start: -2.5em;
    margin-inline-end: 0;
}

[dir="rtl"] .form-switch .form-check-input {
    background-position: right center;
}

[dir="rtl"] .form-switch .form-check-input:checked {
    background-position: left center;
}

[dir="rtl"] .modal-header .btn-close {
    margin-inline-start: -0.5rem;
    margin-inline-end: auto;
}

[dir="rtl"] .alert-dismissible .btn-close,
[dir="rtl"] .toast .btn-close {
    right: auto;
    left: 0;
}

[dir="rtl"] .input-group > .input-group-text:first-child {
    border-radius: 0 6px 6px 0;
}

[dir="rtl"] .invalid-feedback,
[dir="rtl"] .valid-feedback,
[dir="rtl"] .form-text {
    text-align: right;
}

/* tooltips and popovers inherit the page direction so Arabic wraps correctly */
[dir="rtl"] .tooltip,
[dir="rtl"] .popover {
    direction: rtl;
    text-align: right;
}


/* ---------------------------------------------------------------------
   7. Date pickers
   ---------------------------------------------------------------------
   The calendar grid itself must stay left to right -- a week runs Sun..Sat
   in both languages and mirroring it would move the weekend. Only the
   popup's own anchoring follows the page.
   --------------------------------------------------------------------- */

.flatpickr-calendar,
.datepicker,
.datepicker-dropdown {
    direction: ltr;
    text-align: left;
}

[dir="rtl"] .flatpickr-calendar .flatpickr-months,
[dir="rtl"] .datepicker .datepicker-switch {
    direction: ltr;
}

/* the input keeps the page's direction; only its digits read LTR */
[dir="rtl"] input.flatpickr-input,
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="month"],
[dir="rtl"] input[type="time"] {
    text-align: right;
}


/* ---------------------------------------------------------------------
   8. Numbers, currency and identifiers
   ---------------------------------------------------------------------
   Arabic text is RTL but an IBAN, an invoice number or an amount is a
   left-to-right run. Marking the container isolate keeps a mixed line from
   reordering around punctuation.
   --------------------------------------------------------------------- */

[dir="rtl"] .text-ltr,
[dir="rtl"] .ltr-number {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}


/* ---------------------------------------------------------------------
   9. Print
   ---------------------------------------------------------------------
   The print templates carry their own dir on <html>, so they get the select
   rules above for free; what they also need is that a mirrored page does not
   spill a horizontal scrollbar into the printed sheet.
   --------------------------------------------------------------------- */

@media print {
    [dir="rtl"] body {
        direction: rtl;
    }

    html,
    body {
        overflow-x: hidden;
    }
}