/* ── overrides deleted, because the rule itself is now direction-aware ──────
 * These flipped a physical property back the other way for right-to-left. That
 * is the mirror-switch approach: two declarations for one decision, and the
 * second one silently wrong whenever somebody edits the first. The rules in
 * admin.css now use logical properties (border-inline-end, margin-inline-start,
 * text-align:start), so the browser resolves the side from the document's
 * direction and the override has nothing left to correct. Keeping it would
 * DOUBLE-flip and put the sidebar border back on the wrong edge.
 *
 * Deleted here: .sidebar border, .admin-main offset, the four .stat-card accent
 * borders, and the data-table header alignment.
 */
/* RTL overrides — loaded ONLY for RTL locales (ar, ku).
   Scoped to [dir="rtl"] so LTR rendering is never affected.
   Targets the REAL admin layout classes (.sidebar, .admin-main, --sidebar-width). */

/* ──────────────────────────────────────────────────────────────────
   OVERFLOW SAFETY — fix for "Kurdish layout scrolls forever to the
   left in landscape."

   The base admin.css only sets overflow-x: hidden inside a
   max-width:768px media query, so landscape tablets (≥769 px) have
   NO horizontal-scroll guard. Kurdish strings often render ~15-20 %
   wider than English (Arabic ditto), and a borderline-fit container
   tips over → the whole page scrolls past the start edge.

   The block below clamps the document, the admin shell, the
   content column, every nav drawer, and every flex/grid container
   so they can NEVER push past the viewport in either axis. Hardens
   LTR too (with the html[dir="ltr"] selector matched explicitly).
   ────────────────────────────────────────────────────────────── */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="ltr"],
html[dir="ltr"] body          { max-width: 100vw; overflow-x: hidden; }
html[dir="rtl"] .admin-main,
html[dir="rtl"] .admin-content,
html[dir="ltr"] .admin-main,
html[dir="ltr"] .admin-content { max-width: 100%; min-width: 0; }
/* Grid & flex children must be allowed to shrink — otherwise a 320px
   minmax column inside a 300px wrapper paints past the edge. */
html[dir="rtl"] .cb-shell,
html[dir="rtl"] .cb-shell > *,
html[dir="rtl"] .page-header,
html[dir="rtl"] .data-table,
html[dir="rtl"] .card,
html[dir="rtl"] .mod-section,
html[dir="rtl"] form,
html[dir="rtl"] .pos        { min-width: 0; }

/* Recover from any element that DOES need to be wide than viewport
   (tables with lots of columns) — give it a horizontal scroller of
   its own instead of letting it push the page sideways. */
html[dir="rtl"] .data-table,
html[dir="rtl"] table.data-table { display: block; overflow-x: auto; max-width: 100%; }

/* Sidebar drawer width on tablets — keep it under viewport. Was
   200-260 px depending on theme; we cap at min(85vw, 280px) so even
   a 320 px narrow phone in portrait or a 600 px landscape doesn't
   get a sidebar wider than the screen. */
html[dir="rtl"] .sidebar       { max-width: min(85vw, 280px); }

[dir="rtl"] body { direction: rtl; text-align: right; }

/* Sidebar moves to the right; main content margin flips to the right side. */
[dir="rtl"] .sidebar { right: 0; left: auto; }

/* Text + table alignment */
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] table th, [dir="rtl"] table td { text-align: right; }
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; }

/* Utility margin flips */
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .nav-badge { margin-left: 0; margin-right: auto; }

/* Dropdowns open from the correct edge */
[dir="rtl"] .dropdown-menu { left: 0; right: auto; }

/* ── ADMIN COMPONENT ACCENTS — flip the physical-side details ──────
   The shell (sidebar/content/dropdowns) already mirrors above; these are
   the small pinned accents that don't follow flex/dir on their own. */

/* Active sidebar item: the 3px accent bar moves to the right edge and its
   rounded corners mirror. */
[dir="rtl"] .nav-link.active::before {
    left: auto; right: 0;
    border-radius: 2px 0 0 2px;
}

/* Sidebar logo border + content offset use logical equivalents. */

/* Sidebar badge (new-message pill) pushes to the LEFT edge in RTL. */
[dir="rtl"] .nav-badge { margin-left: 0; margin-right: auto; }

/* Stat-card coloured accent strip flips from the left to the right side. */


/* Generic inline left/right helpers used across admin views. */
[dir="rtl"] [style*="text-align:left"]:not(.ltr):not([dir="ltr"]) { text-align: right; }
[dir="rtl"] [style*="text-align: left"]:not(.ltr):not([dir="ltr"]) { text-align: right; }

/* Responsive: on mobile the sidebar slides in from the RIGHT, and main content
   spans full width (no side margin) exactly like the LTR mobile layout. */
@media (max-width: 768px) {
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
  [dir="rtl"] .admin-main { margin-right: 0; margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────
   PUBLIC SITE RTL — flip the whole public layout, not just text.
   Scoped to [dir="rtl"] so LTR is never touched.
   ───────────────────────────────────────────────────────────── */
[dir="rtl"] { direction: rtl; }
[dir="rtl"] body { text-align: right; }

/* Public nav: logo right, links flow right-to-left */
[dir="rtl"] .pub-nav { direction: rtl; }
[dir="rtl"] .pub-nav-links { flex-direction: row-reverse; }

/* Headings, paragraphs and generic blocks align right */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p,
[dir="rtl"] .hero, [dir="rtl"] .card-body, [dir="rtl"] section { text-align: right; }

/* But keep deliberately-centred marketing blocks centred */
[dir="rtl"] [style*="text-align:center"], [dir="rtl"] .hero { text-align: center; }

/* Forms and inputs */
[dir="rtl"] label, [dir="rtl"] .form-label { text-align: right; display: block; }
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; }

/* Lists indent from the right */
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.2rem; padding-left: 0; }

/* Flex rows that should mirror (search row, button rows) */
[dir="rtl"] .search-row { flex-direction: row-reverse; }

/* Tables */
[dir="rtl"] table th, [dir="rtl"] table td { text-align: right; }

/* Cards / grids keep their grid flow (grids are direction-aware already) */
[dir="rtl"] .card { text-align: right; }

/* ─────────────────────────────────────────────────────────────
   LATIN / ENGLISH ISOLATION inside an RTL page.
   English text, code, emails, URLs, version numbers etc. must stay
   left-to-right even when the page direction is RTL. Mark such
   content with dir="ltr" or class="ltr" (or use <code>/<bdi>).
   ───────────────────────────────────────────────────────────── */
[dir="rtl"] [dir="ltr"],
[dir="rtl"] .ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* Inline technical tokens always render LTR, wherever they appear. */
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] samp,
[dir="rtl"] pre,
[dir="rtl"] .mono,
[dir="rtl"] .url,
[dir="rtl"] .email,
[dir="rtl"] .ltr-inline {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Numbers / latin runs inside RTL text isolate cleanly (stops the
   "dot jumps to the wrong side" problem with mixed content). */
[dir="rtl"] bdi { unicode-bidi: isolate; }

/* Inputs that hold latin data (email, url, tel, password, numbers)
   should type left-to-right even on an RTL page. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input.ltr,
[dir="rtl"] input[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* ─────────────────────────────────────────────────────────────────
   NEW-COMPONENT COVERAGE (added during the full-RTL pass).
   Everything below targets components added in the recent feature
   waves — without these rules they would render with their LTR-side
   anchors / arrows / pill positions on RTL pages.
   ───────────────────────────────────────────────────────────── */

/* Demo-mode banner ─ collapse chip pinned to the corner. LTR pins it
   bottom-LEFT; on RTL pages that's the wrong "corner of the eye". */
[dir="rtl"] .demo-mini-chip { left: auto !important; right: .85rem; }

/* "⤡ Admin bar" restore pill — bottom-right in LTR → bottom-left in RTL
   so it doesn't collide with the demo chip. */
[dir="rtl"] .chrome-show-pill { right: auto !important; left: .85rem; }

/* Topbar — flex direction reverses, breadcrumb separator flips. The
   admin topbar uses justify-content via flex; reversing the flex
   direction is enough to flip ALL its children at once. */
[dir="rtl"] .admin-topbar { flex-direction: row-reverse; }
[dir="rtl"] .topbar-right { flex-direction: row-reverse; }

/* Topbar "More" menu floats from the right edge in LTR; mirror to left. */
[dir="rtl"] .topbar-more-menu { right: auto !important; left: 0 !important; }

/* ── POS till ─ cart sits on the right in LTR; for an Arabic cashier
      the running total reads naturally on the LEFT side. Reverse the
      grid columns so the cart panel + button grid switch places. */
[dir="rtl"] .pos { grid-template-columns: minmax(320px,1fr) minmax(0,1.5fr); }

/* Cart row qty/price inputs always hold numbers — keep them LTR so the
   decimal point stays on the right of the digits. */
[dir="rtl"] .pos-row input,
[dir="rtl"] .pos-row .pr,
[dir="rtl"] #t-grand,
[dir="rtl"] #t-sub,
[dir="rtl"] #t-vat,
[dir="rtl"] #t-loyalty,
[dir="rtl"] #t-tendered,
[dir="rtl"] #t-due,
[dir="rtl"] [id^="change-"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* Totals rows flip so the LABEL is on the right (start) and the value
   on the left (end), matching the rest of the bilingual UI. */
[dir="rtl"] .pos-totals .ln { flex-direction: row-reverse; }
[dir="rtl"] .pos-totals .grand > span { flex-direction: row-reverse; }
[dir="rtl"] .quick-money { justify-content: flex-end; flex-direction: row-reverse; }

/* Returning-customer + loyalty banners — text reads start-side. */
[dir="rtl"] #posCustomerBanner,
[dir="rtl"] #posLoyaltyPromo { text-align: right; }

/* "🎁 Register" button next to the phone input — keep the leading
   emoji visually before the label on every locale. */
[dir="rtl"] .pos label + div[style*="display:flex"] { flex-direction: row-reverse; }

/* ── KDS kiosk ─ header layout, card text, item rows, stamp. ──── */
[dir="rtl"] .kds-header { direction: rtl; }
[dir="rtl"] .kds-stats  { flex-direction: row-reverse; }
[dir="rtl"] .kds-card   { text-align: right; }
[dir="rtl"] .kds-items li,
[dir="rtl"] .kds-stamp { flex-direction: row-reverse; }
/* The qty cell in each item line stays LTR because qty values are numeric. */
[dir="rtl"] .kds-items li .q,
[dir="rtl"] .kds-items li .pr { direction: ltr; unicode-bidi: isolate; text-align: left; }

/* The diff-arrow row builds bottom-up from the right edge — text-align
   already cascades; just make sure the strike-through removed lines
   keep their qty visually on the start side. */
[dir="rtl"] .kds-items li .nm { text-align: right; }

/* ── Floor plan editor ─ toolbar + legend flip; the canvas itself
      uses absolute x/y positions, so dragging stays direction-neutral
      (a table dropped at x:120 stays at 120 from the LEFT regardless
      of locale, which is correct — the venue layout is physical). */
[dir="rtl"] .fp-toolbar,
[dir="rtl"] .fp-legend { flex-direction: row-reverse; }

/* ── Finance Report ─ revenue breakdown grid, KPI labels. ─────── */
[dir="rtl"] .report-kpi-grid { direction: rtl; }
[dir="rtl"] .data-table th { text-align: right; }
[dir="rtl"] .data-table td[style*="text-align:right"] { text-align: left !important; }
[dir="rtl"] .data-table td[style*="text-align:end"]   { text-align: left !important; }

/* ── Z-report archive ─ year/month/week tree. The summary chevron
      sits on the start side; the running total on the end. ─────── */
[dir="rtl"] details summary { flex-direction: row-reverse; }

/* ── Stat KPI cards on the Reports Overview ─ center stays center. */
[dir="rtl"] .card[style*="text-align:center"] { text-align: center !important; }

/* ── Welcome card (POS customer registration) — QR stays on the
      OPPOSITE side from the customer name block in RTL too. CSS Grid
      handles this with auto-reflow; nothing to override. */

/* ── Numeric money lines — when number_format() yields "1,234.56"
      it should NEVER reverse to "65.432,1". The accountant has to be
      able to read the figures the same way they appear on paper. */
[dir="rtl"] [data-money],
[dir="rtl"] .money,
[dir="rtl"] td[style*="tabular-nums"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* ── Stat bar charts and trend bars use absolute positioning by %.
      Percentages don't need flipping — a 60% bar from the left is
      already "60% from the start" on either locale. No override
      needed; this comment is here to discourage future regressions. */

/* ── Receipt / public track page ─ flip the item rows so qty and
      price sit on the locale-appropriate sides. ──────────────── */
[dir="rtl"] .item-row { flex-direction: row-reverse; }
[dir="rtl"] .item-row .item-qty { text-align: left; direction: ltr; }
[dir="rtl"] .item-row .item-amt { direction: ltr; }
[dir="rtl"] .totals { flex-direction: row-reverse; }
[dir="rtl"] .totals .amt { direction: ltr; }
[dir="rtl"] .kds-banner { text-align: center; direction: rtl; }
[dir="rtl"] .brand { flex-direction: row-reverse; text-align: right; }

/* Print: leave invoices/Z-reports in the document's own direction; do
   not let UI-layer RTL bleed into print artifacts. */
@media print {
    [dir="rtl"] body { direction: rtl; }
}