/* ===================================================================== RTL overrides for Arabic (and other right-to-left UI cultures). Loaded only when . Uses logical CSS properties where possible; the targeted overrides below cover the few legacy styles that still rely on physical left/right. ===================================================================== */ html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button { font-family: "Noto Sans Arabic", "Segoe UI", "Tahoma", "Inter", sans-serif; } html[dir="rtl"] body { text-align: start; overflow-x: hidden; } .widget-header-left { flex-direction: row; } /* Inputs render text from the right edge */ html[dir="rtl"] input[type="text"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="password"], html[dir="rtl"] input[type="search"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"], html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: start; direction: rtl; } /* Tables, forms, headings — start-aligned by default */ html[dir="rtl"] th, html[dir="rtl"] td, html[dir="rtl"] label, html[dir="rtl"] .form-label, html[dir="rtl"] .header-text, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { text-align: start; } /* --------------------------------------------------------------------- Side navigation: swap to the inline-end (right side in RTL). The legacy theme positions .sidenav-main with `left: 0`; override with logical equivalents. --------------------------------------------------------------------- */ html[dir="rtl"] .sidenav-main { left: auto !important; right: 0 !important; inset-inline-start: auto !important; inset-inline-end: 0 !important; transform: translateX(0); border-right: 0; border-left: 1px solid #ececec; direction: rtl; } html[dir="rtl"] .sidenav-main .brand-sidebar { left: auto !important; right: 0 !important; border-right: 0 !important; border-left: 1px solid #ececec; } html[dir="rtl"] #slide-out.sidenav, html[dir="rtl"] #slide-out.sidenav.sidenav-fixed, html[dir="rtl"] #slide-out.leftside-navigation { left: auto !important; right: 0 !important; transform: translateX(0) !important; border-left: 1px solid #ededed; border-right: 0; } html[dir="rtl"] .drag-target { left: auto !important; right: 0 !important; } @media only screen and (min-width: 993px) { html[dir="rtl"] #main { padding-left: 0 !important; padding-right: 225px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box; } html[dir="rtl"] #main.main-full, html[dir="rtl"] body.menu-collapse #main { padding-left: 0 !important; padding-right: 64px !important; } html[dir="rtl"] .navbar .navbar-main { padding-left: 0 !important; padding-right: 225px !important; } html[dir="rtl"] body.menu-collapse .navbar .navbar-main { padding-left: 0 !important; padding-right: 64px !important; } html[dir="rtl"] #nav-breadcrumb-main, html[dir="rtl"] footer { padding-left: 0 !important; /*padding-right: 225px !important;*/ } html[dir="rtl"] .sidenav-main.nav-collapsed #slide-out.sidenav, html[dir="rtl"] .sidenav-main.nav-collapsed #slide-out.sidenav.sidenav-fixed { width: 64px !important; } } @media only screen and (max-width: 992px) { html[dir="rtl"] #main, html[dir="rtl"] .page-topbar, html[dir="rtl"] .navbar .navbar-main { padding-left: 0 !important; padding-right: 0 !important; margin-inline-end: 0 !important; } html[dir="rtl"] #slide-out.sidenav { left: auto !important; right: 0 !important; transform: translateX(105%) !important; } html[dir="rtl"] #slide-out.sidenav.sidenav-fixed { transform: translateX(105%) !important; } html[dir="rtl"] #slide-out.sidenav.open, html[dir="rtl"] #slide-out.sidenav.sidenav-fixed.open { transform: translateX(0) !important; } } /* Nav link contents: in RTL show icon at the inline-end and arrow at the inline-start (mirror of LTR). */ html[dir="rtl"] .sidenav li > a { display: flex !important; flex-direction: row !important; align-items: center; text-align: start; } html[dir="rtl"] .sidenav li > a > .material-icons { order: 1; margin-right: 0 !important; margin-left: 10px !important; margin-inline-end: 0 !important; margin-inline-start: 10px !important; } html[dir="rtl"] .sidenav li > a > .menu-title, html[dir="rtl"] .sidenav li > a > span:not(.material-icons) { order: 2; flex: 1 1 auto; text-align: right; } html[dir="rtl"] #slide-out > li.bold > a { padding-inline-start: 4px !important; padding-inline-end: 36px !important; } html[dir="rtl"] #slide-out .collapsible-sub li a { padding-inline-start: 14px !important; padding-inline-end: 48px !important; } html[dir="rtl"] .sidenav .collapsible-header::after, html[dir="rtl"] .sidenav .collapsible-header > .arrow { right: auto !important; left: 14px !important; } html[dir="rtl"] .sidenav .collapsible-header.active::after, html[dir="rtl"] #slide-out .collapsible-header.active::after, html[dir="rtl"] #slide-out > li.bold.active > a.collapsible-header::after { transform: rotate(180deg) !important; } /* --------------------------------------------------------------------- Header: profile / notifications / quick-create cluster moves to the inline-start (visually the LEFT in RTL); breadcrumbs and logo stay at the inline-end. The existing .navbar-list.right uses `float: right` which we neutralise with a logical alternative. --------------------------------------------------------------------- */ html[dir="rtl"] .navbar-list.right, html[dir="rtl"] .app-topbar-actions { float: none; margin-left: 0 !important; margin-right: auto !important; margin-inline-start: 0 !important; margin-inline-end: auto !important; order: 1 !important; } html[dir="rtl"] .app-shell-topbar { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; } html[dir="rtl"] .app-header-brand { order: 4 !important; display: inline-flex !important; align-items: center !important; gap: 8px; margin-inline-start: 12px !important; margin-inline-end: 0 !important; min-width: 0; } html[dir="rtl"] .app-header-brand .brand-logo { gap: 8px; } html[dir="rtl"] .app-header-brand .navbar-toggler { flex-shrink: 0; } html[dir="rtl"] .nav-wrapper { flex-direction: row !important; } html[dir="rtl"] .nav-breadcrumb-header { order: 5 !important; margin-inline-start: 0 !important; margin-inline-end: 0 !important; text-align: start; } html[dir="rtl"] .brand-sidebar .logo-wrapper { flex-direction: row !important; } html[dir="rtl"] .brand-sidebar .brand-logo { justify-content: flex-start; } html[dir="rtl"] .brand-sidebar .sidenav-brand-toggler .material-icons, html[dir="rtl"] .app-header-brand .navbar-toggler .material-icons { transform: scaleX(-1); } html[dir="rtl"] .app-header-toggle { order: 6 !important; } html[dir="rtl"] .global-search-shell { order: 2 !important; margin-left: 10px !important; margin-right: auto !important; } html[dir="rtl"] .gs-input-wrap .gs-icon { left: auto !important; right: 10px !important; } html[dir="rtl"] .global-search-shell.is-open .gs-input-wrap .gs-icon { left: auto !important; right: 18px !important; } html[dir="rtl"] .gs-input { padding: 0 34px 0 72px !important; } html[dir="rtl"] .global-search-shell.is-open .gs-input { padding: 0 48px 0 80px !important; } html[dir="rtl"] .global-search-shortcut { right: auto !important; left: 34px !important; } html[dir="rtl"] .global-search-clear-btn { right: auto !important; left: 12px !important; } html[dir="rtl"] .global-search-result-item, html[dir="rtl"] .global-search-section-header, html[dir="rtl"] .global-search-recent-queries, html[dir="rtl"] .global-search-footer { direction: rtl; } html[dir="rtl"] .global-search-item-copy { text-align: right; } html[dir="rtl"] .global-search-item-shortcut, html[dir="rtl"] .gs-row-actions { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .sidebar-create-panel { direction: rtl; text-align: start; } html[dir="rtl"] .sidebar-create-panel-header, html[dir="rtl"] .sidebar-create-links a { flex-direction: row; } html[dir="rtl"] .sidebar-create-title { letter-spacing: 0; } html[dir="rtl"] .brand-sidebar .logo-wrapper { padding-inline-start: 14px; padding-inline-end: 12px; } html[dir="rtl"] .brand-logo { flex-direction: row; } /* --------------------------------------------------------------------- Dropdowns / panels that anchor to a specific edge. --------------------------------------------------------------------- */ html[dir="rtl"] .notification-dropdown-panel, html[dir="rtl"] .profile-dropdown-panel { right: auto !important; left: 0 !important; inset-inline-end: auto !important; inset-inline-start: 0 !important; } html[dir="rtl"] .notification-item .notif-icon { margin-inline-end: 0; margin-inline-start: 10px; } /* --------------------------------------------------------------------- Breadcrumbs: chevron points the other way. --------------------------------------------------------------------- */ html[dir="rtl"] .breadcrumbs .separator .material-icons { transform: scaleX(-1); } /* --------------------------------------------------------------------- Generic helper neutralisation. These legacy float-left/right utility classes appear throughout the app; map them to logical equivalents. --------------------------------------------------------------------- */ 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; } html[dir="rtl"] .ml-1, html[dir="rtl"] .ml-2, html[dir="rtl"] .ml-3, html[dir="rtl"] .ml-4 { margin-left: 0 !important; } html[dir="rtl"] .mr-1, html[dir="rtl"] .mr-2, html[dir="rtl"] .mr-3, html[dir="rtl"] .mr-4 { margin-right: 0 !important; } html[dir="rtl"] .ml-1 { margin-right: .25rem !important; } html[dir="rtl"] .ml-2 { margin-right: .5rem !important; } html[dir="rtl"] .ml-3 { margin-right: 1rem !important; } html[dir="rtl"] .ml-4 { margin-right: 1.5rem !important; } html[dir="rtl"] .mr-1 { margin-left: .25rem !important; } html[dir="rtl"] .mr-2 { margin-left: .5rem !important; } html[dir="rtl"] .mr-3 { margin-left: 1rem !important; } html[dir="rtl"] .mr-4 { margin-left: 1.5rem !important; } html[dir="rtl"] .pl-1, html[dir="rtl"] .pl-2, html[dir="rtl"] .pl-3, html[dir="rtl"] .pl-4, html[dir="rtl"] .pl-5, html[dir="rtl"] .pl-6, html[dir="rtl"] .pl-7, html[dir="rtl"] .pl-8 { padding-left: 0 !important; } html[dir="rtl"] .pr-1, html[dir="rtl"] .pr-2, html[dir="rtl"] .pr-3, html[dir="rtl"] .pr-4, html[dir="rtl"] .pr-5, html[dir="rtl"] .pr-6, html[dir="rtl"] .pr-7, html[dir="rtl"] .pr-8 { padding-right: 0 !important; } html[dir="rtl"] .pl-1 { padding-right: .25rem !important; } html[dir="rtl"] .pl-2 { padding-right: .5rem !important; } html[dir="rtl"] .pl-3 { padding-right: 1rem !important; } html[dir="rtl"] .pl-4 { padding-right: 1.5rem !important; } html[dir="rtl"] .pl-5 { padding-right: 3rem !important; } html[dir="rtl"] .pl-6 { padding-right: 4rem !important; } html[dir="rtl"] .pl-7 { padding-right: 5rem !important; } html[dir="rtl"] .pl-8 { padding-right: 6rem !important; } html[dir="rtl"] .pr-1 { padding-left: .25rem !important; } html[dir="rtl"] .pr-2 { padding-left: .5rem !important; } html[dir="rtl"] .pr-3 { padding-left: 1rem !important; } html[dir="rtl"] .pr-4 { padding-left: 1.5rem !important; } html[dir="rtl"] .pr-5 { padding-left: 3rem !important; } html[dir="rtl"] .pr-6 { padding-left: 4rem !important; } html[dir="rtl"] .pr-7 { padding-left: 5rem !important; } html[dir="rtl"] .pr-8 { padding-left: 6rem !important; } /* Datatables: numeric and currency columns should remain LTR for readability of digits/symbols, even inside an RTL page. */ html[dir="rtl"] .dataTables_wrapper .dataTables_filter input { text-align: start; } html[dir="rtl"] .dataTables_wrapper, html[dir="rtl"] table.dataTable, html[dir="rtl"] .dataTables_scroll, html[dir="rtl"] .dataTables_scrollHead, html[dir="rtl"] .dataTables_scrollBody, html[dir="rtl"] .dataTables_scrollFoot { width: 100% !important; } html[dir="rtl"] .invoice-data-table th, html[dir="rtl"] .invoice-data-table td, html[dir="rtl"] table.dataTable th, html[dir="rtl"] table.dataTable td { padding-right: 8px !important; padding-left: 8px !important; box-sizing: border-box; } html[dir="rtl"] table.dataTable th.select-checkbox, html[dir="rtl"] table.dataTable td.select-checkbox, html[dir="rtl"] .invoice-data-table th.select-checkbox, html[dir="rtl"] .invoice-data-table td.select-checkbox, html[dir="rtl"] table.dataTable th.no-colvis:first-child, html[dir="rtl"] table.dataTable td.no-colvis:first-child, html[dir="rtl"] .invoice-data-table th.no-colvis:first-child, html[dir="rtl"] .invoice-data-table td.no-colvis:first-child { width: 42px !important; min-width: 42px !important; max-width: 42px !important; text-align: center !important; padding-right: 6px !important; padding-left: 6px !important; } html[dir="rtl"] table.dataTable th:nth-child(2), html[dir="rtl"] table.dataTable td:nth-child(2), html[dir="rtl"] .invoice-data-table th:nth-child(2), html[dir="rtl"] .invoice-data-table td:nth-child(2) { width: 70px; min-width: 70px; } html[dir="rtl"] table.dataTable th.th-action-header, html[dir="rtl"] table.dataTable td.non-clickable:last-child, html[dir="rtl"] .invoice-data-table th.th-action-header, html[dir="rtl"] .invoice-data-table td.non-clickable:last-child { width: 180px; min-width: 140px; } html[dir="rtl"] .dataTables_wrapper .row, html[dir="rtl"] .dataTables_wrapper .dataTables_length, html[dir="rtl"] .dataTables_wrapper .dataTables_filter, html[dir="rtl"] .dt-buttons { direction: rtl; } html[dir="rtl"] .dataTables_wrapper .dataTables_filter { text-align: left; } html[dir="rtl"] .dataTables_wrapper .dataTables_length { text-align: right; } html[dir="rtl"] td.numeric, html[dir="rtl"] td.amount, html[dir="rtl"] td.currency, html[dir="rtl"] td.ltr-numbers, html[dir="rtl"] th.ltr-numbers, html[dir="rtl"] input.ltr-numbers, html[dir="rtl"] select.ltr-numbers, html[dir="rtl"] .ltr-numbers { direction: ltr; text-align: end; unicode-bidi: embed; } html[dir="rtl"] .overflow-table { overflow-x: auto; overflow-y: visible; } html[dir="rtl"] table.inline-editable { direction: rtl; table-layout: fixed; min-width: 980px; } html[dir="rtl"] .inline-editable th:first-child, html[dir="rtl"] .inline-editable td:first-child, html[dir="rtl"] .inline-editable th:nth-child(2), html[dir="rtl"] .inline-editable td:nth-child(2), html[dir="rtl"] .inline-editable th:last-child, html[dir="rtl"] .inline-editable td:last-child { width: 44px !important; min-width: 44px !important; max-width: 44px !important; padding-inline: 4px !important; text-align: center !important; white-space: nowrap; } html[dir="rtl"] .inline-editable th:nth-child(2), html[dir="rtl"] .inline-editable td:nth-child(2) { width: 58px !important; min-width: 58px !important; max-width: 58px !important; } html[dir="rtl"] .inline-editable th, html[dir="rtl"] .inline-editable td { box-sizing: border-box; overflow: visible; unicode-bidi: isolate; } html[dir="rtl"] .inline-editable input.cell-input, html[dir="rtl"] .inline-editable select.cell-input { width: 100%; min-width: 0; box-sizing: border-box; direction: rtl; text-align: start; unicode-bidi: plaintext; } html[dir="rtl"] .inline-editable .text-right, html[dir="rtl"] .inline-editable .quantity, html[dir="rtl"] .inline-editable .price, html[dir="rtl"] .inline-editable .discount, html[dir="rtl"] .inline-editable .taxamount, html[dir="rtl"] .inline-editable .sub-amount { direction: ltr !important; text-align: right !important; unicode-bidi: isolate; } html[dir="rtl"] .inline-editable .drag-handle, html[dir="rtl"] .inline-editable .trash, html[dir="rtl"] .inline-editable .text-center { text-align: center !important; } html[dir="rtl"] .inline-editable .trash .material-icons, html[dir="rtl"] .inline-editable td:last-child .material-icons, html[dir="rtl"] .inline-editable td:last-child button, html[dir="rtl"] .inline-editable td:first-child .material-icons { margin: 0 !important; } html[dir="rtl"] #global-search-result.search-result { direction: rtl; text-align: start; } html[dir="rtl"] #global-search-result .item-title-code, html[dir="rtl"] #global-search-result .entity-list-item, html[dir="rtl"] #global-search-result .gs-item, html[dir="rtl"] #global-search-result .acct-item { direction: rtl; text-align: start; } html[dir="rtl"] #global-search-result .price-part { direction: ltr; unicode-bidi: embed; margin-right: auto; margin-left: 0; } html[dir="rtl"] .row, html[dir="rtl"] .card, html[dir="rtl"] .card-content, html[dir="rtl"] .modal, html[dir="rtl"] .modal-content, html[dir="rtl"] .dropdown-content, html[dir="rtl"] .select-dropdown, html[dir="rtl"] .select2-container, html[dir="rtl"] .select2-dropdown { direction: rtl; } html[dir="rtl"] .breadcrumb, html[dir="rtl"] .breadcrumbs, html[dir="rtl"] .nav-breadcrumb-header { direction: rtl; } /* --------------------------------------------------------------------- Global page-level hardening for index / detail / create / edit pages. Covers patterns reused across modules: stat rows, hero headers, action button groups, side panels, badges, form fields with leading icons, and bulk-action toolbars. --------------------------------------------------------------------- */ html[dir="rtl"] .middle-nav .float-left, html[dir="rtl"] .middle-nav .float-right { float: none !important; } html[dir="rtl"] .middle-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } html[dir="rtl"] .btn-group-custom { justify-content: flex-start !important; } html[dir="rtl"] .btns, html[dir="rtl"] .btn, html[dir="rtl"] .btn-flat { margin-inline-start: 0; margin-inline-end: 6px; } html[dir="rtl"] .btns .material-icons, html[dir="rtl"] .btn .material-icons { margin-inline-end: 4px; margin-inline-start: 0; } html[dir="rtl"] .supplier-stats-row, html[dir="rtl"] .stats-row, html[dir="rtl"] .kpi-row { direction: rtl; } html[dir="rtl"] .stat-card { text-align: start; } html[dir="rtl"] .stat-icon-wrap { margin-inline-end: 12px; margin-inline-start: 0; } html[dir="rtl"] .stat-value, html[dir="rtl"] .stat-number { unicode-bidi: plaintext; direction: ltr; display: inline-block; text-align: start; } html[dir="rtl"] .hero-header, html[dir="rtl"] .page-hero, html[dir="rtl"] .detail-hero { direction: rtl; text-align: start; } html[dir="rtl"] .hero-actions, html[dir="rtl"] .detail-actions { justify-content: flex-start; } html[dir="rtl"] .side-panel, html[dir="rtl"] .detail-side, html[dir="rtl"] .info-side { border-inline-start: 0; border-inline-end: 1px solid #eef1f4; padding-inline-start: 0; padding-inline-end: 16px; } html[dir="rtl"] .badge, html[dir="rtl"] .status-badge, html[dir="rtl"] .chip { margin-inline-start: 0; margin-inline-end: 6px; } html[dir="rtl"] .input-field .prefix { left: auto; right: 0; } html[dir="rtl"] .input-field .prefix ~ input, html[dir="rtl"] .input-field .prefix ~ textarea, html[dir="rtl"] .input-field .prefix ~ label, html[dir="rtl"] .input-field .prefix ~ .helper-text { margin-left: 0; margin-right: 3rem; padding-left: 0; padding-right: 0; } html[dir="rtl"] .bulk-actions-bar, html[dir="rtl"] .bulk-toolbar { direction: rtl; } html[dir="rtl"] .bulk-actions-bar .btn, html[dir="rtl"] .bulk-toolbar .btn { margin-inline-start: 0; margin-inline-end: 6px; } html[dir="rtl"] .form-actions, html[dir="rtl"] .modal-footer, html[dir="rtl"] .pl-modal-footer, html[dir="rtl"] .report-modal-footer, html[dir="rtl"] .approval-modal-footer, html[dir="rtl"] .modal-footer-bar, html[dir="rtl"] .bk-modal-footer, html[dir="rtl"] .fa-modal-footer { display: flex; justify-content: flex-start; gap: 8px; } html[dir="rtl"] .form-actions .btn-flat.modal-close, html[dir="rtl"] .modal-footer .btn-flat.modal-close { order: 2; } #modal1 .modal-title { text-align: right !important; } html[dir="rtl"] .empty-state-wrapper, html[dir="rtl"] .empty-state { direction: rtl; text-align: start; } html[dir="rtl"] #sm-settings-page .settings-toolbar-actions { margin-left: 0; margin-right: auto; } html[dir="rtl"] #sm-settings-page .settings-search-wrap > i { left: auto; right: 12px; } html[dir="rtl"] #sm-settings-page .settings-search-clear { right: auto; left: 6px; } html[dir="rtl"] #sm-settings-page .settings-tabs button { margin: 0 0 -1px 14px; } /*html[dir="rtl"] #sm-settings-page .settings-section { grid-template-columns: minmax(720px, 1fr) 260px; }*/ html[dir="rtl"] #sm-settings-page .settings-list { grid-template-columns: repeat(2, minmax(320px, 1fr)); } html[dir="rtl"] #sm-settings-page .settings-section-title h5, html[dir="rtl"] #sm-settings-page .settings-item-body h3, html[dir="rtl"] #sm-settings-page .settings-item-body p { white-space: nowrap; overflow-wrap: normal; word-break: normal; } html[dir="rtl"] #users-list-datatable, html[dir="rtl"] #users-list-datatable_wrapper, html[dir="rtl"] .responsive-table, html[dir="rtl"] .dataTables_wrapper .row { width: 100% !important; } html[dir="rtl"] .perm-page, html[dir="rtl"] .perm-page-header, html[dir="rtl"] .perm-section, html[dir="rtl"] .perm-section-body, html[dir="rtl"] .report-section-inner { direction: rtl; text-align: start; } html[dir="rtl"] .perm-section-hd, html[dir="rtl"] .report-cat-hd, html[dir="rtl"] .report-master-row, html[dir="rtl"] .perm-others-wrap, html[dir="rtl"] .perm-other-label, html[dir="rtl"] .perm-other-item { direction: rtl; } html[dir="rtl"] .perm-th-label, html[dir="rtl"] .perm-td-label, html[dir="rtl"] .perm-th-others, html[dir="rtl"] .perm-td-others { text-align: right !important; } html[dir="rtl"] .perm-table { min-width: 760px; } html[dir="rtl"] .report-list { padding: 6px 46px 12px 18px; } html[dir="rtl"] .report-list li { padding-left: 0; padding-right: 14px; } html[dir="rtl"] .report-list li::before { left: auto; right: 0; } html[dir="rtl"] .tax-page, html[dir="rtl"] .tax-card, html[dir="rtl"] .tax-summary, html[dir="rtl"] .digital-banner, html[dir="rtl"] .vat-dash, html[dir="rtl"] .vat-dash-hero, html[dir="rtl"] .vat-section, html[dir="rtl"] .vat-section-header, html[dir="rtl"] .obl-grid, html[dir="rtl"] .vat-empty { direction: rtl; text-align: start; } html[dir="rtl"] .vat-dash-hero::after { right: auto; left: -30px; } html[dir="rtl"] .vat-stat-card::before { left: auto; right: 0; } html[dir="rtl"] .obl-status-open, html[dir="rtl"] .obl-status-fulfilled { border-left: 0; border-right-width: 4px; border-right-style: solid; } html[dir="rtl"] .obl-status-open { border-right-color: #f59e0b; } html[dir="rtl"] .obl-status-fulfilled { border-right-color: #16a34a; } html[dir="rtl"] #sm-settings-page .settings-section-header { text-align: start; } html[dir="rtl"] #sm-settings-page .settings-item-body h3, html[dir="rtl"] #sm-settings-page .settings-item-body p, html[dir="rtl"] #sm-settings-page .settings-no-results { text-align: start; } html[dir="rtl"] #modal_content .modal-btn-group { display: flex; flex-wrap: wrap; } html[dir="rtl"] #modal_content .modal-btn-group .float-left, html[dir="rtl"] #modal_content .modal-btn-group .float-right { float: none !important; } html[dir="rtl"] #modal_content .modal-btn-group .btns-default { margin-inline-end: 0; margin-inline-start: auto; } html[dir="rtl"] #modal_content .modal-btn-group .btns-primary { margin-inline-start: 0; margin-inline-end: auto; } html[dir="rtl"] #modal_content .select2-container { text-align: start; } html[dir="rtl"] .approval-settings .approval-module-header, html[dir="rtl"] .approval-settings .approval-type-group, html[dir="rtl"] .approval-settings .approval-notif-options, html[dir="rtl"] .approval-settings .approval-save-row { direction: rtl; } html[dir="rtl"] .approval-settings .approval-module-header h6, html[dir="rtl"] .approval-settings .approval-type-info, html[dir="rtl"] .approval-settings .notif-text { text-align: start; } html[dir="rtl"] .approval-settings .wf-check { right: auto; left: 12px; } html[dir="rtl"] .approval-settings .approval-levels-header span { border-right: 0; border-left: 1px solid #dde3ed; } html[dir="rtl"] .approval-settings .approval-levels-header span:last-child { border-left: none; } html[dir="rtl"] .approval-settings .approval-level-row > .level-approver-wrap { border-left: 0; border-right: 1px solid #eef1f7; } html[dir="rtl"] .approval-settings .level-approver-wrap .select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 12px !important; padding-left: 32px !important; } html[dir="rtl"] .ss-head, html[dir="rtl"] .ss-head .left, html[dir="rtl"] .ss-head .actions, html[dir="rtl"] .ss-banner, html[dir="rtl"] .ss-toggle-row, html[dir="rtl"] .ss-presets, html[dir="rtl"] .ss-preview, html[dir="rtl"] .ss-tip { direction: rtl; } html[dir="rtl"] .ss-head .left, html[dir="rtl"] .ss-banner .b-text, html[dir="rtl"] .ss-card-head .txt, html[dir="rtl"] .ss-toggle-text, html[dir="rtl"] .ss-preview .pv-text, html[dir="rtl"] .ss-tip { text-align: start; } html[dir="rtl"] .ss-page .ss-input-row .unit { border-left: 0 !important; border-right: 1px solid var(--ss-border) !important; } html[dir="rtl"] .ss-fields .ss-validation, html[dir="rtl"] .ss-help, html[dir="rtl"] .ss-preset-label { text-align: start; } html[dir="rtl"] #fiscalYearWarnModal > div { direction: rtl; text-align: start; } html[dir="rtl"] #fiscalYearWarnModal > div > div:last-child { justify-content: flex-start !important; } html[dir="rtl"] .settings-row { direction: rtl; } html[dir="rtl"] .settings-row-info, html[dir="rtl"] .settings-row-label, html[dir="rtl"] .settings-row-desc, html[dir="rtl"] .settings-row-control { text-align: start; } html[dir="rtl"] .settings-row-label .material-icons { margin-left: 0 !important; margin-right: 5px !important; } /* ── Toggle switches: mirror the thumb travel in RTL ── */ html[dir="rtl"] .settings-switch-slider::before, html[dir="rtl"] .it-switch .sl::before, html[dir="rtl"] .sm-switch .sm-slider::before, html[dir="rtl"] .fa-switch .fa-switch__slider::before, html[dir="rtl"] .rm-switch .rm-slider::before { left: auto !important; right: 3px !important; inset-inline-start: auto !important; inset-inline-end: 3px !important; } html[dir="rtl"] .settings-switch input:checked ~ .settings-switch-slider::before, html[dir="rtl"] .it-switch input:checked ~ .sl::before, html[dir="rtl"] .sm-switch input:checked ~ .sm-slider::before, html[dir="rtl"] .fa-switch input:checked ~ .fa-switch__slider::before, html[dir="rtl"] .rm-switch input:checked ~ .rm-slider::before { transform: translateX(-20px) !important; } html[dir="rtl"] .dropdown-menu { right: auto; left: 0; text-align: start; } html[dir="rtl"] .dropdown-menu li a { text-align: start; } html[dir="rtl"] .payment-page .amount-received-bar, html[dir="rtl"] .payment-page .payment-summary-bar, html[dir="rtl"] .payment-page .payment-field-grid, html[dir="rtl"] .payment-page .payment-alloc-table, html[dir="rtl"] .payment-page .payment-empty { direction: rtl; } html[dir="rtl"] .payment-page .payment-field, html[dir="rtl"] .payment-page .payment-field label, html[dir="rtl"] .payment-page .payment-empty, html[dir="rtl"] .payment-page .ps-item { text-align: start; } html[dir="rtl"] .payment-page .payment-alloc-table .pay-input, html[dir="rtl"] .payment-page .amount-received-bar .ar-input, html[dir="rtl"] .payment-page .payment-alloc-table .text-right { text-align: left; } html[dir="rtl"] .payment-page .payment-alloc-table .pay-full-link { text-align: left; } html[dir="rtl"] .dtl-top, html[dir="rtl"] .dtl-top-right, html[dir="rtl"] .dtl-info-grid, html[dir="rtl"] .dtl-summary, html[dir="rtl"] .void-banner, html[dir="rtl"] .pay-modal, html[dir="rtl"] .pay-body, html[dir="rtl"] .pay-info, html[dir="rtl"] .pay-footer { direction: rtl; } html[dir="rtl"] .dtl-top-left, html[dir="rtl"] .void-banner-text, html[dir="rtl"] .dtl-info-grid label, html[dir="rtl"] .dtl-info-grid .val, html[dir="rtl"] .dtl-card-title, html[dir="rtl"] .dtl-note, html[dir="rtl"] .pay-info, html[dir="rtl"] .pay-label { text-align: start; } html[dir="rtl"] .pay-footer { justify-content: flex-start; } html[dir="rtl"] .acx-modal, html[dir="rtl"] .acx-header, html[dir="rtl"] .acx-header-left, html[dir="rtl"] .acx-toolbar, html[dir="rtl"] .acx-actions-text, html[dir="rtl"] .acx-body, html[dir="rtl"] .acx-table, html[dir="rtl"] .acx-footer, html[dir="rtl"] .acx-footer-inner, html[dir="rtl"] .acx-footer-actions, html[dir="rtl"] .refund-modal, html[dir="rtl"] .refund-body, html[dir="rtl"] .refund-header-row, html[dir="rtl"] .refund-summary, html[dir="rtl"] .refund-summary-row, html[dir="rtl"] .refund-footer { direction: rtl; } html[dir="rtl"] .acx-sub, html[dir="rtl"] .acx-header-left, html[dir="rtl"] .acx-toolbar, html[dir="rtl"] .refund-label, html[dir="rtl"] .refund-summary, html[dir="rtl"] .refund-error { text-align: start; } html[dir="rtl"] .acx-table .right-side, html[dir="rtl"] .acx-amount, html[dir="rtl"] .acx-date { text-align: left; } html[dir="rtl"] .acx-summary-box, html[dir="rtl"] .acx-footer-actions, html[dir="rtl"] .refund-footer { justify-content: flex-start; } html[dir="rtl"] .open-icon, html[dir="rtl"] .acx-fx-badge { margin-left: 0; margin-right: 6px; } html[dir="rtl"] .rm-toolbar, html[dir="rtl"] .rm-table, html[dir="rtl"] .rm-empty, html[dir="rtl"] .rm-form, html[dir="rtl"] .rm-form .rm-row, html[dir="rtl"] .rm-form .inline { direction: rtl; } html[dir="rtl"] .rm-table th, html[dir="rtl"] .rm-table td, html[dir="rtl"] .rm-empty, html[dir="rtl"] .rm-form label, html[dir="rtl"] .rm-form .hint, html[dir="rtl"] .rm-section-title { text-align: start; } html[dir="rtl"] .rm-row-actions a { margin-left: 0; margin-right: 8px; } html[dir="rtl"] #cnEmailForm footer, html[dir="rtl"] #paymentEmailForm footer { justify-content: flex-start !important; direction: rtl; } html[dir="rtl"] .rm-filter { direction: rtl; } html[dir="rtl"] .rm-filter label, html[dir="rtl"] .rm-filter input, html[dir="rtl"] .rm-filter select, html[dir="rtl"] .rm-preview, html[dir="rtl"] .rm-tokens { text-align: start; } html[dir="rtl"] #users-list-datatable .dropdown-menu, html[dir="rtl"] #users-list-datatable .dropdown-menu li a { text-align: start; } html[dir="rtl"] .pf-page, html[dir="rtl"] .pf-pagehead, html[dir="rtl"] .pf-pagehead-actions, html[dir="rtl"] .pf-id-card, html[dir="rtl"] .pf-id-meta, html[dir="rtl"] .pf-chips, html[dir="rtl"] .pf-stats, html[dir="rtl"] .pf-tabs, html[dir="rtl"] .pf-pane-head, html[dir="rtl"] .pf-grid, html[dir="rtl"] .pf-rows, html[dir="rtl"] .pf-row, html[dir="rtl"] .pf-callout, html[dir="rtl"] .pf-modal-head, html[dir="rtl"] .pf-modal-body, html[dir="rtl"] .pf-modal-foot, html[dir="rtl"] .import-steps, html[dir="rtl"] .import-panel, html[dir="rtl"] .import-warning, html[dir="rtl"] .import-req-box, html[dir="rtl"] .import-sidebar, html[dir="rtl"] .import-sample-card, html[dir="rtl"] .import-info-box { direction: rtl; } html[dir="rtl"] .pf-pagehead h1, html[dir="rtl"] .pf-pagehead .crumb, html[dir="rtl"] .pf-id-text, html[dir="rtl"] .pf-completion, html[dir="rtl"] .pf-pane-head .ph-text, html[dir="rtl"] .pf-field, html[dir="rtl"] .pf-field label, html[dir="rtl"] .pf-help, html[dir="rtl"] .pf-row .txt, html[dir="rtl"] .pf-callout, html[dir="rtl"] .import-dropzone, html[dir="rtl"] .import-info-box, html[dir="rtl"] .import-req-box, html[dir="rtl"] .import-warning { text-align: start; } html[dir="rtl"] .pf-pane-foot, html[dir="rtl"] .pf-modal-foot { justify-content: flex-start; } html[dir="rtl"] .pf-row .act { margin-right: auto; margin-left: 0; } html[dir="rtl"] .import-step-line { transform: scaleX(-1); } html[dir="rtl"] #refundEmailForm footer { justify-content: flex-start !important; direction: rtl; } /* Numeric / currency / date cells stay LTR even inside RTL pages */ html[dir="rtl"] .num, html[dir="rtl"] .currency, html[dir="rtl"] .money, html[dir="rtl"] td.numeric, html[dir="rtl"] td.amount, html[dir="rtl"] td.date, html[dir="rtl"] .date-cell { direction: ltr; unicode-bidi: plaintext; text-align: start; } /* ===================================================================== FINAL HARDENING — placed last so it wins specificity battles against material.min.css, style.min.css and any later rules that re-introduce physical left/right behaviour for the sidebar, header and main area. ===================================================================== */ /* Sidebar: force right edge in RTL, regardless of which theme rule applies. */ html[dir="rtl"] body .sidenav-main, html[dir="rtl"] body aside.sidenav-main, html[dir="rtl"] body #slide-out.sidenav, html[dir="rtl"] body #slide-out.sidenav.sidenav-fixed, html[dir="rtl"] body .sidenav, html[dir="rtl"] body .sidenav.sidenav-fixed { left: auto !important; right: 0 !important; inset-inline-start: auto !important; inset-inline-end: 0 !important; border-right: 0 !important; border-left: 1px solid #ececec !important; } @media only screen and (min-width: 993px) { html[dir="rtl"] body .sidenav-main, html[dir="rtl"] body #slide-out.sidenav, html[dir="rtl"] body #slide-out.sidenav.sidenav-fixed, html[dir="rtl"] body .sidenav.sidenav-fixed { transform: translateX(0) !important; } html[dir="rtl"] body #main { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 225px !important; transition: padding-right .3s ease !important; } html[dir="rtl"] body.menu-collapse #main, html[dir="rtl"] body #main.main-full { padding-left: 0 !important; padding-right: 64px !important; } html[dir="rtl"] body .navbar .navbar-main { padding-left: 0 !important; padding-right: 225px !important; transition: padding-right .3s ease !important; } html[dir="rtl"] body.menu-collapse .navbar .navbar-main { padding-left: 0 !important; padding-right: 64px !important; } html[dir="rtl"] body footer, html[dir="rtl"] body nav-lock ~ footer { padding-left: 0 !important; padding-right: 71px !important; } } @media only screen and (max-width: 992px) { html[dir="rtl"] body .sidenav, html[dir="rtl"] body #slide-out.sidenav, html[dir="rtl"] body #slide-out.sidenav.sidenav-fixed { transform: translateX(105%) !important; } html[dir="rtl"] body .sidenav.open, html[dir="rtl"] body #slide-out.sidenav.open, html[dir="rtl"] body #slide-out.sidenav.sidenav-fixed.open { transform: translateX(0) !important; } html[dir="rtl"] body #main, html[dir="rtl"] body .navbar .navbar-main, html[dir="rtl"] body footer { padding-left: 0 !important; padding-right: 0 !important; } } /* Drag target (Materialize) for opening side nav by gesture should also come from the right edge in RTL. */ html[dir="rtl"] body .drag-target { left: auto !important; right: 0 !important; } /* Header layout (the .nav-wrapper / .app-shell-topbar flexbox). Order: brand+toggle on the right, breadcrumbs next to it, then the global search, then the action cluster all the way on the left. */ html[dir="rtl"] body .navbar-main .nav-wrapper, html[dir="rtl"] body .app-shell-topbar { display: flex !important; flex-direction: row !important; align-items: center !important; } html[dir="rtl"] body .app-header-brand { order: 0 !important; margin-inline-end: 8px !important; margin-inline-start: 0 !important; } html[dir="rtl"] body .app-header-toggle { order: 1 !important; } html[dir="rtl"] body .nav-breadcrumb-header { order: 2 !important; flex: 0 1 auto !important; } html[dir="rtl"] body .global-search-shell { order: 3 !important; margin-left: 10px !important; margin-right: auto !important; } html[dir="rtl"] body .navbar-list.right, html[dir="rtl"] body ul.navbar-list.right, html[dir="rtl"] body .app-topbar-actions { order: 4 !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline-start: 0 !important; margin-inline-end: 0 !important; } /* Align language/profile/notification dropdown panels to the inline-start (left edge in RTL) so they don't fall off-screen. */ html[dir="rtl"] body .notification-dropdown-panel, html[dir="rtl"] body .profile-dropdown-panel, html[dir="rtl"] body .sidebar-create-panel { right: auto !important; left: 0 !important; inset-inline-start: 0 !important; inset-inline-end: auto !important; } /* Mirror the open/close arrow icons that visually point inward. */ html[dir="rtl"] body .navbar-toggler .material-icons, html[dir="rtl"] body .sidenav-brand-toggler .material-icons { transform: scaleX(-1); } /* DataTables / pagination / filter alignment helpers in RTL. */ html[dir="rtl"] .dataTables_filter { float: left !important; text-align: start !important; } html[dir="rtl"] .dataTables_info { float: right !important; text-align: start !important; } html[dir="rtl"] .dataTables_paginate { float: left !important; } html[dir="rtl"] .dataTables_length { float: right !important; } html[dir="rtl"] .dt-buttons { float: right !important; } /* Page content readability inside RTL. */ html[dir="rtl"] .breadcrumb, html[dir="rtl"] .breadcrumbs-top, html[dir="rtl"] .card-content, html[dir="rtl"] .card .card-title { text-align: start; } /* ===================================================================== RTL SHELL LOCKDOWN — this is intentionally last. It corrects the real theme classes used by the layout and avoids any change to English/LTR. ===================================================================== */ html[dir="rtl"] body .app-header-brand.hide { display: none !important; } html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.nav-collapsible.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.nav-expanded.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.nav-collapsed.rtl-sidenav-main { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 225px !important; height: 100vh !important; padding-top: 52px !important; border-right: 0 !important; transform: translateX(0) !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.nav-collapsed.rtl-sidenav-main { width: 64px !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned { position: relative !important; top: auto !important; right: auto !important; left: auto !important; width: 100% !important; height: auto !important; margin: 0 !important; transform: none !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } @media only screen and (min-width: 993px) { html[dir="rtl"] body #main { padding-right: 225px !important; padding-left: 0 !important; } html[dir="rtl"] body.menu-collapse #main, html[dir="rtl"] body #main.main-full { padding-right: 64px !important; padding-left: 0 !important; } html[dir="rtl"] body .navbar .navbar-main, html[dir="rtl"] body .navbar-main { padding-right: 225px !important; padding-left: 0 !important; } html[dir="rtl"] body.menu-collapse .navbar .navbar-main, html[dir="rtl"] body.menu-collapse .navbar-main { padding-right: 64px !important; padding-left: 0 !important; } } @media only screen and (max-width: 992px) { html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main { width: 260px !important; padding-top: 0 !important; pointer-events: none !important; transform: translateX(105%) !important; } html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main:has(#slide-out.open) { pointer-events: auto !important; transform: translateX(0) !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 260px !important; max-width: 86vw !important; height: 100vh !important; transform: translateX(105%) !important; background: #fff !important; border-left: 1px solid #ececec !important; pointer-events: auto !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation.open, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed.open, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned.open { transform: translateX(0) !important; } } html[dir="rtl"] body .sidenav-main .brand-sidebar, html[dir="rtl"] body .sidenav-main .logo-wrapper { direction: rtl !important; text-align: right !important; } html[dir="rtl"] body .sidenav-main .logo-wrapper { flex-direction: row !important; justify-content: space-between !important; padding-right: 14px !important; padding-left: 12px !important; } html[dir="rtl"] body .sidenav-main .brand-logo { flex-direction: row !important; justify-content: flex-start !important; text-align: right !important; } html[dir="rtl"] body .sidenav-main .navbar-toggler, html[dir="rtl"] body .sidenav-main .sidenav-brand-toggler { margin-right: auto !important; margin-left: 0 !important; } html[dir="rtl"] body .sidenav-main .sidenav li > a, html[dir="rtl"] body .sidenav-main .sidenav li > a.collapsible-header { direction: rtl !important; text-align: right !important; padding: 0 38px 0 14px !important; margin-right: 0 !important; margin-left: 0 !important; justify-content: flex-start !important; } html[dir="rtl"] body .sidenav-main .sidenav li > a > i.material-icons, html[dir="rtl"] body .sidenav-main .sidenav li > a.collapsible-header > i.material-icons { float: right !important; margin-right: 0 !important; margin-left: 12px !important; } html[dir="rtl"] body .sidenav-main .sidenav .menu-title { text-align: right !important; } html[dir="rtl"] body .sidenav-main .sidenav .collapsible-header:after { right: 12px !important; left: auto !important; content: 'keyboard_arrow_left' !important; } html[dir="rtl"] body .sidenav-main .sidenav li.active > .collapsible-header:after, html[dir="rtl"] body .sidenav-main .sidenav li.open > .collapsible-header:after { transform: rotate(-90deg) !important; } html[dir="rtl"] body.menu-collapse .sidenav-main .sidenav .collapsible-header:after, html[dir="rtl"] body .sidenav-main.nav-collapsed .sidenav .collapsible-header:after { display: block !important; right: 22px !important; left: auto !important; opacity: 1 !important; } html[dir="rtl"] body.menu-collapse .sidenav-main .sidenav li > a, html[dir="rtl"] body .sidenav-main.nav-collapsed .sidenav li > a { padding-right: 0 !important; padding-left: 0 !important; justify-content: center !important; } html[dir="rtl"] body.menu-collapse .sidenav-main .sidenav li > a > i.material-icons, html[dir="rtl"] body .sidenav-main.nav-collapsed .sidenav li > a > i.material-icons { margin: 0 !important; float: none !important; } html[dir="rtl"] body .sidebar-create-panel { direction: rtl !important; text-align: right !important; max-width: calc(100vw - 24px) !important; } html[dir="rtl"] body .sidebar-create-panel-header, html[dir="rtl"] body .sidebar-create-links a { flex-direction: row-reverse !important; text-align: right !important; } /* ===================================================================== RTL TOPBAR + SIDENAV POLISH — final overrides for the actual shell. ===================================================================== */ html[dir="rtl"] body .app-shell-topbar, html[dir="rtl"] body .navbar-main .nav-wrapper { min-width: 0 !important; gap: 8px !important; } html[dir="rtl"] body .brand-sidebar .logo-wrapper { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; gap: 8px !important; } html[dir="rtl"] body .brand-sidebar .brand-logo { order: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; } html[dir="rtl"] body .brand-sidebar .sidenav-brand-toggler, html[dir="rtl"] body .brand-sidebar .navbar-toggler { order: 1 !important; margin-right: 4px !important; margin-left: 0 !important; flex: 0 0 auto !important; } html[dir="rtl"] body .app-header-brand .navbar-toggler { order: 2 !important; margin-inline-start: 6px !important; margin-inline-end: 0 !important; } html[dir="rtl"] body .app-topbar-actions { position: relative !important; flex-direction: row !important; justify-content: flex-start !important; max-width: 100% !important; } html[dir="rtl"] body .notification-dropdown-panel, html[dir="rtl"] body .profile-dropdown-panel, html[dir="rtl"] body .sidebar-create-panel { position: fixed !important; right: auto !important; inset-inline-end: auto !important; max-width: calc(100vw - 24px) !important; z-index: 10005 !important; } html[dir="rtl"] body .profile-dropdown-panel, html[dir="rtl"] body .notification-dropdown-panel { direction: rtl !important; text-align: start !important; } html[dir="rtl"] body .help-center-drawer { left: 0 !important; right: auto !important; border-left: 0 !important; border-right: 1px solid #e5e7eb !important; box-shadow: 12px 0 40px rgba(15, 23, 42, .12) !important; transform: translateX(-100%) !important; direction: rtl !important; text-align: start !important; } html[dir="rtl"] body .help-center-drawer.open { transform: translateX(0) !important; } html[dir="rtl"] body .help-center-drawer.hc-page-mode { left: auto !important; right: auto !important; transform: none !important; } html[dir="rtl"] body .sidenav-main .sidenav li > a.collapsible-header { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; padding-right: 38px !important; padding-left: 38px !important; } html[dir="rtl"] body .sidenav-main .sidenav li > a.collapsible-header:after, html[dir="rtl"] body #slide-out.rtl-side-navigation > li > a.collapsible-header:after, html[dir="rtl"] body .sidenav-main #slide-out .collapsible-header:after, html[dir="rtl"] body .sidenav-main #slide-out > li.bold > a.collapsible-header:after { left: 12px !important; right: auto !important; margin: 0 !important; float: none !important; position: absolute !important; content: 'keyboard_arrow_left' !important; } html[dir="rtl"] body .sidenav-main .sidenav li.active > a.collapsible-header:after, html[dir="rtl"] body .sidenav-main .sidenav li.open > a.collapsible-header:after, html[dir="rtl"] body #slide-out.rtl-side-navigation > li.active > a.collapsible-header:after, html[dir="rtl"] body #slide-out.rtl-side-navigation > li.open > a.collapsible-header:after { transform: rotate(-90deg) !important; } html[dir="rtl"] body.menu-collapse .sidenav-main .sidenav li > a.collapsible-header:after, html[dir="rtl"] body .sidenav-main.nav-collapsed .sidenav li > a.collapsible-header:after { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } html[dir="rtl"] .widget-card, html[dir="rtl"] .dashboard-widget, html[dir="rtl"] .dashboard-grid, html[dir="rtl"] .dashboard-toolbar, html[dir="rtl"] .toolbar-actions, html[dir="rtl"] .widget-header, html[dir="rtl"] .widget-title-row, html[dir="rtl"] .widget-actions-row, html[dir="rtl"] .aging-layout, html[dir="rtl"] .legend-row, html[dir="rtl"] .widget-picker, html[dir="rtl"] .picker-header, html[dir="rtl"] .widget-picker-actions, html[dir="rtl"] .getting-started-panel, html[dir="rtl"] .gs-panel-header, html[dir="rtl"] .gs-setup-shell, html[dir="rtl"] .gs-detail, html[dir="rtl"] .gs-detail-main, html[dir="rtl"] .gs-footer-actions { direction: rtl !important; } html[dir="rtl"] .dashboard-toolbar h4, html[dir="rtl"] .widget-title, html[dir="rtl"] .widget-sublabel, html[dir="rtl"] .picker-desc, html[dir="rtl"] .gs-title-block, html[dir="rtl"] .gs-detail, html[dir="rtl"] .legend-row { text-align: start !important; } html[dir="rtl"] .big-number, html[dir="rtl"] .widget-card canvas, html[dir="rtl"] .dashboard-widget canvas { direction: ltr !important; unicode-bidi: plaintext !important; } html[dir="rtl"] .gs-detail-bullets li, html[dir="rtl"] .gs-why, html[dir="rtl"] .gs-learn-more { flex-direction: row !important; } @media only screen and (max-width: 992px) { html[dir="rtl"] body .app-shell-topbar, html[dir="rtl"] body .navbar-main .nav-wrapper { gap: 6px !important; padding-inline: 8px !important; } html[dir="rtl"] body .app-header-toggle { order: 0 !important; margin-inline-end: 0 !important; } html[dir="rtl"] body .global-search-shell { order: 2 !important; margin-left: 6px !important; margin-right: auto !important; min-width: 0 !important; } html[dir="rtl"] body .app-topbar-actions { order: 3 !important; margin-right: 0 !important; margin-left: 0 !important; } } @media only screen and (max-width: 600px) { html[dir="rtl"] body .notification-dropdown-panel, html[dir="rtl"] body .profile-dropdown-panel { left: 12px !important; right: 12px !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } } /* ===================================================================== RTL FINAL PATCH — keep this block last for shell/mobile/report fixes. ===================================================================== */ html[dir="rtl"] body button#sidebarCreateToggle.header-create-btn, html[dir="rtl"] body .header-create-btn { background: var(--sm-primary-soft, #eaf6fd) !important; border: 1px solid var(--sm-primary-border, #b7def6) !important; color: var(--sm-primary-text, #1789d6) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important; height: 32px !important; min-height: 32px !important; line-height: 1 !important; } html[dir="rtl"] body button#sidebarCreateToggle.header-create-btn:hover, html[dir="rtl"] body .header-create-btn:hover, html[dir="rtl"] body button#sidebarCreateToggle.header-create-btn[aria-expanded="true"] { background: var(--sm-primary-bg, #2098e8) !important; border-color: var(--sm-primary-bg, #2098e8) !important; color: #fff !important; } html[dir="rtl"] body #sidebarCreatePanel.sidebar-create-panel { position: fixed !important; right: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; width: min(720px, calc(100vw - 24px)) !important; min-width: min(720px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 72px) !important; overflow: auto !important; z-index: 10020 !important; } @media only screen and (max-width: 760px) { html[dir="rtl"] body #sidebarCreatePanel.sidebar-create-panel { width: calc(100vw - 24px) !important; min-width: 0 !important; grid-template-columns: 1fr !important; padding: 16px !important; } } html[dir="rtl"] body .page-topbar .app-topbar-actions > li, html[dir="rtl"] body .page-topbar .app-topbar-actions > li > a, html[dir="rtl"] body .page-topbar .app-topbar-actions .header-create-wrap, html[dir="rtl"] body .page-topbar .app-topbar-actions .header-create-btn, html[dir="rtl"] body .page-topbar .help-launcher-btn, html[dir="rtl"] body .page-topbar .ai-launcher-btn { align-items: center !important; justify-content: center !important; align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; transform: none !important; line-height: 1 !important; } html[dir="rtl"] body .page-topbar .ai-launcher-btn .ai-launcher-orb { width: 30px !important; height: 30px !important; min-width: 30px !important; } html[dir="rtl"] body .brand-sidebar .logo-wrapper { justify-content: space-between !important; } html[dir="rtl"] body .brand-sidebar .brand-logo { order: 0 !important; flex: 1 1 auto !important; } html[dir="rtl"] body .brand-sidebar .sidenav-brand-toggler, html[dir="rtl"] body .brand-sidebar .navbar-toggler { order: 9 !important; margin-right: auto !important; margin-left: 0 !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .brand-logo, html[dir="rtl"] body aside.sidenav-main.nav-collapsed.rtl-sidenav-main .brand-logo { display: none !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .logo-wrapper, html[dir="rtl"] body aside.sidenav-main.nav-collapsed.rtl-sidenav-main .logo-wrapper { justify-content: center !important; padding-right: 0 !important; padding-left: 0 !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .sidenav-brand-toggler, html[dir="rtl"] body aside.sidenav-main.nav-collapsed.rtl-sidenav-main .sidenav-brand-toggler { margin: 0 !important; } html[dir="rtl"] body.menu-collapse .sidenav-main .sidenav .menu-title, html[dir="rtl"] body .sidenav-main.nav-collapsed .sidenav .menu-title, html[dir="rtl"] body.menu-collapse .sidenav-main .sidenav li > a > span:not(.material-icons), html[dir="rtl"] body .sidenav-main.nav-collapsed .sidenav li > a > span:not(.material-icons), html[dir="rtl"] body.menu-collapse .sidenav-main .sidenav li > a.collapsible-header:after, html[dir="rtl"] body .sidenav-main.nav-collapsed .sidenav li > a.collapsible-header:after { display: none !important; opacity: 0 !important; visibility: hidden !important; } html[dir="rtl"] body.menu-collapse .sidenav-main .sidenav li > a, html[dir="rtl"] body .sidenav-main.nav-collapsed .sidenav li > a { width: 64px !important; min-width: 64px !important; padding: 0 !important; justify-content: center !important; } html[dir="rtl"] body:not(.menu-collapse) aside.sidenav-main.rtl-sidenav-main:not(.nav-collapsed) .sidenav .menu-title, html[dir="rtl"] body:not(.menu-collapse) aside.sidenav-main.rtl-sidenav-main:not(.nav-collapsed) .sidenav li > a > span:not(.material-icons) { display: inline-block !important; opacity: 1 !important; visibility: visible !important; } @media only screen and (max-width: 992px) { html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.nav-collapsed.rtl-sidenav-main { width: 260px !important; max-width: 86vw !important; height: 100vh !important; padding-top: 0 !important; background: transparent !important; border-left: 0 !important; pointer-events: none !important; transform: none !important; box-shadow: none !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 260px !important; max-width: 86vw !important; height: 100vh !important; background: #fff !important; border-left: 1px solid #ececec !important; box-shadow: -8px 0 24px rgba(15,23,42,.16) !important; transform: translateX(105%) !important; transition: transform .25s ease !important; pointer-events: auto !important; overflow-y: auto !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation.open, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed.open, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned.open { transform: translateX(0) !important; } html[dir="rtl"] body #main, html[dir="rtl"] body .navbar .navbar-main, html[dir="rtl"] body .navbar-main, html[dir="rtl"] body footer { padding-right: 0 !important; padding-left: 0 !important; } } /* ===================================================================== RTL SHELL FINAL POLISH — absolute last rules for sidebar parity, mobile drawer behavior, and topbar/search alignment. ===================================================================== */ @media only screen and (min-width: 993px) { html[dir="rtl"] body .app-header-toggle.hide-on-large-only, html[dir="rtl"] body [data-sidebar-toggle-mobile] { display: none !important; } html[dir="rtl"] body .brand-sidebar .logo-wrapper { direction: ltr !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; min-height: 52px !important; padding-left: 8px !important; padding-right: 14px !important; } html[dir="rtl"] body .brand-sidebar .sidenav-brand-toggler, html[dir="rtl"] body .brand-sidebar .navbar-toggler { order: 0 !important; margin: 0 !important; flex: 0 0 36px !important; width: 36px !important; height: 36px !important; } html[dir="rtl"] body .brand-sidebar .brand-logo { order: 1 !important; flex: 0 1 auto !important; margin-left: auto !important; margin-right: 0 !important; min-width: 0 !important; direction: rtl !important; justify-content: flex-end !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed { width: 64px !important; overflow: hidden !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main:hover, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main.rtl-hover-expanded, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed:hover, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed.rtl-hover-expanded { width: 225px !important; overflow: visible !important; box-shadow: -8px 0 24px rgba(15, 23, 42, .12) !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main:hover .logo-wrapper, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main.rtl-hover-expanded .logo-wrapper, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed:hover .logo-wrapper, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed.rtl-hover-expanded .logo-wrapper { justify-content: flex-start !important; padding-left: 8px !important; padding-right: 14px !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main:hover .brand-logo, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main.rtl-hover-expanded .brand-logo, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed:hover .brand-logo, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed.rtl-hover-expanded .brand-logo, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main:hover .sidenav .menu-title, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main.rtl-hover-expanded .sidenav .menu-title, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed:hover .sidenav .menu-title, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed.rtl-hover-expanded .sidenav .menu-title, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main:hover .sidenav li > a > span:not(.material-icons), html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main.rtl-hover-expanded .sidenav li > a > span:not(.material-icons), html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed:hover .sidenav li > a > span:not(.material-icons), html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed.rtl-hover-expanded .sidenav li > a > span:not(.material-icons) { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main:hover .sidenav li > a, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main.rtl-hover-expanded .sidenav li > a, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed:hover .sidenav li > a, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed.rtl-hover-expanded .sidenav li > a { width: auto !important; min-width: 0 !important; justify-content: flex-start !important; padding: 0 38px 0 14px !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main:hover .sidenav li > a > i.material-icons, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main.rtl-hover-expanded .sidenav li > a > i.material-icons, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed:hover .sidenav li > a > i.material-icons, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed.rtl-hover-expanded .sidenav li > a > i.material-icons { margin-left: 12px !important; margin-right: 0 !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main:hover .sidenav li > a.collapsible-header:after, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main.rtl-hover-expanded .sidenav li > a.collapsible-header:after, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed:hover .sidenav li > a.collapsible-header:after, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed.rtl-hover-expanded .sidenav li > a.collapsible-header:after { display: block !important; opacity: 1 !important; visibility: visible !important; left: 12px !important; right: auto !important; transform: none !important; } } @media only screen and (max-width: 992px) { html[dir="rtl"] body .sidenav-main > .brand-sidebar, html[dir="rtl"] body .sidenav-brand-toggler, html[dir="rtl"] body .app-header-brand .navbar-toggler { display: none !important; } html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed { width: 0 !important; max-width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; pointer-events: none !important; } html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.mobile-open { width: 260px !important; max-width: 86vw !important; height: 100vh !important; pointer-events: auto !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 260px !important; max-width: 86vw !important; height: 100vh !important; margin: 0 !important; transform: translateX(100%) !important; visibility: hidden !important; background: #fff !important; border-left: 1px solid #ececec !important; box-shadow: none !important; transition: transform .25s ease, visibility .25s ease, box-shadow .25s ease !important; overflow-y: auto !important; overflow-x: hidden !important; pointer-events: auto !important; z-index: 9999 !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation.open, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed.open, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned.open { transform: translateX(0) !important; visibility: visible !important; box-shadow: -12px 0 30px rgba(15, 23, 42, .18) !important; } html[dir="rtl"] body .app-shell-topbar, html[dir="rtl"] body .navbar-main .nav-wrapper { min-width: 0 !important; gap: 6px !important; } /* Anchor fixed nav to full viewport width in RTL mobile */ html[dir="rtl"] body .navbar-main, html[dir="rtl"] body .navbar .navbar-main { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } } html[dir="rtl"] body .page-topbar .app-topbar-actions, html[dir="rtl"] body .page-topbar .app-topbar-actions > li, html[dir="rtl"] body .page-topbar .app-topbar-actions > li > a, html[dir="rtl"] body .page-topbar .help-launcher-btn, html[dir="rtl"] body .page-topbar .ai-launcher-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; line-height: 1 !important; transform: none !important; } html[dir="rtl"] body .page-topbar .app-topbar-actions > li > a, html[dir="rtl"] body .page-topbar .ai-launcher-btn { min-width: 36px !important; height: 36px !important; padding-top: 0 !important; padding-bottom: 0 !important; } html[dir="rtl"] body .page-topbar .ai-launcher-btn .ai-launcher-orb { width: 30px !important; height: 30px !important; min-width: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html[dir="rtl"] body .page-topbar .ai-launcher-btn .ai-launcher-orb .material-icons, html[dir="rtl"] body .page-topbar .app-topbar-actions > li > a > i.material-icons { height: auto !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html[dir="rtl"] body .global-search-clear-btn, html[dir="rtl"] body .global-search-shell.is-open .global-search-clear-btn { right: auto !important; left: 12px !important; } html[dir="rtl"] body .global-search-shortcut, html[dir="rtl"] body .global-search-shell.is-open .global-search-shortcut { right: auto !important; left: 42px !important; } html[dir="rtl"] body .global-search-shell.is-open .gs-input { padding-right: 48px !important; padding-left: 54px !important; } html[dir="rtl"] .dtl-page-layout, html[dir="rtl"] .dtl-section, html[dir="rtl"] .bill-filter-bar, html[dir="rtl"] .item-stats-card, html[dir="rtl"] .cd-stats-card, html[dir="rtl"] .cd-filter-row, html[dir="rtl"] .cd-filters-wrap { direction: rtl !important; } html[dir="rtl"] .dtl-filter-group, html[dir="rtl"] .bill-filter-group, html[dir="rtl"] .cd-filters-wrap { margin-left: 0 !important; margin-right: auto !important; } @media only screen and (max-width: 900px) { html[dir="rtl"] .bill-filter-bar, html[dir="rtl"] .dtl-filter-bar, html[dir="rtl"] .cd-filter-row { align-items: stretch !important; } html[dir="rtl"] .bill-filter-group, html[dir="rtl"] .dtl-filter-group, html[dir="rtl"] .cd-filters-wrap { width: 100% !important; margin-right: 0 !important; flex-wrap: wrap !important; } } html[dir="rtl"] .report-center, html[dir="rtl"] .report-header, html[dir="rtl"] .report-header-left, html[dir="rtl"] .report-header-right, html[dir="rtl"] .report-section, html[dir="rtl"] .section-title, html[dir="rtl"] .report-grid, html[dir="rtl"] .report-card, html[dir="rtl"] .report-modal, html[dir="rtl"] .report-modal-header, html[dir="rtl"] .report-modal-body, html[dir="rtl"] .report-modal-footer { direction: rtl !important; } html[dir="rtl"] .report-header-left, html[dir="rtl"] .report-header-left h4, html[dir="rtl"] .report-subtitle, html[dir="rtl"] .report-card-body, html[dir="rtl"] .report-card-title, html[dir="rtl"] .report-card-desc, html[dir="rtl"] .report-modal-body label, html[dir="rtl"] .no-results { text-align: start !important; } html[dir="rtl"] .report-count.badge { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .report-search-box input { direction: rtl !important; text-align: start !important; } html[dir="rtl"] .report-viewer, html[dir="rtl"] .report-viewer-header, html[dir="rtl"] .report-viewer-header-left, html[dir="rtl"] .report-viewer-header-right, html[dir="rtl"] .report-filters, html[dir="rtl"] .report-filters .row, html[dir="rtl"] .report-toolbar, html[dir="rtl"] .report-toolbar-left, html[dir="rtl"] .report-toolbar-right, html[dir="rtl"] .report-pagination, html[dir="rtl"] .report-modal, html[dir="rtl"] .report-modal-header, html[dir="rtl"] .report-modal-body, html[dir="rtl"] .report-modal-footer, html[dir="rtl"] .report-checkbox-group { direction: rtl !important; } html[dir="rtl"] .report-filters .row { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; } html[dir="rtl"] .report-filters .row > .col { float: none !important; margin-left: 0 !important; right: auto !important; left: auto !important; } html[dir="rtl"] .report-filters label, html[dir="rtl"] .report-filter-input, html[dir="rtl"] .report-modal-body label, html[dir="rtl"] .report-modal-body textarea, html[dir="rtl"] .report-modal-body input, html[dir="rtl"] .report-period-label, html[dir="rtl"] .report-empty, html[dir="rtl"] .report-loading, html[dir="rtl"] .report-table th, html[dir="rtl"] .report-table td { text-align: start !important; } html[dir="rtl"] .report-table .text-right, html[dir="rtl"] .report-table td.text-right, html[dir="rtl"] .report-table th.text-right { text-align: left !important; direction: ltr !important; unicode-bidi: plaintext !important; } html[dir="rtl"] .report-table thead th .sort-indicator { margin-left: 0 !important; margin-right: 2px !important; } html[dir="rtl"] .report-toolbar { flex-direction: row-reverse !important; } html[dir="rtl"] .view-type-group, html[dir="rtl"] .zoom-group { border-right: 0 !important; border-left: 1px solid #e0e0e0 !important; padding-right: 0 !important; padding-left: 8px !important; margin-right: 0 !important; margin-left: 4px !important; } html[dir="rtl"] .dropdown-wrapper .dropdown-menu { right: auto !important; left: 0 !important; direction: rtl !important; text-align: start !important; } html[dir="rtl"] .col-visibility-menu .col-vis-item, html[dir="rtl"] .dropdown-wrapper .dropdown-menu a, html[dir="rtl"] .report-checkbox { flex-direction: row !important; text-align: start !important; } html[dir="rtl"] .report-pagination-btns { direction: rtl !important; } html[dir="rtl"] .report-viewer-header-left .back-link .material-icons { transform: scaleX(-1) !important; } html[dir="rtl"] .report-filters .select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 8px !important; padding-left: 28px !important; text-align: start !important; direction: rtl !important; } html[dir="rtl"] .report-filters .select2-container--default .select2-selection--single .select2-selection__arrow { right: auto !important; left: 1px !important; } .select2-selection__arrow { border-left: none !important; border-right: 1px solid #999; height: 32px !important; } @media only screen and (min-width: 993px) { html[dir="rtl"] body .app-header-toggle, html[dir="rtl"] body .app-header-toggle.hide-on-large-only, html[dir="rtl"] body .app-header-brand .navbar-toggler, html[dir="rtl"] body [data-sidebar-toggle-mobile] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } html[dir="rtl"] body .brand-sidebar .logo-wrapper { justify-content: flex-start !important; gap: 8px !important; } html[dir="rtl"] body .brand-sidebar .sidenav-brand-toggler, html[dir="rtl"] body .brand-sidebar .navbar-toggler.hide-on-med-and-down.sidenav-brand-toggler { order: 0 !important; margin-left: 0 !important; margin-right: 0 !important; flex: 0 0 36px !important; } html[dir="rtl"] body .brand-sidebar .brand-logo { order: 1 !important; flex: 1 1 auto !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; } } html[dir="rtl"] .star-icon { margin-right: auto !important; margin-left: 0 !important; } @media only screen and (max-width: 700px) { html[dir="rtl"] .report-header, html[dir="rtl"] .report-header-right, html[dir="rtl"] .report-search-box { width: 100% !important; } html[dir="rtl"] .report-search-box { min-width: 0 !important; } html[dir="rtl"] .report-grid { grid-template-columns: 1fr !important; } } /* ===================================================================== RTL HEADER/SIDENAV LOCK — absolute final rules. LTR is untouched. ===================================================================== */ html[dir="rtl"] body .rtl-sidenav-overlay { display: none !important; position: fixed !important; inset: 0 !important; background: rgba(15, 23, 42, .38) !important; z-index: 9997 !important; } html[dir="rtl"] body .rtl-sidenav-overlay.open { display: block !important; } html[dir="rtl"] body.rtl-mobile-sidenav-open { overflow: hidden !important; } html[dir="rtl"] body .page-topbar .app-topbar-actions { display: flex !important; align-items: center !important; gap: 6px !important; height: 52px !important; } html[dir="rtl"] body .page-topbar .app-topbar-actions > li, html[dir="rtl"] body .page-topbar .app-topbar-actions > li > a, html[dir="rtl"] body .page-topbar .app-topbar-actions > li > button, html[dir="rtl"] body .page-topbar .app-header-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 34px !important; min-height: 34px !important; line-height: 1 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; align-self: center !important; vertical-align: middle !important; transform: none !important; } html[dir="rtl"] body .page-topbar .app-topbar-actions > li > a > i.material-icons, html[dir="rtl"] body .page-topbar .app-header-toggle > i.material-icons, html[dir="rtl"] body .page-topbar #notificationBellBtn > i.material-icons { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 34px !important; line-height: 34px !important; margin: 0 !important; transform: none !important; } html[dir="rtl"] body button#sidebarCreateToggle.header-create-btn, html[dir="rtl"] body .header-create-btn { background: var(--sm-primary-soft, #eaf6fd) !important; border: 1px solid var(--sm-primary-border, #b7def6) !important; color: var(--sm-primary-text, #1789d6) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important; min-width: 34px !important; } html[dir="rtl"] body .header-create-btn i.material-icons { color: inherit !important; } html[dir="rtl"] body button#sidebarCreateToggle.header-create-btn:hover, html[dir="rtl"] body .header-create-btn:hover, html[dir="rtl"] body button#sidebarCreateToggle.header-create-btn[aria-expanded="true"], html[dir="rtl"] body .header-create-btn[aria-expanded="true"] { background: var(--sm-primary-bg, #2098e8) !important; border-color: var(--sm-primary-bg, #2098e8) !important; color: #fff !important; } html[dir="rtl"] body button#sidebarCreateToggle.header-create-btn:hover i.material-icons, html[dir="rtl"] body button#sidebarCreateToggle.header-create-btn[aria-expanded="true"] i.material-icons { color: #fff !important; } html[dir="rtl"] body #sidebarCreatePanel.sidebar-create-panel { position: fixed !important; right: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; z-index: 10020 !important; width: min(720px, calc(100vw - 24px)) !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 76px) !important; overflow: auto !important; direction: rtl !important; text-align: start !important; } html[dir="rtl"] body #sidebarCreatePanel.sidebar-create-panel .sidebar-create-panel-header, html[dir="rtl"] body #sidebarCreatePanel.sidebar-create-panel .sidebar-create-links a { flex-direction: row !important; text-align: start !important; } @media only screen and (max-width: 760px) { html[dir="rtl"] body #sidebarCreatePanel.sidebar-create-panel { width: calc(100vw - 24px) !important; grid-template-columns: 1fr !important; padding: 16px !important; } } @media only screen and (min-width: 993px) { html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main { width: 225px !important; transform: translateX(0) !important; background: #fff !important; pointer-events: auto !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed { width: 64px !important; } html[dir="rtl"] body .brand-sidebar .logo-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding-right: 14px !important; padding-left: 8px !important; } html[dir="rtl"] body .brand-sidebar .brand-logo { order: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; justify-content: flex-start !important; } html[dir="rtl"] body .brand-sidebar .sidenav-brand-toggler, html[dir="rtl"] body .brand-sidebar .navbar-toggler { order: 9 !important; margin-right: auto !important; margin-left: 0 !important; flex: 0 0 auto !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .brand-logo, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed .brand-logo, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .sidenav .menu-title, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed .sidenav .menu-title, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .sidenav li > a > span:not(.material-icons), html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed .sidenav li > a > span:not(.material-icons), html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .sidenav li > a.collapsible-header:after, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed .sidenav li > a.collapsible-header:after { display: none !important; opacity: 0 !important; visibility: hidden !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .logo-wrapper, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed .logo-wrapper { justify-content: center !important; padding-right: 0 !important; padding-left: 0 !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .sidenav-brand-toggler, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed .sidenav-brand-toggler { margin: 0 !important; } html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main .sidenav li > a, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed .sidenav li > a { width: 64px !important; min-width: 64px !important; padding: 0 !important; justify-content: center !important; } html[dir="rtl"] body.menu-collapse #main, html[dir="rtl"] body #main.main-full, html[dir="rtl"] body.menu-collapse .navbar .navbar-main, html[dir="rtl"] body.menu-collapse .navbar-main { padding-right: 64px !important; padding-left: 0 !important; } } @media only screen and (max-width: 992px) { html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body.menu-collapse aside.sidenav-main.rtl-sidenav-main, html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.nav-collapsed { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 260px !important; max-width: 86vw !important; height: 100vh !important; padding-top: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; pointer-events: none !important; z-index: 9998 !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 260px !important; max-width: 86vw !important; height: 100vh !important; margin: 0 !important; background: #fff !important; border-left: 1px solid #ececec !important; border-right: 0 !important; box-shadow: -12px 0 30px rgba(15, 23, 42, .18) !important; transform: translateX(105%) !important; transition: transform .25s ease !important; overflow-y: auto !important; pointer-events: auto !important; z-index: 9999 !important; } html[dir="rtl"] body aside.sidenav-main.rtl-sidenav-main.mobile-open { pointer-events: auto !important; } html[dir="rtl"] body #slide-out.rtl-side-navigation.open, html[dir="rtl"] body #slide-out.rtl-side-navigation.sidenav-fixed.open, html[dir="rtl"] body #slide-out.rtl-side-navigation.right-aligned.open { transform: translateX(0) !important; } html[dir="rtl"] body #main, html[dir="rtl"] body .navbar .navbar-main, html[dir="rtl"] body .navbar-main, html[dir="rtl"] body footer { padding-right: 0 !important; padding-left: 0 !important; } } /* ===================================================================== RTL MOBILE TOPBAR – profile/actions centering fix (small screens) Mirrors the LTR centering changes; keeps the profile icon inside the page-topbar boundary and aligns all items with balanced edge gaps. ===================================================================== */ @media only screen and (max-width: 992px) { html[dir="rtl"] body .page-topbar { height: 52px !important; overflow: visible !important; } html[dir="rtl"] body .navbar-main .nav-wrapper, html[dir="rtl"] body .app-shell-topbar { display: flex !important; flex-direction: row !important; align-items: center !important; padding: 0 8px !important; gap: 6px !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; box-sizing: border-box !important; overflow: visible !important; flex-wrap: nowrap !important; } html[dir="rtl"] body ul.app-topbar-actions, html[dir="rtl"] body .app-topbar-actions, html[dir="rtl"] body .navbar-list.right.app-topbar-actions { float: none !important; position: static !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; order: 4 !important; flex: 0 0 auto !important; margin-left: 0 !important; margin-right: auto !important; gap: 4px !important; height: 52px !important; flex-wrap: nowrap !important; } html[dir="rtl"] body ul.app-topbar-actions > li { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 52px !important; float: none !important; } html[dir="rtl"] body ul.app-topbar-actions > li > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; min-width: 32px !important; padding: 0 4px !important; } html[dir="rtl"] body .app-header-toggle, html[dir="rtl"] body .app-header-toggle.hide-on-large-only, html[dir="rtl"] body [data-sidebar-toggle-mobile] { order: 0 !important; flex: 0 0 auto !important; align-self: center !important; margin-left: 0 !important; margin-right: 0 !important; } html[dir="rtl"] body .global-search-shell { order: 2 !important; flex: 1 1 0 !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ===================================================================== RTL ORDER PAGES FINAL POLISH Scoped to html[dir="rtl"] so English/LTR remains untouched. ===================================================================== */ html[dir="rtl"], html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button, html[dir="rtl"] a, html[dir="rtl"] table, html[dir="rtl"] .select2-container, html[dir="rtl"] .dataTables_wrapper { font-family: var(--sm-font-arabic, "Noto Kufi Arabic", "Noto Sans Arabic", "IBM Plex Sans Arabic", "Cairo", "Tajawal", "Segoe UI", "Tahoma", "Inter", sans-serif) !important; } html[dir="rtl"] .modal:not(.modal-xlarge):not(.email-modal), html[dir="rtl"] .rm-snooze-modal, html[dir="rtl"] .custom-confirm-box { direction: rtl !important; text-align: start !important; } html[dir="rtl"] .modal:not(.modal-xlarge):not(.email-modal) .modal-header, html[dir="rtl"] .rm-modal-header { flex-direction: row !important; } html[dir="rtl"] .modal:not(.modal-xlarge):not(.email-modal) .modal-close-wrap, html[dir="rtl"] .rm-modal-close { margin-left: 0 !important; margin-right: auto !important; } html[dir="rtl"] .modal:not(.modal-xlarge):not(.email-modal) .modal-footer, html[dir="rtl"] .rm-modal-footer, html[dir="rtl"] .custom-confirm-actions { justify-content: flex-start !important; } html[dir="rtl"] .dtl-dropdown-menu, html[dir="rtl"] .btn-dropdown, html[dir="rtl"] .dropdown-menu, html[dir="rtl"] .dt-button-collection { direction: rtl !important; text-align: start !important; } html[dir="rtl"] .dtl-dropdown-menu li a, html[dir="rtl"] .btn-dropdown li a, html[dir="rtl"] .btn-dropdown li button, html[dir="rtl"] .dropdown-menu li a, html[dir="rtl"] .dropdown-menu li button { text-align: start !important; justify-content: flex-start !important; } html[dir="rtl"] .dataTables_wrapper .dt-header, html[dir="rtl"] .dataTables_wrapper > .row:first-child { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; direction: rtl !important; } html[dir="rtl"] .dataTables_wrapper .dataTables_filter, html[dir="rtl"] .dataTables_wrapper .search-area-wrap { order: 1 !important; flex: 0 1 auto !important; margin-right: 0 !important; margin-left: 0 !important; text-align: right !important; float: none !important; } html[dir="rtl"] .dataTables_wrapper .dataTables_length, html[dir="rtl"] .dataTables_wrapper .filter-wrapper, html[dir="rtl"] .dataTables_wrapper .cd-filters-wrap, html[dir="rtl"] .dataTables_wrapper .bill-filter-group, html[dir="rtl"] .dataTables_wrapper .dtl-filter-group, html[dir="rtl"] .dataTables_wrapper .order-status-wrap { order: 2 !important; flex: 0 1 auto !important; margin-right: 0 !important; margin-left: 0 !important; text-align: right !important; float: none !important; } html[dir="rtl"] .dataTables_wrapper .dt-buttons, html[dir="rtl"] .dataTables_wrapper .right-align:has(.dt-buttons) { order: 9 !important; margin-right: auto !important; margin-left: 0 !important; text-align: left !important; float: none !important; } html[dir="rtl"] .dataTables_wrapper .dataTables_filter input, html[dir="rtl"] .dataTables_wrapper input[type="search"], html[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]):not([type="date"]):not([type="number"]), html[dir="rtl"] textarea, html[dir="rtl"] select { padding-left: 12px !important; } html[dir="rtl"] .dataTables_filter::before { right: 10px !important; left: auto !important; } html[dir="rtl"] .dataTables_filter input, html[dir="rtl"] .dataTables_wrapper .dataTables_filter input, html[dir="rtl"] .dataTables_wrapper input[type="search"] { direction: rtl !important; text-align: right !important; padding-right: 38px !important; padding-left: 12px !important; } html[dir="rtl"] select, html[dir="rtl"] .order-status-filter { background-position: left 8px center !important; } html[dir="rtl"] .question-mark, html[dir="rtl"] .question-icon, html[dir="rtl"] .help-icon, html[dir="rtl"] .field-help, html[dir="rtl"] .help-tooltip, html[dir="rtl"] .material-icons.help, html[dir="rtl"] .material-icons.help_outline { transform: none !important; direction: rtl !important; unicode-bidi: plaintext !important; margin-right: 6px !important; margin-left: 0 !important; } html[dir="rtl"] .gs-detail-actions { justify-content: flex-start !important; } /* Order index header: title stays on the right, actions move to the left. */ html[dir="rtl"] .middle-nav > .float-left { order: 1 !important; float: none !important; text-align: right !important; } html[dir="rtl"] .middle-nav > .float-right, html[dir="rtl"] .middle-nav > .btns-group { order: 2 !important; float: none !important; margin-right: auto !important; margin-left: 0 !important; text-align: left !important; } html[dir="rtl"] .middle-nav .btn-group-custom, html[dir="rtl"] .middle-nav .btns-group { justify-content: flex-end !important; flex-direction: row !important; direction: rtl !important; } html[dir="rtl"] .middle-nav > .float-right .btn-group-custom { margin-right: auto !important; margin-left: 0 !important; width: 100% !important; } html[dir="rtl"] .middle-nav .btns-import { margin-right: 0 !important; margin-left: 8px !important; } /* Order index New Order split button: blue, joined, only outside corners rounded. */ html[dir="rtl"] .middle-nav .btn-group-custom .btns-group-wrapper .btns-primary, html[dir="rtl"] .middle-nav .btn-group-custom .btns-group-wrapper .btns-icon-side { background: var(--sm-primary-bg, #2098e8) !important; border-color: var(--sm-primary-bg, #2098e8) !important; color: #fff !important; } html[dir="rtl"] .middle-nav .btn-group-custom .btns-group-wrapper .btns-primary:hover, html[dir="rtl"] .middle-nav .btn-group-custom .btns-group-wrapper .btns-icon-side:hover { background: var(--sm-primary-text, #1789d6) !important; border-color: var(--sm-primary-text, #1789d6) !important; color: #fff !important; } html[dir="rtl"] .middle-nav .btn-group-custom .btns-group-wrapper .btns-primary .material-icons, html[dir="rtl"] .middle-nav .btn-group-custom .btns-group-wrapper .btns-icon-side .material-icons { color: #fff !important; } html[dir="rtl"] .middle-nav .btns-group-wrap, html[dir="rtl"] .middle-nav .btns-group-wrapper { direction: rtl !important; display: inline-flex !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; box-shadow: none !important; } html[dir="rtl"] .middle-nav .btns-group-wrap > .btns-text-side, html[dir="rtl"] .middle-nav .btns-group-wrapper > .btns-text-side, html[dir="rtl"] .middle-nav .btns-group-wrap > a.btns, html[dir="rtl"] .middle-nav .btns-group-wrapper > a.btns { border-radius: 0 var(--sm-button-radius, 8px) var(--sm-button-radius, 8px) 0 !important; border-left: 0 !important; border-right-width: 1px !important; margin: 0 !important; } html[dir="rtl"] .middle-nav .btns-group-wrap .btns-icon-side, html[dir="rtl"] .middle-nav .btns-group-wrapper .btns-icon-side { border-radius: var(--sm-button-radius, 8px) 0 0 var(--sm-button-radius, 8px) !important; border-right: 1px solid rgba(255,255,255,.25) !important; border-left-width: 1px !important; margin: 0 !important; } /* Customer / Supplier create+edit header holds two INDEPENDENT actions (Cancel, Save), not a split button — the rules above would glue them together and half-square the Cancel button. Mirrors the .supplier-nav-wrap opt-out in site.css. */ html[dir="rtl"] .middle-nav .supplier-nav-wrap { gap: 10px !important; } html[dir="rtl"] .middle-nav .supplier-nav-wrap > .btns, html[dir="rtl"] .middle-nav .supplier-nav-wrap > a.btns, html[dir="rtl"] .middle-nav .supplier-nav-wrap > button.btns, html[dir="rtl"] .middle-nav .supplier-nav-wrap > .btns-text-side { border-radius: var(--sm-button-radius, 8px) !important; border-left-width: 1px !important; border-right-width: 1px !important; } /* Split-button menus: fixed positioning is set by JS; these keep the menu visible and polished. */ html[dir="rtl"] .btn-group-container > .btn-dropdown { position: fixed !important; right: auto !important; bottom: auto !important; max-width: calc(100vw - 16px) !important; } html[dir="rtl"] .btn-group-container.open > .btn-dropdown { display: block !important; visibility: visible !important; direction: rtl !important; text-align: right !important; min-width: 220px !important; border-radius: var(--sm-dropdown-radius, 12px) !important; z-index: 10050 !important; } html[dir="rtl"] .btn-dropdown li a, html[dir="rtl"] .btn-dropdown li button { justify-content: flex-start !important; text-align: right !important; direction: rtl !important; } /* Create/Edit forms: mirror the grid horizontally while keeping field order logical. */ html[dir="rtl"] .row-container, html[dir="rtl"] .invoice-subtotal, html[dir="rtl"] .item-wrapper, html[dir="rtl"] .table-actions { direction: rtl !important; } html[dir="rtl"] .row-container > .col, html[dir="rtl"] .invoice-subtotal > .col { float: right !important; } html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] { float: left !important; } html[dir="rtl"] .invoice-subtotal .compact-right, html[dir="rtl"] .invoice-subtotal [style*="text-align: right"] { text-align: left !important; } html[dir="rtl"] .invoice-subtotal .discount-field { justify-content: flex-start !important; } html[dir="rtl"] .invoice-subtotal .base-currency-row, html[dir="rtl"] .attachment-title { direction: rtl !important; } /* Form icons and input padding in RTL. */ html[dir="rtl"] .search-area .person-icon, html[dir="rtl"] .input-container .person-icon { left: auto !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html[dir="rtl"] .search-area .close-icon, html[dir="rtl"] .search-area .terms-close-icon { right: auto !important; left: 1px !important; top: 50% !important; transform: translateY(-50%) !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html[dir="rtl"] .search-area .term-gear-icon { right: auto !important; left: 42px !important; top: 50% !important; transform: translateY(-50%) !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html[dir="rtl"] .input-pad, html[dir="rtl"] #PaymentTermName { padding-left: 70px !important; padding-right: 33px !important; } html[dir="rtl"] .normal-input, html[dir="rtl"] .textarea-general, html[dir="rtl"] .input-table, html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered { text-align: right !important; direction: rtl !important; } html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="date"], html[dir="rtl"] .price, html[dir="rtl"] .quantity, html[dir="rtl"] .discount, html[dir="rtl"] .sub-amount, html[dir="rtl"] .compact-value, html[dir="rtl"] .total, html[dir="rtl"] .totaltax, html[dir="rtl"] .grandtotal { direction: ltr !important; unicode-bidi: plaintext !important; } html[dir="rtl"] input[type="date"] { text-align: right !important; padding-left: 38px !important; padding-right: 12px !important; position: relative !important; } html[dir="rtl"] input[type="date"]::-webkit-calendar-picker-indicator { position: absolute !important; right: auto !important; left: 10px !important; margin: 0 !important; opacity: 1 !important; display: block !important; } html[dir="rtl"] .invoice-subtotal .col.m4:first-child .upload-wrapper, html[dir="rtl"] .invoice-subtotal .col.m4:first-child .upload-box, html[dir="rtl"] .invoice-subtotal .col.m4:first-child textarea.note { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } html[dir="rtl"] .invoice-subtotal .col.m4:first-child .upload-wrapper { height: 96px !important; } html[dir="rtl"] .invoice-subtotal .col.m4:first-child textarea.note { min-height: 96px !important; } html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] .row { direction: rtl !important; } html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] .col.m6:first-child, html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] .col.s6:first-child { float: right !important; text-align: right !important; } html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] .col.m6:last-child, html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] .col.s6:last-child, html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] .compact-right, html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] [style*="text-align: right"] { float: left !important; text-align: left !important; } html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] h6, html[dir="rtl"] .invoice-subtotal .discount-left, html[dir="rtl"] .invoice-subtotal #ShippingCost { margin-right: 0 !important; margin-left: auto !important; text-align: right !important; } html[dir="rtl"] .empty-state-wrapper .es-center { font-family: "Noto Sans Arabic", "Segoe UI", "Tahoma", "Inter", sans-serif !important; text-align: right !important; } html[dir="rtl"] .empty-state-wrapper .es-center-title, html[dir="rtl"] .empty-state-wrapper .es-center-subtitle, html[dir="rtl"] .empty-state-wrapper .es-card h4, html[dir="rtl"] .empty-state-wrapper .es-card p { text-align: right !important; } html[dir="rtl"] .empty-state-wrapper .es-center-subtitle { margin-right: auto !important; margin-left: auto !important; } html[dir="rtl"] .empty-state-wrapper .es-card { text-align: right !important; } html[dir="rtl"] .empty-state-wrapper .es-actions-row { direction: rtl !important; display: flex !important; justify-content: center !important; width: 100% !important; margin-top: 4px !important; } html[dir="rtl"] .empty-state-wrapper .es-dropdown-menu { direction: rtl !important; text-align: right !important; } html[dir="rtl"] .empty-state-wrapper .es-dropdown-menu a { justify-content: flex-start !important; text-align: right !important; } html[dir="rtl"] .search-area, html[dir="rtl"] .input-container { position: relative !important; } html[dir="rtl"] .customer-field { display: flex !important; flex-direction: column !important; align-items: stretch !important; } html[dir="rtl"] .customer-field .search-area { min-height: 36px !important; } html[dir="rtl"] .search-area > .textcolor, html[dir="rtl"] .input-container > .textcolor, html[dir="rtl"] .add-customer, html[dir="rtl"] .add-terms { position: static !important; display: block !important; margin-top: 4px !important; } html[dir="rtl"] .customer-field .add-customer, html[dir="rtl"] .customer-field .field-validation-error, html[dir="rtl"] .customer-field .field-validation-valid, html[dir="rtl"] .customer-field .input-validation-error ~ .field-validation-error { min-height: 18px !important; line-height: 1.35 !important; } @media only screen and (min-width: 601px) { html[dir="rtl"] .middle-nav > .float-left { flex: 0 0 auto !important; width: auto !important; } html[dir="rtl"] .middle-nav > .float-right { width: auto !important; max-width: none !important; } } /* Autocomplete dropdowns: right edge anchors in JS; content reads naturally in RTL. */ html[dir="rtl"] #global-search-result { direction: rtl !important; text-align: right !important; } html[dir="rtl"] #global-search-result .gs-header-row, html[dir="rtl"] #global-search-result .gs-create-btn, html[dir="rtl"] #global-search-result .gs-item, html[dir="rtl"] #global-search-result .entity-list-item, html[dir="rtl"] #global-search-result .item-title-code, html[dir="rtl"] #global-search-result .acct-item { direction: rtl !important; text-align: right !important; } html[dir="rtl"] #global-search-result .entity-badge { margin-right: 0 !important; margin-left: 8px !important; } html[dir="rtl"] #global-search-result .price-part, html[dir="rtl"] #global-search-result .gs-meta { margin-right: auto !important; margin-left: 0 !important; } /* Inline table on invoice create/edit: preserve numbers but mirror lookup dropdown cells. */ html[dir="rtl"] #item-table, html[dir="rtl"] #item-table th, html[dir="rtl"] #item-table td { direction: rtl !important; } html[dir="rtl"] #item-table .itemcode, html[dir="rtl"] #item-table input[list-type="Account"], html[dir="rtl"] #item-table input[list-type="TaxAndTaxGroup"] { text-align: right !important; } @media only screen and (max-width: 600px) { html[dir="rtl"] .middle-nav > .float-left, html[dir="rtl"] .middle-nav > .float-right, html[dir="rtl"] .middle-nav > .btns-group { width: 100% !important; } html[dir="rtl"] .middle-nav .btn-group-custom, html[dir="rtl"] .middle-nav .btns-group { justify-content: flex-start !important; flex-wrap: wrap !important; } html[dir="rtl"] .row-container > .col, html[dir="rtl"] .invoice-subtotal > .col, html[dir="rtl"] .invoice-subtotal > .col[style*="float:right"] { float: none !important; } } .custom-confirm-title { text-align: right; } /* ===================================================================== RTL final shared polish: ONLY targeted fixes that don't break the existing layout/JS-driven dropdown behavior. The previous aggressive block forced position:fixed on every .dropdown-menu/.btn-dropdown which broke split-button and row action dropdowns; do NOT reintroduce. ===================================================================== */ /* Search input in RTL: keep the magnifier icon clear of typed text. */ html[dir="rtl"] body .dataTables_filter input[type="search"], html[dir="rtl"] body .dataTables_wrapper input[type="search"] { direction: rtl !important; text-align: right !important; padding-right: 38px !important; padding-left: 12px !important; } html[dir="rtl"] body .dataTables_filter::before, html[dir="rtl"] body .search-area-wrap .dataTables_filter::before { right: 10px !important; left: auto !important; } /* DataTables header: in RTL the Materialize row uses float:left for the search col and float:right for the buttons col. Flip the floats so the search appears on the right and buttons on the far left, while keeping them on the same row (no flex/order overrides that break wrapping). */ html[dir="rtl"] body .dataTables_wrapper .dt-header > .col.search-area-wrap, html[dir="rtl"] body .dataTables_wrapper > .row:first-child > .col.search-area-wrap { float: right !important; text-align: right !important; } html[dir="rtl"] body .dataTables_wrapper .dt-header > .col.right-align, html[dir="rtl"] body .dataTables_wrapper > .row:first-child > .col.right-align { float: left !important; text-align: left !important; } html[dir="rtl"] body .dataTables_wrapper .dt-buttons { text-align: left !important; } /* Top header global search spacing in RTL (icon vs typed text). */ html[dir="rtl"] body .gs-input { padding-right: 42px !important; padding-left: 56px !important; } /* Native