/* * RTL (Right-to-Left) Overrides * Applied automatically when Urdu (urd) or Arabic (ar) is selected. * translation_system.js sets dir="rtl" and class="rtl" on . */ /* ── Base Direction ─────────────────────────────────────────────── */ html[dir="rtl"], html[dir="rtl"] body { direction: rtl; text-align: right; } /* ── Typography / Font ──────────────────────────────────────────── */ html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] span, html[dir="rtl"] a, html[dir="rtl"] li, html[dir="rtl"] label, html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; letter-spacing: 0; } /* ── Flexbox / Layout ───────────────────────────────────────────── */ html[dir="rtl"] .d-flex, html[dir="rtl"] .flex-row { flex-direction: row-reverse; } /* ── Sidebar / Navbar / Header ──────────────────────────────────── */ html[dir="rtl"] .sidebar, html[dir="rtl"] .nav-menu, html[dir="rtl"] .left-menu { left: auto; right: 0; } /* Position language selector dropdown to the left in RTL */ html[dir="rtl"] .language-dropdown { right: auto !important; left: 10px !important; margin-left: 0 !important; margin-right: 20px !important; } /* Nested in header search group — stay in flex flow, don't absolute-pin */ html[dir="rtl"] .header-right-actions .language-dropdown { position: static !important; right: auto !important; left: auto !important; margin: 0 !important; } /* Slide sidebar in from the right instead of the left */ html[dir="rtl"] .menu-container { left: auto !important; right: -290px !important; transition: right 0.6s ease !important; border-radius: 10px 0px 0px 0px !important; } html[dir="rtl"] .menu-container.opened { right: 0 !important; left: auto !important; } html[dir="rtl"] .main-content, html[dir="rtl"] .content-area { margin-left: 0; margin-right: auto; } /* Flip back button arrow icons in RTL */ html[dir="rtl"] .fa-circle-arrow-left, html[dir="rtl"] .fa-arrow-left { transform: rotate(180deg); display: inline-block; } /* ── Padding & Margin Flips ─────────────────────────────────────── */ html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } html[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; } html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } html[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } html[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } html[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; } html[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-right: 1.5rem !important; } html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } html[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; } html[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-left: 1.5rem !important; } /* ── Text Alignment ─────────────────────────────────────────────── */ html[dir="rtl"] .text-start { text-align: right !important; } html[dir="rtl"] .text-end { text-align: left !important; } /* ── Icons / Arrows next to text ───────────────────────────────── */ html[dir="rtl"] .icon-left { margin-left: 0.5rem; margin-right: 0; } /* ── Forms ──────────────────────────────────────────────────────── */ html[dir="rtl"] .form-group, html[dir="rtl"] .form-control, html[dir="rtl"] .form-select, html[dir="rtl"] .input-group { text-align: right; direction: rtl; } html[dir="rtl"] .input-group > :first-child { border-radius: 0 0.375rem 0.375rem 0; } html[dir="rtl"] .input-group > :last-child { border-radius: 0.375rem 0 0 0.375rem; } /* ── Dropdown menus ─────────────────────────────────────────────── */ html[dir="rtl"] .dropdown-menu { text-align: right; left: auto; right: 0; } /* ── Language Dropdown ──────────────────────────────────────────── */ html[dir="rtl"] #customLangDropdown .lang-dropdown-menu { right: auto !important; left: 0 !important; } /* ── Breadcrumb separator ───────────────────────────────────────── */ html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\\"; } /* ── Cards ──────────────────────────────────────────────────────── */ html[dir="rtl"] .card-body, html[dir="rtl"] .card-header, html[dir="rtl"] .card-footer { text-align: right; } /* ── Buttons with icons ─────────────────────────────────────────── */ html[dir="rtl"] .btn i, html[dir="rtl"] .btn svg { margin-left: 0.3rem; margin-right: 0; } /* ── Progress bars ──────────────────────────────────────────────── */ html[dir="rtl"] .progress-bar { margin-right: 0; margin-left: auto; } /* ── Slick Slider (already in app.css but ensuring override) ────── */ html[dir="rtl"] .slick-prev { right: -25px; left: auto; } html[dir="rtl"] .slick-next { left: -25px; right: auto; } /* ── Table ──────────────────────────────────────────────────────── */ html[dir="rtl"] table, html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; direction: rtl; } /* ── List groups ────────────────────────────────────────────────── */ html[dir="rtl"] .list-group-item { text-align: right; } /* ── Scrollbar (custom) ─────────────────────────────────────────── */ html[dir="rtl"] .mCSB_container { float: right; } html[dir="rtl"] .mCSB_scrollTools { right: auto; left: 0; } /* ── Swiper Slider RTL Overrides ────────────────────────────────── */ html[dir="rtl"] .common-slider .swiper-slide:last-child { margin-left: 0 !important; } html[dir="rtl"] .swiper-button-next::after, html[dir="rtl"] .swiper-button-prev::after { transform: rotate(180deg); }