/* Right-to-left (Arabic). Loaded after style.css and Bootstrap's RTL build, only when the page language is Arabic.
   The page is a flex row, so dir="rtl" already puts the sidebar on the right; these rules mirror the details. */
body { font-family: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; }
.display-font, .page-title, .brand-name, .eyebrow, .kpi-value, .panel-title { font-family: 'Noto Sans Arabic', 'Barlow Condensed', sans-serif; letter-spacing: 0; }

.sidebar { border-right: 0; border-left: 1px solid var(--line); }
.side-nav a.nav-item { border-left: 0; border-right: 2px solid transparent; }
.side-nav a.nav-item.active { border-right-color: var(--amber); border-left-color: transparent; }

/* style.css sets "text-align:left" on `.table-gms thead th`, which is MORE specific than a plain `.table-gms th`, so it has to be beaten explicitly */
html[dir=rtl] .table-gms thead th, html[dir=rtl] .table-gms tbody td { text-align: right; }
html[dir=rtl] .table-gms thead th.text-end, html[dir=rtl] .table-gms tbody td.text-end { text-align: left; }   /* "end" is the left edge in RTL */
html[dir=rtl] .table-gms tbody td { unicode-bidi: plaintext; }   /* an English name/company in an Arabic table keeps its punctuation on the right side */

/* Arabic letters join; letter-spacing and upper-casing (used for the English headings/labels) break that, so switch them off */
html[dir=rtl] *, html[dir=rtl] *::before, html[dir=rtl] *::after { letter-spacing: 0 !important; text-transform: none !important; }

.toast-gms { right: auto; left: 22px; border-left: 1px solid var(--teal); border-right: 4px solid var(--teal); }
.kpi-card::after, .kpi-card::before { right: auto; left: -30px; }

/* codes, plates, numbers, emails and receipt numbers stay left-to-right inside Arabic text */
.mono, .plate-badge, input[type=email], input[type=tel], input[type=number], input[name=code], input[name=plate] { direction: ltr; unicode-bidi: plaintext; }
input.mono, input[type=email], input[type=number] { text-align: right; }

@media (max-width: 991.98px) {
  .sidebar { left: auto; right: 0; transform: translateX(100%); }
  .sidebar.open { transform: translateX(0); }
}
@media print { .main-col { margin-right: 0 !important; } }