/* Default (LTR) layout */ .sidebar { left: 0; } @media (min-width: 1200px) { #main, #footer { margin-left: 300px; } } .sidebar-nav .nav-link i { margin-right: 10px !important; } .header-nav.ms-auto { margin-left: auto; margin-right: 0; } .header-nav > ul.d-flex.align-items-center { padding-right: 25px; margin-left: 10px; gap: 40px; } option, select, .swal2-title { text-align: center; } @media (max-width: 1199px) { .sidebar { left: -300px; } } @media (max-width: 1199px) { .toggle-sidebar .sidebar { left: 0 !important; } } @media (max-width: 992px) { .col-md-3 .btn, .col-md-2 .btn { margin-left: 73px !important; } } /* RTL layout overrides, active when has the "rtl" class. Ported from pt-crm_v2: every font-family rule below is meant to list 'Inter' before var(--rtl-font) once Inter is self-hosted here too (see pt-crm_v2's app.js @fontsource/inter imports — not yet added to this project's app.js/package.json, so 'Inter' currently just falls through to the RTL font, same as before). Inter has no Arabic/Farsi glyphs, so the browser's own per-character font fallback renders Latin text (English words, numbers) in Inter and only falls through to the RTL font for actual Arabic/Farsi characters within the same element — no need to special-case mixed-language strings. */ body.rtl { --rtl-font: 'Cairo'; } body.rtl.font-fa { --rtl-font: 'Vazirmatn'; } body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6, body.rtl span, body.rtl a, body.rtl p, body.rtl input, body.rtl button, body.rtl Link, body.rtl ul, body.rtl li, body.rtl label, body.rtl .alert, body.rtl .text-red-600, body.rtl th, body.rtl td { font-family: 'Inter', var(--rtl-font) !important; text-align: right !important; direction: ltr; } /* The rule above forces direction:ltr on every span/p (so icon-first layouts don't flip), but that breaks trailing punctuation on plain RTL prose - the final "." lands at the start of the line instead of the end. Give plain sentence text its true rtl direction back. */ body.rtl .informations-note { direction: rtl; } body.rtl option, body.rtl select, body.rtl .swal2-title { font-family: 'Inter', var(--rtl-font) !important; text-align: center; } body.rtl .online-users .dropdown-header { font-family: 'Inter', var(--rtl-font) !important; text-align: center !important; } body.rtl table, body.rtl .row { direction: rtl; } body.rtl .roles_permissions { direction: ltr; } body.rtl .swal2-html-container, body.rtl .swal2-title { font-family: 'Inter', var(--rtl-font) !important; text-align: center !important; } /* Sidebar is anchored to the right in RTL. Desktop shows it by default and hides it off-canvas to the right when collapsed; mobile is the reverse (hidden by default, shown when toggled) — mirroring the LTR .sidebar rules in style.css. Both left and right must be resolved (never both left at a specific value) or the fixed-position sidebar stretches to fill the gap between them instead of sliding. */ @media (min-width: 1200px) { body.rtl .sidebar { right: 0; left: auto; } body.rtl.toggle-sidebar .sidebar { right: -300px !important; left: auto !important; } } @media (max-width: 1199px) { body.rtl .sidebar { right: -300px; left: auto; } body.rtl.toggle-sidebar .sidebar { right: 0 !important; left: auto !important; } } body.rtl .noData, body.rtl .dash-content .columns-titles { font-family: 'Inter', var(--rtl-font) !important; } body.rtl .sm-txt { direction: rtl; } body.rtl .dash-content .client-row p { display: flex; direction: rtl; } body.rtl .dash-content .client-row p i { margin-right: 0; margin-left: 6px; } /* Mirror the modal header for RTL locales only — title on the right, close button on the far left. Applying this unconditionally (as before) flipped every modal's header in LTR locales too. */ body.rtl .modal-header { flex-direction: row-reverse; } body.rtl .dropdown-menu { text-align: center; } body.rtl .dropdown-item { justify-content: center; } body.rtl .note.index-note .box-heading { flex-direction: row-reverse; } body.rtl .note_div_b p, body.rtl .wb-ele-note p { text-align: left !important; direction: ltr; } body.rtl .note_div_a { border-right: none; border-left: 2px solid #cdcdcd; } body.rtl .header-nav .profile .dropdown-item i { margin-left: 10px !important; } @media (min-width: 1200px) { body.rtl #main, body.rtl #footer { margin-right: 300px; margin-left: 0; } body.rtl.toggle-sidebar #main, body.rtl.toggle-sidebar #footer { margin-right: 0; } } body.rtl .sidebar-nav .nav-link i { margin-left: 10px !important; } body.rtl .sidebar-nav .nav-link { flex-direction: row-reverse; } body.rtl .sidebar-nav .nav-link .bi-chevron-down { position: absolute; left: 20px; } body.rtl .logo img { margin-left: 25px; margin-right: 25px; } body.rtl .d-flex { flex-direction: row-reverse; } body.rtl .btn.btn-primary.ms-auto { margin-left: 0 !important; margin-right: auto !important; } body.rtl .dropdown-toggle { margin-right: 15px; } body.rtl .card-title { text-align: right; } body.rtl .dashboard .info-card h6 { margin-right: 15px; } body.rtl .sidebar-nav .nav-content { margin: 0 15px; } body.rtl .sidebar-nav .nav-content a { flex-direction: row-reverse; } body.rtl .sidebar-nav .nav-content a i { margin-left: 8px !important; } @media (max-width: 992px) { body.rtl .col-md-3 .btn, body.rtl .col-md-2 .btn { margin-right: 65px !important; } } body.rtl .pagetitle { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; flex-wrap: wrap; } body.rtl .pagetitle .breadcrumb { font-size: 12px; } body.rtl .dropdown-item.d-flex.align-items-center { flex-direction: row; } body.rtl .header.d-flex.align-items-center { flex-direction: row-reverse; } body.rtl .header { padding-right: 20px; } body.rtl .d-flex.align-items-center.justify-content-between { flex-direction: row; } body.rtl .header-nav.ms-auto { margin-left: 0 !important; margin-right: auto !important; } body.rtl .header-nav > ul.d-flex.align-items-center { padding-left: 10px; padding-right: 0; } body.rtl .header-actions { justify-content: flex-start; } body.rtl .toolbar-filters { direction: rtl; } body.rtl .radioBtnDiv { flex-direction: row-reverse; } body.rtl .client-num { flex-direction: row-reverse; } body.rtl .btn.btn_primary.md_btn { display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 6px; } body.rtl .btn-close { margin-left: 0 !important; margin-right: auto !important; }