/* =========================================================================
   RTL layer — loaded only when the active locale is right-to-left.
   Bootstrap is already swapped for bootstrap.rtl.min.css and the template
   stylesheets for their rtlcss-generated .rtl.css twins, so this file only
   carries what those two cannot do:
     1. an Arabic typeface (self-hosted, no external font request)
     2. glyph/icon direction, which is semantic and not mechanically flippable
     3. numerals, punctuation and mixed LTR content inside Arabic text
   ========================================================================= */

/* ---------- 1. Typeface ------------------------------------------------- */

@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/cairo/cairo-arabic-400-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/cairo/cairo-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cairo/cairo-arabic-500-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cairo/cairo-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cairo/cairo-arabic-600-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cairo/cairo-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/cairo/cairo-arabic-700-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/cairo/cairo-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/cairo/cairo-arabic-800-normal.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: "Cairo";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/cairo/cairo-latin-800-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Both stylesheets route every rule through these two variables, so
   overriding them re-types the whole UI without touching a single selector. */
:root {
    --body-font: "Cairo", "Segoe UI", system-ui, sans-serif;
    --heading-font: "Cairo", "Segoe UI", system-ui, sans-serif;
}

body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
.table,
.modal,
.dropdown-menu,
.select2-container {
    font-family: var(--body-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--heading-font);
}

/* Arabic glyphs sit lower and denser than Latin ones; without this the copy
   looks cramped at the template's original Latin line-heights. */
body {
    line-height: 1.9;
    letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.6;
    letter-spacing: 0;
}
.btn,
.badge,
.nav-link {
    letter-spacing: 0;
}

/* ---------- 2. Icons and glyphs ---------------------------------------- */

/* Directional arrows/chevrons carry meaning ("next", "back"), so their
   glyph has to point the other way in RTL. Purely decorative icons
   (search, user, cart…) must NOT be touched, hence the explicit list. */
[dir="rtl"] .la-arrow-right,
[dir="rtl"] .la-arrow-left,
[dir="rtl"] .la-long-arrow-alt-right,
[dir="rtl"] .la-long-arrow-alt-left,
[dir="rtl"] .la-angle-right,
[dir="rtl"] .la-angle-left,
[dir="rtl"] .la-angle-double-right,
[dir="rtl"] .la-angle-double-left,
[dir="rtl"] .la-chevron-right,
[dir="rtl"] .la-chevron-left,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-double-right,
[dir="rtl"] .fa-angle-double-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .la-caret-right,
[dir="rtl"] .la-caret-left,
[dir="rtl"] .fa-sign-out-alt,
[dir="rtl"] .la-sign-out-alt,
[dir="rtl"] .fa-sign-in-alt,
[dir="rtl"] .la-sign-in-alt,
[dir="rtl"] .fa-reply,
[dir="rtl"] .la-reply,
[dir="rtl"] .fa-share,
[dir="rtl"] .la-share {
    transform: scaleX(-1);
    display: inline-block;
}

/* Bootstrap draws the accordion/dropdown caret with a background SVG; the
   RTL build already mirrors placement but not the arrow itself. */
[dir="rtl"] .accordion-button::after {
    margin-right: auto;
    margin-left: 0;
}

/* Breadcrumb dividers point the wrong way once the row is mirrored. */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    transform: scaleX(-1);
    display: inline-block;
}

/* ---------- 3. Numerals, punctuation and mixed content ------------------ */

/* Latin/Arabic-Indic digits inside an RTL paragraph get reordered by the
   bidi algorithm when they sit next to punctuation ("2026 ,15" instead of
   "15, 2026"). Isolating numeric and LTR-by-nature fields fixes the order
   without changing the characters. */
[dir="rtl"] .amount,
[dir="rtl"] .price,
[dir="rtl"] .currency,
[dir="rtl"] time,
[dir="rtl"] .date,
[dir="rtl"] .badge--num,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .text-ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* Phone/email/reference columns in the admin tables are Latin data sitting
   in an RTL cell — isolate so the sign and the digits stay together. */
[dir="rtl"] table td .text-muted[dir="ltr"],
[dir="rtl"] .table .text-ltr {
    unicode-bidi: isolate;
}

/* Tables: rtlcss mirrors padding, but text-align on cells is set inline in
   several partials, so anchor the default to the reading direction. */
[dir="rtl"] .table th,
[dir="rtl"] .table td {
    text-align: right;
}
[dir="rtl"] .table th.text-end,
[dir="rtl"] .table td.text-end {
    text-align: left;
}

/* ---------- 4. Layout details rtlcss cannot infer ----------------------- */

/* Off-canvas menus/sidebars are moved with translate() in main.js, so the
   sign has to flip or the panel slides in from the wrong edge. */
[dir="rtl"] .sidebar,
[dir="rtl"] .navbar-collapse.show,
[dir="rtl"] .main-sidebar {
    transform: none;
}

/* Inputs with a leading icon: the icon is absolutely positioned and already
   mirrored, but the text needs the matching padding on the other side. */
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] textarea {
    text-align: right;
}
[dir="rtl"] .form-select {
    background-position: left 0.75rem center;
    padding-right: 0.75rem;
    padding-left: 2.25rem;
}

/* select2 ships LTR-only markup. */
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    text-align: right;
    padding-right: 8px;
    padding-left: 20px;
}
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 3px;
}
[dir="rtl"] .select2-results__option,
[dir="rtl"] .select2-search__field {
    text-align: right;
    direction: rtl;
}

/* iziToast notifications render outside the layout root. */
[dir="rtl"] .iziToast > .iziToast-body {
    text-align: right;
    direction: rtl;
    padding-right: 54px;
    padding-left: 44px;
}
[dir="rtl"] .iziToast > .iziToast-body .iziToast-icon {
    right: 12px;
    left: auto;
}
[dir="rtl"] .iziToast .iziToast-close {
    left: 0;
    right: auto;
}

/* flatpickr calendar. */
[dir="rtl"] .flatpickr-calendar {
    direction: rtl;
}
[dir="rtl"] .flatpickr-days,
[dir="rtl"] .dayContainer {
    direction: ltr;
}

/* Summernote editor writes user content — content must be RTL too. */
[dir="rtl"] .note-editable {
    direction: rtl;
    text-align: right;
}

/* Slick carousels compute positions in JS from the LTR box model; forcing the
   track back to LTR keeps slide order correct while the slide content stays RTL. */
[dir="rtl"] .slick-track {
    direction: ltr;
}
[dir="rtl"] .slick-slide {
    direction: rtl;
    float: right;
}

/* Progress bars fill from the start edge. */
[dir="rtl"] .progress-bar {
    float: right;
}