/* ============================================================ * RTL overrides for template_3. * * Loaded only when (meta.html gates this). Mirrors * the bits Bootstrap 4 and the template's custom CSS hard-code in * one direction — margin-left/right utilities, dropdown anchoring, * icon spacing, the dashboard sidebar position, etc. * * The body inherits direction:rtl + text-align:right from the html * dir attribute; this file only fixes the spots that aren't direction- * aware on their own. * ============================================================ */ /* ── Inter swapped for Cairo on every text-bearing element ─── */ html[dir="rtl"] body, html[dir="rtl"] .navbar-nav .nav-link, html[dir="rtl"] .top-bar, html[dir="rtl"] .side-link, html[dir="rtl"] .stat-card, html[dir="rtl"] .dash-greeting, html[dir="rtl"] .auth-card, html[dir="rtl"] .pricing-card, html[dir="rtl"] .feature-card, html[dir="rtl"] .dash-panel { font-family: 'Cairo', 'Tahoma', sans-serif; } /* ── BS4 directional utilities flip (only the ones we use) ─── */ html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: .25rem !important; } html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: .5rem !important; } html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; } html[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: .25rem !important; } html[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: .5rem !important; } html[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; } html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: .25rem !important; } html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: .5rem !important; } html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: .25rem !important; } html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: .5rem !important; } html[dir="rtl"] .text-left { text-align: right !important; } html[dir="rtl"] .text-right { text-align: left !important; } html[dir="rtl"] .text-md-right { text-align: left !important; } html[dir="rtl"] .text-lg-right { text-align: left !important; } html[dir="rtl"] .float-left { float: right !important; } html[dir="rtl"] .float-right { float: left !important; } /* ── Top utility strip ─────────────────────────────────────── Icons before text need right-spacing under LTR ("← icon ←text→") and left-spacing under RTL ("←text icon →"). */ html[dir="rtl"] .top-bar i, html[dir="rtl"] .top-bar-dd i:first-child { margin-right: 0; margin-left: 0.35rem; } /* Caret naturally sits *after* the dropdown label — under RTL that's on the LEFT of the label, so flip its margin too. */ html[dir="rtl"] .top-bar-dd .fa-caret-down { margin-left: 0; margin-right: 0.3rem; } /* The currency dropdown's secondary "ml-2" text — already covered by the global ml-2 flip above, so nothing extra here. */ /* The two dropdowns in the topbar are positioned via `dropdown-menu-right` which anchors to the trigger's *right* edge. Under RTL the trigger lives on the LEFT side of the viewport, so a right-anchored dropdown grows leftward and overflows. Flip them. */ html[dir="rtl"] .top-bar .dropdown-menu-right, html[dir="rtl"] .top-bar .dropdown-menu { right: auto !important; left: 0 !important; } /* ── Main navbar ───────────────────────────────────────────── BS4's `navbar-expand-lg` is a flex container; under dir:rtl the brand naturally lands on the RIGHT and the menu/auth on the LEFT. We only need to flip the hard-coded `ml-*` / `mr-*` utilities that style sub-elements. */ html[dir="rtl"] .navbar .auth-buttons .btn { margin-left: 0; margin-right: 0.5rem; } /* Dropdown items inside the Servers menu — caret on the right under LTR ("Servers ▾") → caret on the LEFT under RTL ("▾ السيرفرات"). */ html[dir="rtl"] .navbar .dropdown-toggle::after { margin-left: 0; margin-right: 0.255em; } /* ── Dashboard shell ──────────────────────────────────────── `.app-layout` is a flex container with sidebar first + main second. Under dir:rtl flex reverses → sidebar lands on the RIGHT, main on the LEFT (proper RTL mirror). No CSS flip needed; the gap stays symmetric. We only fix per-item icon spacing. */ html[dir="rtl"] .app-sidebar a.side-link i { margin-right: 0; margin-left: 0.6rem; } /* Sidebar count badges (`float-right` in HTML) flip to float-left under RTL via the global float-right rule above. */ /* ── Stat cards + dashboard panels ─────────────────────────── */ html[dir="rtl"] .stat-card .stat-icon, html[dir="rtl"] .dash-panel .feat-icon { margin-right: 0; margin-left: 0.75rem; } /* Panel-title's right-anchored "View all" link/button — already a flex layout with `justify-content: space-between`, so RTL flows correctly. No fix needed. */ /* Server-list row icons */ html[dir="rtl"] .server-list .btn i { margin-right: 0; margin-left: 0; } /* ── Pricing / feature cards ───────────────────────────────── */ html[dir="rtl"] .plan-features li i.fa-check { margin-right: 0; margin-left: 0.5rem; } html[dir="rtl"] .pricing-card { text-align: right; } html[dir="rtl"] .feature-card { text-align: right; } html[dir="rtl"] .feature-card .feat-icon { margin-left: auto; margin-right: 0; } /* ── Footer ──────────────────────────────────────────────── */ html[dir="rtl"] .site-footer ul, html[dir="rtl"] .site-footer h5 { text-align: right; } html[dir="rtl"] .site-footer .footer-brand img { margin-right: 0; margin-left: 0.5rem; } /* ── Buttons with leading icons (mr-1, mr-2 covered globally) */ html[dir="rtl"] .btn i.mr-1, html[dir="rtl"] .btn i.mr-2 { margin-right: 0; margin-left: 0.5rem; } /* ── Auth pages — center column is already symmetric ───────── */ /* ── Forms ──────────────────────────────────────────────── */ html[dir="rtl"] label { display: block; text-align: right; } html[dir="rtl"] .form-control { text-align: right; } html[dir="rtl"] .input-group-prepend { margin-right: 0; margin-left: -1px; } html[dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; } /* ── Tables — header + body cells right-aligned under RTL ── */ html[dir="rtl"] .table > thead > tr > th, html[dir="rtl"] .table > tbody > tr > td { text-align: right; } html[dir="rtl"] .table th.text-right, html[dir="rtl"] .table td.text-right { text-align: left !important; } /* ── Tickets / ticket-row component ──────────────────────── */ html[dir="rtl"] .ticket-row .tr-id { margin-right: 0; margin-left: 0.75rem; } /* ── Service-grid hero badge / breadcrumb chevron ────────── */ html[dir="rtl"] .page-hero .fa-chevron-right::before { content: "\f053"; } /* swap to fa-chevron-left */