/* ============================================================ RTL overrides for Dive Admin. Loaded only when via the layout templates. Keep selectors prefixed with [dir="rtl"] so this file is a no-op for LTR locales even if accidentally loaded. ============================================================ */ [dir="rtl"] body { direction: rtl; text-align: right; } /* ---------- Bootstrap 4 directional utilities ---------- */ [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .float-right { float: left !important; } [dir="rtl"] .pull-left, [dir="rtl"] .pull-right { float: none !important; } [dir="rtl"] .pull-left { float: right !important; } [dir="rtl"] .pull-right { float: left !important; } [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* margin / padding helpers — flip mr-* and ml-* (and responsive variants) */ [dir="rtl"] .mr-0, [dir="rtl"] .mx-0 { margin-right: 0 !important; } [dir="rtl"] .ml-0, [dir="rtl"] .mx-0 { margin-left: 0 !important; } [dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 3rem !important; } [dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 3rem !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .pr-0 { padding-right: 0 !important; padding-left: 0 !important; } [dir="rtl"] .pl-0 { padding-left: 0 !important; padding-right: 0 !important; } [dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } [dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } [dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } [dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } [dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 1rem !important; } [dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } [dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } [dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 3rem !important; } [dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 3rem !important; } /* Common responsive variants used in this codebase */ @media (min-width: 576px) { [dir="rtl"] .mr-sm-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .ml-sm-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .mr-sm-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .ml-sm-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .mr-sm-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ml-sm-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .mr-sm-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ml-sm-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .text-sm-left { text-align: right !important; } [dir="rtl"] .text-sm-right { text-align: left !important; } } @media (min-width: 768px) { [dir="rtl"] .mr-md-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .ml-md-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .mr-md-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .ml-md-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .mr-md-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ml-md-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .mr-md-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ml-md-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .text-md-left { text-align: right !important; } [dir="rtl"] .text-md-right { text-align: left !important; } } @media (min-width: 992px) { [dir="rtl"] .mr-lg-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .ml-lg-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .mr-lg-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .ml-lg-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .mr-lg-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ml-lg-3 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .mr-lg-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ml-lg-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .text-lg-left { text-align: right !important; } [dir="rtl"] .text-lg-right { text-align: left !important; } } /* ---------- Bootstrap components ---------- */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .dropdown-menu-right { right: auto; left: 0; } [dir="rtl"] .dropdown-menu-left { left: auto; right: 0; } [dir="rtl"] .navbar-nav .dropdown-menu { right: 0; left: auto; } /* Custom-control checkboxes/radios — Bootstrap puts the indicator on the left */ [dir="rtl"] .custom-control { padding-right: 1.5rem; padding-left: 0; } [dir="rtl"] .custom-control-label::before, [dir="rtl"] .custom-control-label::after { right: -1.5rem; left: auto; } /* Input groups */ [dir="rtl"] .input-group > .form-control:not(:last-child), [dir="rtl"] .input-group > .custom-select:not(:last-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } [dir="rtl"] .input-group > .form-control:not(:first-child), [dir="rtl"] .input-group > .custom-select:not(:first-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } [dir="rtl"] .input-group-prepend { margin-right: 0; margin-left: -1px; } [dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; } /* Close button in modals */ [dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; } /* Breadcrumb separator */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-right: 0; padding-left: 0.5rem; float: right; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: 0.5rem; } /* Custom file input */ [dir="rtl"] .custom-file-label::after { right: auto; left: 0; border-radius: 0.25rem 0 0 0.25rem; } /* Pagination */ [dir="rtl"] .pagination { padding-right: 0; } [dir="rtl"] .page-item:first-child .page-link { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } [dir="rtl"] .page-item:last-child .page-link { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } /* List groups */ [dir="rtl"] .list-group { padding-right: 0; } /* Badges and inline icons that often sit before text in LTR — give them a tiny inline-end gap instead of inline-start. Safe heuristic. */ [dir="rtl"] .badge + .badge, [dir="rtl"] .btn + .btn { margin-right: 0.25rem; margin-left: 0; } /* Font Awesome icons inside buttons — leave the icon at the visual start. No flip needed because we already swapped float/text-align above. */ /* ---------- Form layout ---------- */ [dir="rtl"] .form-check { padding-right: 1.25rem; padding-left: 0; } [dir="rtl"] .form-check-input { margin-right: -1.25rem; margin-left: 0; } [dir="rtl"] .form-check-inline { margin-right: 0; margin-left: 0.75rem; } /* Tables — keep numbers visually right-aligned in RTL? Most reports use text-right for amounts, which we already swap. So nothing extra here. */ /* Datatables wrapper — search box sits on the right in LTR */ [dir="rtl"] .dataTables_wrapper .dataTables_filter { float: left; text-align: left; } [dir="rtl"] .dataTables_wrapper .dataTables_length { float: right; } [dir="rtl"] .dataTables_wrapper .dataTables_info { float: right; } [dir="rtl"] .dataTables_wrapper .dataTables_paginate { float: left; } [dir="rtl"] .dataTables_wrapper .dataTables_filter input { margin-right: 0.5rem; margin-left: 0; } /* select2 */ [dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow { right: auto; left: 1px; } [dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } /* Numbers, codes, currency — keep them LTR even inside RTL paragraphs. Use class="ltr" on inline spans where mixed text breaks visually. */ [dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }