/* 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; } /* Advisor picker dropdowns (client list bucket assignment + the "Advisor" list filter) — centered like every other plain select's options above, including the role-group separators (see Clients/index.vue's groupByRole()) and the advisor names nested under them. */ select.wb-ele.allocated, .advisor-filter-select, select.wb-ele.allocated optgroup, .advisor-filter-select optgroup, select.wb-ele.allocated optgroup option, .advisor-filter-select optgroup option { 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. Every font-family rule below lists 'Inter' before var(--rtl-font): 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 div, body.rtl a, body.rtl p, body.rtl input, body.rtl textarea, 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 .text-muted, body.rtl th, body.rtl td { font-family: 'Inter', var(--rtl-font) !important; text-align: right !important; direction: ltr; } /* The block above forces text-align:right !important on .text-muted (and other tags), which — being higher specificity than Bootstrap's plain .text-center class — silently wins over an explicit .text-center on the same element (e.g. the header profile role byline). Give text-center back its priority. */ body.rtl .text-center { text-align: center !important; } /* Placeholder text doesn't reliably inherit font-family from its input/ textarea across browsers unless targeted explicitly via ::placeholder. */ body.rtl input::placeholder, body.rtl textarea::placeholder { font-family: 'Inter', var(--rtl-font) !important; } /* 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; } /* Same fix for .badgeInfo (LVD / pool / OCD badges in Clients/index.vue's Client Contact column) — plain rtl prose needs its true direction back, not the icon-first ltr the general span rule forces. */ body.rtl .badgeInfo { direction: rtl; } body.rtl option, body.rtl select, body.rtl .swal2-title { font-family: 'Inter', var(--rtl-font) !important; text-align: center; } /* Advisor picker dropdowns (client list bucket assignment + the "Advisor" list filter) — advisor names always read left-to-right character-wise (direction: ltr), but centered like the rest of this select's options rather than left-aligned. */ body.rtl select.wb-ele.allocated, body.rtl .advisor-filter-select { text-align: center !important; direction: ltr; } 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 .congrats-pill { direction: rtl; } body.rtl .profile-hero-body, body.rtl .profile-hero-info { direction: rtl; } /* .profile-hero-stats is a full-width block sibling of .profile-hero-body (not one of its flex children), with its own internal flex row that defaults to flex-start (left-packed). Push it to the physical right edge under RTL. */ body.rtl .profile-hero-stats { justify-content: flex-end; } 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; } body.rtl .swal2-html-container { direction: rtl; } /* The `body.rtl p` rule above forces direction:ltr on every

, including ones SweetAlert2 renders inside .swal2-html-container, overriding the container's own rtl direction set just above. Restore rtl on those. */ body.rtl .swal2-html-container p { direction: rtl; } /* Clients/index.vue's client-id row (checkbox + priority dot + #id link + vcard icon) is a `justify-content: flex-start` flex row, so it stays pinned to the physical left even though the surrounding div/p rules above force everything else in the same "Client Contact" column (name, email, phone) to text-align:right. Flip it to flex-end so the whole row lands at the far right like its siblings. */ body.rtl .note-flex-start { justify-content: flex-end; } /* Reverse the row's own child order too — checkbox, priority dot, #id link, vcard icon — so it reads right-to-left with the checkbox landing first (rightmost), instead of keeping LTR child order just shifted to the right edge. */ body.rtl .priority { direction: rtl; } /* AI message card headers (AiStreamBlock.vue / AiVoiceCard.vue) and the reasoning/thinking toggle are flex rows with the label as the first child and a badge/slot (streaming spinner, header-extra) as the last — flipping the flex direction puts the label at the far right and the badge/extra at the far left, matching RTL reading order. */ body.rtl .ai-msg-card-header, body.rtl .ai-thinking-toggle, body.rtl .ai-property-links-header { direction: rtl; } /* The flash/client toasts (see AuthenticatedLayout.vue's flashSuccess/ flashError) hardcode direction:ltr + text-align:left in style.css's .toast-alert-top-left so mixed-content messages stay readable in LTR. Flip both for RTL so the message text reads right-to-left/right-aligned like the rest of the RTL UI. */ body.rtl .toast-alert-top-left { direction: rtl; text-align: right; } /* 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 .no_data, body.rtl .dash-content .columns-titles, body.rtl .title-bold, body.rtl .wb-ele-booking-date, body.rtl .stat-label, body.rtl .profile-stat-val, body.rtl .profile-stat-lbl { font-family: 'Inter', var(--rtl-font) !important; } body.rtl .sm-txt { font-family: 'Inter', var(--rtl-font) !important; direction: rtl; } body.rtl .dash-head { 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; } /* Close button always sits at the far left in RTL (mirrors the LTR far-right position) - scoped to body.rtl only, unlike a prior version of this rule which applied unconditionally and broke every LTR modal header by pushing the title group to the right and the close button to the left. */ 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; } /* Unlike most icon+label pairs in this app (which rely on the generic `body.rtl a` rule above forcing direction:ltr to keep icon-then-text order), the Support navbar dropdown reads correctly with a real RTL flow — icon on the trailing/right side, text to its left. Applies to every item in the menu (Report an issue / My tickets / Open tickets) since it targets any icon+label pair under this scope, not a specific `bi-*` icon class. */ body.rtl .support-nav-dropdown .dropdown-item { direction: rtl !important; } /* `.me-2` is a physical `margin-right` (Bootstrap here isn't built with logical properties), so once the item flips to direction:rtl the icon — now the rightmost element — pushes its margin out past the item's own right edge instead of into the gap facing the text. Zero that out and put the gap on the text's right side instead, facing the icon. */ body.rtl .support-nav-dropdown .dropdown-item i { margin-right: 0 !important; } body.rtl .support-nav-dropdown .dropdown-item span:first-of-type { margin-right: 8px; } @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: flex-start; gap: 10px; 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 .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; } /* EditUserModal's pool-transfer action buttons (Return to Pools / Move to Pool) — same icon-trailing-on-the-right treatment as .btn_primary.md_btn above, scoped to this card so it doesn't touch every outline button app-wide. */ body.rtl .pool-action-card button { display: inline-flex; align-items: center; flex-direction: row-reverse; gap: 6px; } /* The card icon sits first in the DOM (icon, then body) for the LTR left-icon/right-text reading order — reversed so the icon lands on the physical right, matching every other icon+label pair's RTL treatment in this file (e.g. .sidebar-nav .nav-link above). */ body.rtl .pool-action-card { flex-direction: row-reverse; } /* This div isn't covered by the blanket h1-h6/span/a/p/... font-family+ text-align list above (it's a plain div), so it silently kept its LTR font and left alignment — Cairo/Vazirmatn wasn't reaching the Arabic pool-section headings ("المجموعات", etc.) at all, and they looked misaligned next to the rest of the card's right-aligned text. */ body.rtl .pool-action-card-title { font-family: 'Inter', var(--rtl-font) !important; text-align: right; } /* EditUserModal's 🎉 celebrate button sits between the title and close button. In LTR, its .ms-auto does the same job .btn-close's own margin-right:auto normally does alone: push the header's tail (celebrate + close) away from the title. Under RTL's row-reverse header, buttons get direction:ltr forced on them (see the blanket rule above), which flips which physical side .ms-auto pulls toward, floating this button in the middle instead of at the far left with close. Override with the correct physical margin here, and cancel .btn-close's own auto margin in just this modal so only one of the two claims the free space — both wanting it would split them apart with a gap in between instead of sitting flush together at the far left. */ body.rtl #editUserModal .modal-header .btn-close { margin-right: 0 !important; } body.rtl #editUserModal .modal-header .btn-primary { margin-left: 0 !important; margin-right: auto !important; } body.rtl .btn-close { margin-left: 0 !important; margin-right: auto !important; }