/* ==========================================================================
   Navix CRM — RTL (Right-to-Left) override layer
   Loaded only when the active language is an RTL language (see appIsRtl()).
   Sits AFTER the theme stylesheet so it can override LTR defaults.
   Bootstrap 4 (used here) is not RTL-native, so this mirrors the common
   layout primitives: text alignment, floats, sidebar/content, spacing,
   dropdowns, form controls and a few app-specific components.
   ========================================================================== */

/* ---- Arabic font (Cairo) --------------------------------------------- */
/* Applied app-wide in RTL mode; keeps icon fonts untouched via the
   :not() guards so Navix/Phosphor/Line/Weather glyphs still render. */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] .btn,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .card-title,
html[dir="rtl"] .sidebar-nav,
html[dir="rtl"] .navbar,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] label,
html[dir="rtl"] table,
html[dir="rtl"] p, html[dir="rtl"] span:not([class*="icon"]):not([class*="ti-"]):not([class*="sl-"]):not([class*="wi-"]),
html[dir="rtl"] a:not([class*="icon"]) {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
}
/* Note: icon <i> elements are intentionally NOT targeted above, so their
   own icon-font family (themify/phosphor/lineicons/weather) keeps rendering. */

/* ---- Base direction -------------------------------------------------- */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body {
    unicode-bidi: embed;
}

/* Keep code / numeric / ltr-forced bits readable */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] kbd,
html[dir="rtl"] .ltr,
html[dir="rtl"] [dir="ltr"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: bidi-override;
}

/* ---- Bootstrap float utilities --------------------------------------- */
html[dir="rtl"] .float-left  { float: right !important; }
html[dir="rtl"] .float-right { float: left  !important; }
html[dir="rtl"] .text-left   { text-align: right !important; }
html[dir="rtl"] .text-right  { text-align: left  !important; }

/* ---- Bootstrap margin/padding helpers (mirror l <-> r) --------------- */
html[dir="rtl"] .ml-auto { margin-left: unset !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: unset !important; margin-left: auto !important; }

html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem  !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem   !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem   !important; }
html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; }
html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem  !important; }
html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem   !important; }
html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }
html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem   !important; }

html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem  !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem   !important; }
html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem   !important; }
html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem  !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem   !important; }
html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem   !important; }

/* ---- Grid / list resets --------------------------------------------- */
html[dir="rtl"] ul,
html[dir="rtl"] ol,
html[dir="rtl"] dl { padding-right: 0; }

/* ---- Sidebar / left menu (accurate mirror of the theme's LTR layout) -
   Theme: .left-sidebar is 200px pinned left; .page-wrapper clears it with
   margin-left at these breakpoints: 210px (>=1024), 70px (<=1023),
   75px (.mini-sidebar >=768), 230px (.settings >=1024).
   RTL pins the sidebar right and moves those offsets to margin-right. ----- */
html[dir="rtl"] .left-sidebar {
    right: 0;
    left: auto;
    border-right: none;
    border-left: 1px solid #eae7e7;
}

/* neutralise every LTR left-margin on the content, then mirror to the right */
html[dir="rtl"] .page-wrapper { margin-left: 0 !important; }

@media (min-width: 1024px) {
    html[dir="rtl"] .page-wrapper { margin-right: 210px; }
    html[dir="rtl"] .settings .page-wrapper { margin-right: 230px; }
}
@media (max-width: 1023px) {
    html[dir="rtl"] .page-wrapper { margin-right: 70px; }
}
@media (min-width: 768px) {
    html[dir="rtl"] .mini-sidebar .page-wrapper { margin-right: 75px; }
}

/* sidebar link icon spacing (icon sits on the right in RTL) */
html[dir="rtl"] .sidebar-nav ul .sidebar-item .sidebar-link i {
    margin-right: 0;
    margin-left: 10px;
}
/* collapsible submenu caret points the other way */
html[dir="rtl"] .sidebar-nav .has-arrow::after {
    right: auto;
    left: 15px;
}

/* ---- Top navbar ------------------------------------------------------ */
html[dir="rtl"] .navbar-nav { padding-right: 0; }
html[dir="rtl"] .topbar .top-navbar .navbar-collapse { margin-right: auto; margin-left: 0; }

/* ---- Dropdowns ------------------------------------------------------- */
html[dir="rtl"] .dropdown-menu { text-align: right; left: auto; right: 0; }
html[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; }
html[dir="rtl"] .dropdown-toggle::after { margin-right: .255em; margin-left: 0; }

/* ---- Input groups / forms ------------------------------------------- */
html[dir="rtl"] .input-group > .form-control:not(:last-child),
html[dir="rtl"] .input-group > .custom-select:not(:last-child) {
    border-radius: 0 .25rem .25rem 0;
}
html[dir="rtl"] .input-group-prepend { margin-right: 0; margin-left: -1px; }
html[dir="rtl"] .input-group-append  { margin-left: 0;  margin-right: -1px; }
html[dir="rtl"] .custom-control { padding-right: 1.5rem; padding-left: 0; }
html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after { right: 0; left: auto; }
html[dir="rtl"] label { text-align: right; }
html[dir="rtl"] select.form-control { background-position: left .5rem center; }

/* ---- Tables ---------------------------------------------------------- */
html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; }
html[dir="rtl"] .table th:first-child,
html[dir="rtl"] .table td:first-child { padding-right: .75rem; }

/* ---- Modals / close button ------------------------------------------ */
html[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; }
html[dir="rtl"] .close { float: left; }

/* ---- List groups, media, badges ------------------------------------- */
html[dir="rtl"] .list-group { padding-right: 0; }
html[dir="rtl"] .media-body { text-align: right; }
html[dir="rtl"] .badge { margin-right: 0; margin-left: .25rem; }

/* ---- Buttons with icons --------------------------------------------- */
html[dir="rtl"] .btn i.mr-1,
html[dir="rtl"] .btn i.mr-2 { margin-right: 0 !important; margin-left: .35rem !important; }

/* ---- Select2 (used across the app) ---------------------------------- */
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto; left: 3px;
}
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 8px; padding-left: 20px; text-align: right;
}
html[dir="rtl"] .select2-container .select2-search--dropdown .select2-search__field { direction: rtl; text-align: right; }

/* ---- Breadcrumbs / pagination --------------------------------------- */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: .5rem; padding-left: 0; }
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-right: 0; padding-left: .5rem; float: right; }
html[dir="rtl"] .pagination { padding-right: 0; }

/* ---- Cards / panels header actions ---------------------------------- */
html[dir="rtl"] .card-actions { float: left; }

/* ---- Timeline / activity (common in CRM dashboards) ----------------- */
html[dir="rtl"] .timeline .timeline-item { padding-right: 40px; padding-left: 0; }