/* =========================================================================
   Direction layer (shared)
   =========================================================================
   Loaded for every locale. Holds the direction agnostic implementation:
   logical properties, bidi isolation helpers and the language switcher.

   Rules that are genuinely specific to right to left reading live in
   rtl.css and are scoped to [dir="rtl"], so there is one shared UI plus a
   thin per direction adjustment layer instead of two CSS applications.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] .metismenu,
[dir="rtl"] .btn,
[dir="rtl"] .form-control,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: "Cairo", "Lato", "Poppins", "Segoe UI", Tahoma, sans-serif;
}

/* -------------------------------------------------------------------------
   Logical spacing helpers
   Prefer these in markup over the physical Bootstrap margin utilities: they
   follow the reading direction automatically and need no RTL override.
   ------------------------------------------------------------------------- */
.icon-inline-end {
    margin-inline-end: .35rem;
}

.icon-inline-start {
    margin-inline-start: .35rem;
}

.mis-1 { margin-inline-start: .25rem; }
.mis-2 { margin-inline-start: .5rem; }
.mis-3 { margin-inline-start: 1rem; }
.mie-1 { margin-inline-end: .25rem; }
.mie-2 { margin-inline-end: .5rem; }
.mie-3 { margin-inline-end: 1rem; }
.pis-2 { padding-inline-start: .5rem; }
.pie-2 { padding-inline-end: .5rem; }

.text-start { text-align: start; }
.text-end { text-align: end; }

/* -------------------------------------------------------------------------
   Bidi isolation
   Codes, identifiers, emails, phone numbers, times and currency amounts stay
   readable inside Arabic sentences instead of being reordered by the bidi
   algorithm. Data itself is never converted.
   ------------------------------------------------------------------------- */
.ltr-value,
.cell-code,
.cell-numeric,
.cell-datetime,
.cell-phone,
.cell-email,
code,
kbd,
samp {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* Table cells that hold numbers keep a stable alignment in both directions. */
td.cell-numeric,
th.cell-numeric {
    text-align: start;
}

/* -------------------------------------------------------------------------
   Tables
   Long Arabic labels must wrap instead of stretching the layout.
   ------------------------------------------------------------------------- */
.table td,
.table th {
    overflow-wrap: break-word;
    word-break: break-word;
}

.table .actions-column,
.table .action-column {
    text-align: end;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.form-group,
.form-group label,
.custom-control-label {
    text-align: start;
}

.form-text,
.invalid-feedback,
.help-block {
    text-align: start;
}

/* Bilingual field pairs: keep each input reading in its own language. */
input[lang="en"],
textarea[lang="en"] {
    direction: ltr;
    text-align: left;
}

input[lang="ar"],
textarea[lang="ar"] {
    direction: rtl;
    text-align: right;
}

/* -------------------------------------------------------------------------
   Directional icons
   Only icons that express a direction are mirrored. Icons that express a
   concept (edit, delete, settings, search, notification) never flip.
   ------------------------------------------------------------------------- */
[dir="rtl"] .icon-directional,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-double-left,
[dir="rtl"] .fa-angle-double-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-sign-out-alt,
[dir="rtl"] .fa-sign-in-alt,
[dir="rtl"] .fa-external-link-alt,
[dir="rtl"] .ti-arrow-left,
[dir="rtl"] .ti-arrow-right,
[dir="rtl"] .ti-angle-left,
[dir="rtl"] .ti-angle-right,
[dir="rtl"] .ti-back-left,
[dir="rtl"] .ti-back-right {
    transform: scaleX(-1);
}

/* Concept icons: explicitly protected from mirroring. */
[dir="rtl"] .icon-neutral,
[dir="rtl"] .fa-search,
[dir="rtl"] .fa-bell,
[dir="rtl"] .fa-cog,
[dir="rtl"] .fa-trash,
[dir="rtl"] .fa-check,
[dir="rtl"] .fa-times,
[dir="rtl"] .fa-globe,
[dir="rtl"] .fa-spinner {
    transform: none;
}

/* -------------------------------------------------------------------------
   Language switcher
   ------------------------------------------------------------------------- */
.language-switcher {
    display: inline-block;
    position: relative;
}

.language-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    padding: .25rem .35rem;
}

.language-switcher__toggle:hover,
.language-switcher__toggle:focus {
    text-decoration: none;
    opacity: .85;
}

.language-switcher__menu {
    min-width: 9rem;
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.language-switcher__menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.language-switcher__check {
    font-size: 11px;
}

.language-switcher--inline .language-switcher__item {
    display: inline-block;
    padding: .1rem .5rem;
    font-size: 14px;
}

.language-switcher--inline .language-switcher__item + .language-switcher__item {
    border-inline-start: 1px solid rgba(120, 130, 140, .35);
}

.language-switcher--inline .language-switcher__item.is-active {
    font-weight: 700;
}

.login-language-switcher {
    position: absolute;
    top: 18px;
    inset-inline-end: 24px;
    z-index: 20;
}

.header-language-switcher {
    display: inline-flex;
    align-items: center;
}