/*
 * RentPilot admin panel, Arabic (right-to-left). Loaded by _Layout.cshtml after site.css when the language is "ar"
 * (<html lang="ar" dir="rtl">). Flex and grid rows mirror automatically under dir=rtl; this file fixes what does not:
 * physical left/right offsets, text alignment, the off-canvas menu, and keeps plates, codes, numbers and charts LTR.
 * Rules are scoped to [dir=rtl] and skip anything inside an element marked dir="ltr" (e.g. printable documents).
 */

/* ---------- typography ---------- */
html[dir=rtl] body,
html[dir=rtl] input,
html[dir=rtl] select,
html[dir=rtl] textarea,
html[dir=rtl] button,
html[dir=rtl] .btn {
  font-family: "IBM Plex Sans Arabic", var(--f-body);
}
html[dir=rtl] h1, html[dir=rtl] h2, html[dir=rtl] h3, html[dir=rtl] h4,
html[dir=rtl] .brand-text {
  font-family: "IBM Plex Sans Arabic", "Sora", var(--f-body);
  letter-spacing: 0;
}
html[dir=rtl] body { line-height: 1.6; }

/* Arabic letters join: letter-spacing and upper-casing break them. */
html[dir=rtl] th,
html[dir=rtl] .navgrp,
html[dir=rtl] .tag,
html[dir=rtl] .kpi .l {
  letter-spacing: 0;
  text-transform: none;
}
html[dir=rtl] th { font-size: 12px; }

/* ---------- shell: rail on the right ---------- */
/* .app is a grid (252px 1fr); under dir=rtl the first column is on the right, so the rail moves there by itself. */
html[dir=rtl] .rail-foot { text-align: right; }
html[dir=rtl] .nav a svg { transform: none; }

@media (max-width: 820px) {
  html[dir=rtl] .rail {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  html[dir=rtl] .app.open .rail { transform: none; }
}

/* Search box: icon sits at the start (right) through flex; keep the typed query aligned to the start. */
html[dir=rtl] .search input { text-align: right; }
html[dir=rtl] .search svg { flex: none; transform: scaleX(-1); }

/* ---------- tables ---------- */
html[dir=rtl] th,
html[dir=rtl] td { text-align: right; }

/* Numeric columns stay left-aligned so digits line up like a ledger. */
html[dir=rtl] th.num,
html[dir=rtl] td.num,
html[dir=rtl] .num {
  text-align: left;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Reservations calendar: first column sticks to the right edge, booking blocks start from the right. */
html[dir=rtl] .cal td.car { left: auto; right: 0; }
html[dir=rtl] .cal .blk { left: auto; right: 2px; }
html[dir=rtl] .cal th[style*="text-align:left"] { text-align: right !important; padding-left: 4px !important; padding-right: 10px; }

/* ---------- inline styles written for LTR in the views ---------- */
html[dir=rtl] [style*="text-align:right"]:not([dir=ltr] *, .invoice-doc *):not(.num) { text-align: left !important; }
html[dir=rtl] [style*="text-align: right"]:not([dir=ltr] *, .invoice-doc *):not(.num) { text-align: left !important; }
html[dir=rtl] [style*="text-align:left"]:not([dir=ltr] *, .invoice-doc *) { text-align: right !important; }
html[dir=rtl] [style*="margin-right:auto"]:not([dir=ltr] *, .invoice-doc *) { margin-right: 0 !important; margin-left: auto; }
html[dir=rtl] [style*="margin-right:4px"]:not([dir=ltr] *, .invoice-doc *) { margin-right: 0 !important; margin-left: 4px; }
html[dir=rtl] [style*="margin-left:6px"]:not([dir=ltr] *, .invoice-doc *) { margin-left: 0 !important; margin-right: 6px; }
html[dir=rtl] [style*="padding-left:18px"]:not([dir=ltr] *, .invoice-doc *) { padding-left: 0 !important; padding-right: 18px; }
html[dir=rtl] .validation-summary-errors ul { padding-left: 0; padding-right: 18px; }
html[dir=rtl] ul:not([dir=ltr] *, .invoice-doc *), html[dir=rtl] ol:not([dir=ltr] *, .invoice-doc *) { padding-inline-start: 18px; }

/* ---------- settings sub-navigation ---------- */
html[dir=rtl] .snav a { text-align: right; }
@media (max-width: 1100px) {
  html[dir=rtl] .snav { flex-direction: row; }
}

/* ---------- toast: bottom-left in RTL ---------- */
html[dir=rtl] .toast { right: auto; left: 20px; }

/* ---------- LTR islands: plates, codes, numbers, money, charts ---------- */
html[dir=rtl] .plate {
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir=rtl] .mono,
html[dir=rtl] .kpi .v,
html[dir=rtl] .sum b,
html[dir=rtl] .sum > div > span:last-child,
html[dir=rtl] input[type=email],
html[dir=rtl] input[type=url],
html[dir=rtl] input[type=tel],
html[dir=rtl] input[type=number],
html[dir=rtl] input[type=date],
html[dir=rtl] input[type=datetime-local],
html[dir=rtl] input[type=time],
html[dir=rtl] input[type=month],
html[dir=rtl] input[type=password],
html[dir=rtl] .swatch-row input[type=text] {
  direction: ltr;
  unicode-bidi: isolate;
}
/* LTR inputs still sit on the right edge of their label column. */
html[dir=rtl] input[type=email],
html[dir=rtl] input[type=url],
html[dir=rtl] input[type=tel],
html[dir=rtl] input[type=number],
html[dir=rtl] input[type=password] { text-align: right; }

/* Charts and the car diagram are drawn with x coordinates from the left: never mirror them. */
html[dir=rtl] .chart,
html[dir=rtl] .chart svg,
html[dir=rtl] .carsvg,
html[dir=rtl] svg[viewBox] text {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Signature pad: strokes are captured left-to-right on a canvas. */
html[dir=rtl] .sigpad { direction: ltr; }

/* Progress bars fill from the start edge (right) through normal block flow; keep rounded ends. */
html[dir=rtl] .bar i { margin-left: auto; }

/* ---------- printable documents ---------- */
/* Invoice, agreement and statement are legal documents issued in English: keep them LTR when printed or shown. */
html[dir=rtl] .invoice-doc {
  direction: ltr;
  text-align: left;
  font-family: var(--f-body);
}
html[dir=rtl] .invoice-doc th,
html[dir=rtl] .invoice-doc td { text-align: left; }
html[dir=rtl] .invoice-doc .num,
html[dir=rtl] .invoice-doc th.num,
html[dir=rtl] .invoice-doc td.num { text-align: right; }
html[dir=rtl] .invoice-doc [style*="text-align:right"] { text-align: right !important; }
html[dir=rtl] .invoice-doc [style*="text-align:left"] { text-align: left !important; }
html[dir=rtl] .invoice-doc [style*="padding-left:18px"] { padding-left: 18px !important; padding-right: 0; }

/* ---------- small fixes ---------- */
html[dir=rtl] .pill { direction: rtl; }
html[dir=rtl] .check input[type=checkbox],
html[dir=rtl] .check input[type=radio] { margin: 0; }
html[dir=rtl] .lead { max-width: 90ch; }