/* ***************************************************** ** RTL (Right-to-Left) Arabic Stylesheet ** Overrides Bootstrap 4 and theme styles for RTL layout. Applied when is set. ***************************************************** */ /* ===================================================== 1. GLOBAL DIRECTION & TYPOGRAPHY ===================================================== */ html[dir="rtl"] { direction: rtl; text-align: right; } html[dir="rtl"] body { text-align: right; font-family: 'Loew Next Arabic', 'Tajawal', -apple-system, Roboto, Helvetica, sans-serif; } /* ===================================================== 2. HEADER LOGO & BRANDING ===================================================== */ html[dir="rtl"] .navbar-brand { margin-right: 0 !important; margin-left: 1rem !important; /* flip mr-3 spacing */ } html[dir="rtl"] .navbar-brand .logo-img { max-height: 45px !important; /* Smaller logo as requested */ width: auto; } /* ===================================================== 3. BOOTSTRAP MARGIN UTILITIES (mr <-> ml) ===================================================== */ /* mr-auto -> ml-auto */ html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* ml-auto -> mr-auto */ html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } /* mr-1 */ html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } /* mr-2 */ html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } /* mr-3 */ html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } /* mr-4 */ html[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } /* mr-5 */ html[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; } /* ml-1 */ html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } /* ml-2 */ html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } /* ml-3 */ html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } /* ml-4 */ html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } /* ml-5 */ html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; } /* Responsive ml/mr (md breakpoint) */ html[dir="rtl"] .ml-md-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } /* ===================================================== 3. BOOTSTRAP PADDING UTILITIES (pr <-> pl) ===================================================== */ /* pr-1 */ html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } /* pr-2 */ html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } /* pr-3 */ html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; } /* pr-4 */ html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } /* pl-1 */ html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } /* pl-2 */ html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } /* pl-3 */ html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; } /* pl-4 */ html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } /* ===================================================== 4. BOOTSTRAP FLOAT UTILITIES ===================================================== */ html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } html[dir="rtl"] .float-lg-left { float: right !important; } html[dir="rtl"] .float-lg-right { float: left !important; } html[dir="rtl"] .float-md-right { float: left !important; } html[dir="rtl"] .float-md-left { float: right !important; } /* ===================================================== 5. BOOTSTRAP TEXT ALIGNMENT ===================================================== */ html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } html[dir="rtl"] .text-md-left { text-align: right !important; } html[dir="rtl"] .text-md-right { text-align: left !important; } html[dir="rtl"] .text-lg-left { text-align: right !important; } html[dir="rtl"] .text-lg-right { text-align: left !important; }html[dir="rtl"] .input-group > .form-control, html[dir="rtl"] .input-group > .custom-select { text-align: right; } html[dir="rtl"] .input-group > .form-control:not(:last-child), html[dir="rtl"] .input-group > .custom-select:not(:last-child) { border-radius: 0 0.25rem 0.25rem 0; } html[dir="rtl"] .input-group > .form-control:not(:first-child), html[dir="rtl"] .input-group > .custom-select:not(:first-child) { border-radius: 0.25rem 0 0 0.25rem; } html[dir="rtl"] .input-group-prepend { margin-right: 0; margin-left: -1px; } html[dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; } html[dir="rtl"] .input-group-prepend .btn, html[dir="rtl"] .input-group-prepend .input-group-text { border-radius: 0 0.25rem 0.25rem 0; } html[dir="rtl"] .input-group-append .btn, html[dir="rtl"] .input-group-append .input-group-text { border-radius: 0.25rem 0 0 0.25rem; } /* ===================================================== 7. BOOTSTRAP DROPDOWN MENUS ===================================================== */ html[dir="rtl"] .dropdown-menu { text-align: right; right: 0; left: auto; } html[dir="rtl"] .dropdown-menu-right { right: auto; left: 0; } html[dir="rtl"] .dropdown-item { text-align: right; padding: .25rem 1.5rem .25rem 1.5rem; } html[dir="rtl"] .navbar .dropdown-item { padding: .25rem .75rem !important; } /* ===================================================== 8. BOOTSTRAP BREADCRUMB ===================================================== */ html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\AB" !important; font-family: inherit !important; font-weight: normal !important; font-size: 0.85em; padding-left: 0.5rem; padding-right: 0.5rem; float: right; } html[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: 0.5rem; } /* ===================================================== 9. BOOTSTRAP NAVBAR ===================================================== */ html[dir="rtl"] .navbar-nav { padding-right: 0; } html[dir="rtl"] .navbar-nav .dropdown-menu { text-align: right; } html[dir="rtl"] .navbar-brand { margin-right: 0; margin-left: 1rem; } /* ===================================================== 10. BOOTSTRAP LISTS ===================================================== */ html[dir="rtl"] .list-group { padding-right: 0; } html[dir="rtl"] .list-unstyled, html[dir="rtl"] .list-inline { padding-right: 0; } html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 2rem; padding-left: 0; } /* Reset padding for UI lists that shouldn't get the 2rem indent */ html[dir="rtl"] .dropdown-menu, html[dir="rtl"] .navbar-nav, html[dir="rtl"] .list-group, html[dir="rtl"] .country-list, html[dir="rtl"] .pagination, html[dir="rtl"] .nav, html[dir="rtl"] .list-inline, html[dir="rtl"] .list-unstyled { padding-right: 0 !important; } /* ===================================================== 11. BOOTSTRAP MODAL ===================================================== */ html[dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; padding: 1rem; } html[dir="rtl"] .modal-footer > :not(:first-child) { margin-left: 0; margin-right: .25rem; } html[dir="rtl"] .modal-footer > :not(:last-child) { margin-right: 0; margin-left: .25rem; } /* ===================================================== 12. BOOTSTRAP FORMS ===================================================== */ html[dir="rtl"] .form-check { padding-left: 0; padding-right: 1.25rem; } html[dir="rtl"] .form-check-input { margin-left: 0; margin-right: -1.25rem; } html[dir="rtl"] .form-check-label { margin-right: 0; } html[dir="rtl"] label { text-align: right; } html[dir="rtl"] .custom-control { padding-left: 0; padding-right: 1.5rem; } html[dir="rtl"] .custom-control-label::before, html[dir="rtl"] .custom-control-label::after { left: auto; right: -1.5rem; } html[dir="rtl"] .custom-select { background-position: left 0.75rem center; padding-left: 1.75rem; padding-right: 0.75rem; } /* ===================================================== 13. BOOTSTRAP TABLES ===================================================== */ html[dir="rtl"] .table th, html[dir="rtl"] .table td { text-align: right; } /* ===================================================== 14. BOOTSTRAP CARDS ===================================================== */ html[dir="rtl"] .card-body { text-align: right; } html[dir="rtl"] .card-header { text-align: right; } /* ===================================================== 15. BOOTSTRAP BADGE ===================================================== */ html[dir="rtl"] .badge { margin-left: 0; margin-right: 0.25rem; } /* ===================================================== 16. BOOTSTRAP CLOSE BUTTON ===================================================== */ html[dir="rtl"] .close { float: left; }html[dir="rtl"] .topbar .btn-group { direction: rtl; }/* Main Navbar */ html[dir="rtl"] .main-navbar-wrapper .navbar-collapse { text-align: right; } /* Sidebar */ html[dir="rtl"] .sidebar .list-group-item { text-align: right; } html[dir="rtl"] .sidebar .card-minimise { float: left !important; } html[dir="rtl"] .sidebar .badge.float-right { float: left !important; } /* Main content layout - flip sidebar and content */ html[dir="rtl"] .primary-content { text-align: right; }/* Client alerts */ html[dir="rtl"] .client-alerts li a { text-align: right; } html[dir="rtl"] .client-alerts li a i { margin-left: 0.5rem; margin-right: 0; } /* Footer */ html[dir="rtl"] #footer .nav { padding-right: 0; } html[dir="rtl"] #footer .copyright, html[dir="rtl"] footer.footer .copyright { text-align: right; margin: 10px 0 !important; } /* Pagination */ html[dir="rtl"] .pagination { padding-right: 0; } html[dir="rtl"] .page-item:first-child .page-link { border-radius: 0 0.25rem 0.25rem 0; } html[dir="rtl"] .page-item:last-child .page-link { border-radius: 0.25rem 0 0 0.25rem; }/* Alerts */ html[dir="rtl"] .alert { text-align: right; } html[dir="rtl"] .alert-dismissible .close { left: 0; right: auto; } /* Invoice / Quote tables */ html[dir="rtl"] .total-row.text-right { text-align: left !important; } /* Ticket system */ html[dir="rtl"] .ticket-reply { text-align: right; } /* Panel / Card headers icons */ html[dir="rtl"] .card-header i.fas, html[dir="rtl"] .card-header i.far, html[dir="rtl"] .card-header i.fal, html[dir="rtl"] .card-header i.fad { margin-left: 0.5rem; margin-right: 0; } /* Status labels */ html[dir="rtl"] .label { margin-left: 0; } /* Btn group */ html[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-radius: 0 0.25rem 0.25rem 0; } html[dir="rtl"] .btn-group > .btn:not(:first-child) { border-radius: 0.25rem 0 0 0.25rem; } /* Font Awesome icons spacing fix */ html[dir="rtl"] i.fas + span, html[dir="rtl"] i.far + span, html[dir="rtl"] i.fal + span, html[dir="rtl"] i.fad + span { margin-right: 0.25rem; } /* ===================================================== 18. RESPONSIVE OVERRIDES ===================================================== */ @media (min-width: 576px) { html[dir="rtl"] .float-sm-left { float: right !important; } html[dir="rtl"] .float-sm-right { float: left !important; } } @media (min-width: 768px) { html[dir="rtl"] .text-md-left { text-align: right !important; } html[dir="rtl"] .text-md-right { text-align: left !important; } } @media (min-width: 992px) { html[dir="rtl"] .text-lg-left { text-align: right !important; } html[dir="rtl"] .text-lg-right { text-align: left !important; } } @media (min-width: 1200px) { html[dir="rtl"] .text-xl-left { text-align: right !important; } html[dir="rtl"] .text-xl-right { text-align: left !important; } } /* ===================================================== 19. OFFSET CLASSES ===================================================== */ html[dir="rtl"] .offset-1 { margin-right: 8.333333%; margin-left: 0; } html[dir="rtl"] .offset-2 { margin-right: 16.666667%; margin-left: 0; } html[dir="rtl"] .offset-3 { margin-right: 25%; margin-left: 0; } html[dir="rtl"] .offset-md-0 { margin-right: 0; } /* ===================================================== 20. MISC FIXES ===================================================== */ /* Tooltip arrow */ html[dir="rtl"] .tooltip { direction: rtl; } /* Popover */ html[dir="rtl"] .popover { text-align: right; } /* DataTable sorting arrows */ html[dir="rtl"] table.dataTable thead .sorting::after, html[dir="rtl"] table.dataTable thead .sorting_asc::after, html[dir="rtl"] table.dataTable thead .sorting_desc::after { left: 8px; right: auto; } /* Search input in header */ html[dir="rtl"] .header .search .form-control { text-align: right; } /* Toast messages */ html[dir="rtl"] .toast { text-align: right; } /* Tab navigation */ html[dir="rtl"] .nav-tabs { padding-right: 0; } /* Back to admin button fixed */ html[dir="rtl"] .btn-return-to-admin { left: 15px; right: auto; } /* Login form */ html[dir="rtl"] .login-container .form-group { text-align: right; } /* Shopping cart */ html[dir="rtl"] #order-standard_cart .order-summary { text-align: right; } /* Accordion */ html[dir="rtl"] .accordion .card-header .btn { text-align: right; } /* Fix font awesome chevron for RTL in breadcrumb */ html[dir="rtl"] .fa-chevron-right:before { content: "\f053"; } html[dir="rtl"] .fa-chevron-left:before { content: "\f054"; }html[dir="rtl"] .navbar-brand { margin-right: 0 !important; margin-left: 1.5rem !important; } html[dir="rtl"] .cart-btn { margin-left: 0 !important; margin-right: 1.5rem !important; }html[dir="rtl"] .input-group-prepend .input-group-text { border-radius: 0 0.25rem 0.25rem 0 !important; border-left: 0 !important; border-right: 1px solid #ced4da !important; } html[dir="rtl"] .input-group-append .input-group-text, html[dir="rtl"] .input-group-append .btn { border-radius: 0.25rem 0 0 0.25rem !important; border-right: 0 !important; border-left: 1px solid #ced4da !important; } html[dir="rtl"] .input-group .form-control { border-radius: 0 !important; text-align: right; } html[dir="rtl"] .input-group > .form-control:not(:last-child) { border-radius: 0 0.25rem 0.25rem 0 !important; } html[dir="rtl"] .input-group > .form-control:not(:first-child) { border-radius: 0.25rem 0 0 0.25rem !important; } /* --- 3. Dropdown Arrows --- */ html[dir="rtl"] .dropdown-toggle::after { margin-right: .255em !important; margin-left: 0 !important; } /* --- 4. Breadcrumb Separator --- */ html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\AB" !important; font-family: inherit !important; font-weight: normal !important; float: none !important; display: inline-block !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; } /* --- 5. Sidebar & Button Icon Spacing --- */ html[dir="rtl"] .sidebar .list-group-item i, html[dir="rtl"] .sidebar .list-group-item .fas, html[dir="rtl"] .sidebar .list-group-item .far { margin-left: 8px !important; margin-right: 0 !important; } html[dir="rtl"] .btn i, html[dir="rtl"] .btn .fas, html[dir="rtl"] .btn .far { margin: 4px !important; } /* --- 6. Remember Me Checkbox Alignment --- */ html[dir="rtl"] .form-check-input { margin-left: 0.5rem !important; margin-right: 0 !important; float: right !important; position: static !important; } html[dir="rtl"] .form-check { padding-right: 1.5rem !important; padding-left: 0 !important; text-align: right !important; display: flex; align-items: center; } /* --- 7. Button Arrows Direction --- */ html[dir="rtl"] .fa-arrow-right:before, html[dir="rtl"] .fa-arrow-circle-right:before, html[dir="rtl"] .fa-long-arrow-alt-right:before { transform: scaleX(-1); display: inline-block; } /* ===================================================== 22. REGISTRATION PAGE FIXES ===================================================== */ /* Fix input field background icons overlapping text */ html[dir="rtl"] .field.form-control, html[dir="rtl"] .form-control.field, html[dir="rtl"] input.field { padding-right: 45px !important; padding-left: 15px !important; text-align: right; } /* Ensure background icons are correctly positioned on the right using high specificity */ html[dir="rtl"] #inputFirstName, html[dir="rtl"] #inputLastName, html[dir="rtl"] #inputEmail, html[dir="rtl"] #inputCompanyName, html[dir="rtl"] #inputAddress1, html[dir="rtl"] #inputAddress2, html[dir="rtl"] #inputCity, html[dir="rtl"] #inputPostcode, html[dir="rtl"] #inputNewPassword1, html[dir="rtl"] #inputNewPassword2 { background-position: right 15px center !important; } /* Fix Select Selectors (Country/State) */ html[dir="rtl"] select.field.form-control { padding-right: 45px !important; background-position: right 15px center, right 0.75rem center !important; } /* Hide country flags from phone input */ html[dir="rtl"] .iti__flag, html[dir="rtl"] .iti-flag, html[dir="rtl"] .intl-tel-input .flag, html[dir="rtl"] .iti__country-list .iti__flag-box, html[dir="rtl"] .intl-tel-input .country-list .flag-box { display: none !important; } html[dir="rtl"] .intl-tel-input .country-list .flag-box { display: none !important; } /* Fix Intl-Tel-Input (Phone Field) to Strict LTR */ /* Phone numbers and country codes must flow Left-to-Right naturally */ html[dir="rtl"] .iti { direction: ltr !important; text-align: left !important; width: 100%; } html[dir="rtl"] .iti--allow-dropdown input, html[dir="rtl"] .iti--separate-dial-code input, html[dir="rtl"] .iti--allow-dropdown input[type=text], html[dir="rtl"] .iti--allow-dropdown input[type=tel], html[dir="rtl"] .intl-tel-input input { padding-left: 105px !important; padding-right: 15px !important; direction: ltr !important; text-align: left !important; } html[dir="rtl"] .iti__selected-dial-code { direction: ltr !important; } html[dir="rtl"] .iti__flag-container, html[dir="rtl"] .intl-tel-input .flag-container { left: 0 !important; right: auto !important; } /* Ensure the dropdown country list remains RTL for Arabic country names */ /* WHMCS uses older intl-tel-input with .country-list (not .iti__country-list) */ html[dir="rtl"] .country-list, html[dir="rtl"] ul.country-list, html[dir="rtl"] .iti .iti__country-list, html[dir="rtl"] .iti--allow-dropdown .iti__country-list { direction: rtl !important; text-align: right !important; } /* Target country items (older version uses plain li, newer uses .iti__country) */ html[dir="rtl"] .country-list li, html[dir="rtl"] .iti__country-list .iti__country { direction: rtl !important; text-align: right !important; } /* Keep dial codes LTR so +966 doesn't become 966+ */ html[dir="rtl"] .country-list li .dial-code, html[dir="rtl"] .iti__country-list .iti__dial-code { direction: ltr !important; unicode-bidi: embed; } /* Password Strength Meter Alignment */ html[dir="rtl"] .password-strength-meter, html[dir="rtl"] .password-strength-text { text-align: right !important; } /* Registration Page Sidebar Icons */ html[dir="rtl"] #Primary_Sidebar-Already_Registered-Login .list-group-item i, html[dir="rtl"] #Primary_Sidebar-Already_Registered-Lost_Password_Reset .list-group-item i { margin-left: 10px !important; margin-right: 0 !important; } /* Terms of Service Checkbox Container Override */ html[dir="rtl"] .form-check label { margin-right: 0.5rem; } /* Selected Dial Code Display Fix */ html[dir="rtl"] .intl-tel-input.separate-dial-code .selected-dial-code { text-align: left; direction: initial; } /* ===================================================== 23. FOOTER FIXES ===================================================== */ html[dir="rtl"] footer.footer { margin: 0; padding: 20px 0 20px; } /* ===================================================== 24. TILE STATS ===================================================== */ html[dir="rtl"] .tiles .tile .stat { text-align: left; } /* ===================================================== 25. CUSTOM FILE INPUT (Attachments) ===================================================== */ html[dir="rtl"] .custom-file { direction: rtl !important; } html[dir="rtl"] .custom-file-label { text-align: right !important; } html[dir="rtl"] .custom-file-label::after { left: 0 !important; right: auto !important; border-radius: 0.25rem 0 0 0.25rem !important; border-left: inherit !important; border-right: 1px solid #ced4da !important; } /* ===================================================== 26. ATTACHMENT LIST (Compact Style) ===================================================== */ .attachment-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .attachment-list li { flex: none; } .attachment-list li a span { display: flex !important; align-items: center; gap: 6px; padding: 6px 12px; background: #f8f9fa; border: 1px solid #e2e6ea; border-radius: 6px; transition: background 0.2s; } .attachment-list li a:hover span { background: #e9ecef; text-decoration: none; } .attachment-list li a span figure { margin: 0 !important; padding: 0 !important; display: flex; align-items: center; } .attachment-list li a span figure i { font-size: 16px !important; color: #6c757d; } .attachment-list li a span .caption { font-size: 13px; color: #495057; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } /* ===================================================== 27. TICKET RATING STARS ===================================================== */ html[dir="rtl"] .ticket-reply .rating, html[dir="rtl"] .ticket-reply .rating-done { float: left !important; direction: ltr !important; unicode-bidi: bidi-override !important; text-align: left; } html[dir="rtl"] .ticket-reply .rating-done .rated { direction: rtl !important; unicode-bidi: normal !important; font-size: 12px; } /* ===================================================== 28. TICKET LIST TABLE ===================================================== */ @media (min-width: 768px) { html[dir="rtl"] #tableTicketsList { table-layout: fixed !important; width: 100% !important; } /* Subject column gets 50% width, 3rd and 4th get 10% each */ html[dir="rtl"] #tableTicketsList th:nth-child(2), html[dir="rtl"] #tableTicketsList td:nth-child(2) { width: 50% !important; word-break: break-word; } html[dir="rtl"] #tableTicketsList th:nth-child(3), html[dir="rtl"] #tableTicketsList td:nth-child(3), html[dir="rtl"] #tableTicketsList th:nth-child(4), html[dir="rtl"] #tableTicketsList td:nth-child(4) { width: 10% !important; } } html[dir="rtl"] #tableTicketsList th, html[dir="rtl"] #tableTicketsList td { text-align: right !important; word-break: break-word; } html[dir="rtl"] .dataTables_wrapper { overflow-x: auto; } /* DataTables Sorting Icons - Move to Left Side for RTL */ html[dir="rtl"] table.dataTable thead th.sorting, html[dir="rtl"] table.dataTable thead th.sorting_asc, html[dir="rtl"] table.dataTable thead th.sorting_desc { position: relative !important; padding-left: 30px !important; padding-right: 8px !important; background-position: left 8px center !important; } html[dir="rtl"] table.dataTable thead th.sorting::before, html[dir="rtl"] table.dataTable thead th.sorting_asc::before, html[dir="rtl"] table.dataTable thead th.sorting_desc::before, html[dir="rtl"] table.dataTable thead th.sorting::after, html[dir="rtl"] table.dataTable thead th.sorting_asc::after, html[dir="rtl"] table.dataTable thead th.sorting_desc::after { left: 8px !important; right: auto !important; } /* ===================================================== 29. ROWAAD BRAND IDENTITY THEMING Colors from rh.net.sa — no size changes ===================================================== */ /* --- Brand CSS Variables --- */ html[dir="rtl"] { --rowaad-dark: #1B2228; --rowaad-accent: #B5C700; --rowaad-gray: #656565; --rowaad-light-bg: #f5f5f7; --rowaad-border: #dddfe2; --rowaad-white: #ffffff; } /* --- Primary Buttons --- */ html[dir="rtl"] .btn-primary { background-color: var(--rowaad-dark) !important; border-color: var(--rowaad-dark) !important; color: var(--rowaad-white) !important; } html[dir="rtl"] .btn-primary:hover, html[dir="rtl"] .btn-primary:focus { background-color: #2a343d !important; border-color: #2a343d !important; } /* --- Links --- */ html[dir="rtl"] a { color: var(--rowaad-dark); } html[dir="rtl"] a:hover { color: var(--rowaad-accent); } /* --- Panel / Card Headers --- */ html[dir="rtl"] .card-header, html[dir="rtl"] .panel-heading { background-color: var(--rowaad-dark) !important; color: var(--rowaad-white) !important; border-color: var(--rowaad-dark) !important; } html[dir="rtl"] .card-header a, html[dir="rtl"] .card-header .card-title, html[dir="rtl"] .panel-heading a { color: var(--rowaad-white) !important; } /* --- Active / Selected States --- */ html[dir="rtl"] .list-group-item.active { background-color: var(--rowaad-dark) !important; border-color: var(--rowaad-dark) !important; } html[dir="rtl"] .page-item.active .page-link { background-color: var(--rowaad-dark) !important; border-color: var(--rowaad-dark) !important; } /* --- Badge / Status Colors --- */ html[dir="rtl"] .badge-primary { background-color: var(--rowaad-dark) !important; } html[dir="rtl"] .badge-success { background-color: var(--rowaad-accent) !important; color: var(--rowaad-dark) !important; } /* --- Navbar Brand Theming --- */ html[dir="rtl"] .navbar { background-color: var(--rowaad-white) !important; border-bottom: 1px solid var(--rowaad-border) !important; } html[dir="rtl"] .navbar .nav-link { color: var(--rowaad-dark) !important; } html[dir="rtl"] .navbar .nav-link:hover { color: var(--rowaad-accent) !important; } /* --- Table Header Theming --- */ html[dir="rtl"] table.table-list thead th { background-color: var(--rowaad-light-bg) !important; color: var(--rowaad-dark) !important; border-bottom-color: var(--rowaad-border) !important; } /* --- Footer Theming --- */ html[dir="rtl"] footer.footer { background-color: var(--rowaad-light-bg) !important; color: var(--rowaad-gray) !important; border-top: 1px solid var(--rowaad-border) !important; } /* --- Focus Ring --- */ html[dir="rtl"] .form-control:focus { border-color: var(--rowaad-accent) !important; box-shadow: 0 0 0 0.2rem rgba(181, 199, 0, 0.25) !important; } html[dir="rtl"] .btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(27, 34, 40, 0.25) !important; } /* --- Footer Links Visibility Fix --- */ html[dir="rtl"] footer.footer a { color: var(--rowaad-dark) !important; } html[dir="rtl"] footer.footer a:hover { color: var(--rowaad-accent) !important; } /* --- Sidebar Recent Tickets Overflow Fix --- */ html[dir="rtl"] .recent-ticket .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important; display: block !important; } html[dir="rtl"] .sidebar-menu-item-wrapper { overflow: hidden !important; max-width: 100% !important; } html[dir="rtl"] .list-group.list-group-flush .list-group-item { overflow: hidden !important; }