/*
 * Right-to-left theme.
 *
 * DEF (UAT X4.1 / X4.2 / TR6.4): the portal could only render left-to-right. <html> now carries
 * dir from the request culture, and the theme, plugin and page stylesheets are loaded as their
 * rtlcss-generated .rtl.css builds (see Services/ThemeStylesheets.cs), which is what mirrors the
 * layout itself -- spacing utilities, cards, forms, menus, drawers, dropdowns, tables.
 *
 * This file is only the part a mechanical mirror cannot decide:
 *   1. a typeface that actually has Arabic glyphs (the theme ships Inter, which does not),
 *   2. the values that must NOT mirror, because they are not language.
 *
 * It is loaded in every direction and scoped to [dir="rtl"], so it is inert in English.
 */

/* ---------------------------------------------------------------------------
   1. Typography
   --------------------------------------------------------------------------- */

/*
 * Inter has no Arabic coverage, so Arabic text fell back to whatever the OS offered -- different
 * on every machine, and usually a face with no matching weights. IBM Plex Sans Arabic carries the
 * same weight range as the theme's Latin face, so headings and labels keep their hierarchy.
 * Inter is kept ahead of it for the Latin runs that stay in Arabic pages (codes, currency
 * symbols, brand names).
 */
[dir="rtl"] body,
[dir="rtl"] .menu,
[dir="rtl"] .btn,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] .modal,
[dir="rtl"] .dropdown-menu {
    font-family: Inter, "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/*
 * Arabic has no capital letters, so uppercasing does nothing to Arabic text but does mangle any
 * Latin run inside it. The theme uses it for small section labels.
 */
[dir="rtl"] .text-uppercase {
    text-transform: none;
}

/* Arabic glyphs sit lower and need more leading than Latin at the same size. */
[dir="rtl"] .fs-7,
[dir="rtl"] .fs-8,
[dir="rtl"] .badge {
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   2. Values that must not mirror
   ---------------------------------------------------------------------------
   Identifiers, codes, amounts and code samples are not language. Reversing them changes what
   they mean -- a tracking id read right-to-left is a different id, an IBAN is unusable, and
   "12.50" can render as "50.12". These stay left-to-right and are isolated from the surrounding
   Arabic so the bidi algorithm cannot reorder them against neighbouring punctuation.
   --------------------------------------------------------------------------- */

[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] .text-ltr,
[dir="rtl"] .font-monospace,
[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"] input[type="datetime-local"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* Money columns: keep the digits left-to-right, but let the column stay where the table put it. */
[dir="rtl"] .text-ltr-inline {
    direction: ltr;
    unicode-bidi: isolate;
}

/*
 * Amounts line up on the decimal point, which only works if the column is edge-aligned the same
 * way for every row. rtlcss turned .text-end into text-align:left, which is what we want for
 * numbers in a right-to-left table, so nothing is overridden here -- this rule only isolates the
 * digits so a trailing currency code does not jump to the other side of the number.
 */
[dir="rtl"] td.text-end,
[dir="rtl"] th.text-end {
    unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   3. Controls whose glyph carries the direction
   --------------------------------------------------------------------------- */

/*
 * Chevrons and carets point the way navigation moves, so they mirror with the layout. Icon fonts
 * draw them as glyphs, which rtlcss cannot flip -- it only rewrites CSS box properties.
 */
[dir="rtl"] .menu-arrow,
[dir="rtl"] .accordion-button::after,
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before,
[dir="rtl"] .pagination .page-link i,
[dir="rtl"] .btn .la-arrow-right,
[dir="rtl"] .btn .la-arrow-left,
[dir="rtl"] .btn .bi-arrow-right,
[dir="rtl"] .btn .bi-arrow-left,
[dir="rtl"] .btn .ki-arrow-right,
[dir="rtl"] .btn .ki-arrow-left {
    transform: scaleX(-1);
}

/*
 * A progress bar fills from the reading edge. The track is mirrored by the .rtl build; the fill
 * has to start from the right or it grows away from its own label.
 */
[dir="rtl"] .progress-bar {
    float: right;
}

/* ---------------------------------------------------------------------------
   4. Third-party widgets rendered into the page by script
   ---------------------------------------------------------------------------
   These are built in the DOM at runtime from their own markup, after the stylesheets are
   resolved, so they need the direction restating.
   --------------------------------------------------------------------------- */

[dir="rtl"] .dataTables_wrapper,
[dir="rtl"] .dataTables_filter,
[dir="rtl"] .dataTables_length,
[dir="rtl"] .dataTables_info,
[dir="rtl"] .dataTables_paginate {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .dataTables_paginate .pagination {
    justify-content: flex-start;
}

[dir="rtl"] .select2-container,
[dir="rtl"] .select2-dropdown,
[dir="rtl"] .select2-results__option {
    direction: rtl;
    text-align: right;
}

/* Chart canvases draw in their own coordinate space and must never be mirrored. */
[dir="rtl"] canvas,
[dir="rtl"] .apexcharts-canvas,
[dir="rtl"] [data-kt-chart] {
    direction: ltr;
}