/* ============================================================================
   Invenza POS — Right-to-left layout
   -----------------------------------------------------------------------------
   Loaded after app.css, which is authored for a left-to-right interface.
   Rather than editing the base stylesheet, the physical properties it relies
   on (left / right / text-align) are mirrored here.

   Everything is scoped to [dir="rtl"], so a left-to-right locale would need
   none of this file and could simply stop loading it.
   ========================================================================== */

[dir="rtl"] {
  /* Arabic needs a font with real glyph coverage and shaping; the Latin stack
     renders it inconsistently, and at the same size it reads smaller.
     Sora leads the stack for the digits only — it has no Arabic glyphs, so
     Arabic text still resolves to IBM Plex Sans Arabic below it. */
  font-family: var(--font-num);
  line-height: 1.7;
  letter-spacing: 0;
  text-align: right;
}

/* --- Sidebar --------------------------------------------------------------
   The base stylesheet pins the sidebar to the left edge; in RTL it belongs on
   the right, and the content column has to be offset from the other side. */
[dir="rtl"] #sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border);
}

/* The gradient hairline marked the sidebar's inner edge; mirror it. */
[dir="rtl"] #sidebar::after {
  right: auto;
  left: 0;
}

[dir="rtl"] #main-wrapper {
  margin-left: 0;
  margin-right: var(--sidebar-width);
}

[dir="rtl"] #main-wrapper.sidebar-collapsed {
  margin-left: 0;
  margin-right: var(--sidebar-collapsed-width);
}

/* Below the sidebar breakpoint it stops being a column offset and becomes an
   overlay drawer, so the content column has to reclaim the full width. The
   base sheet only clears margin-left, which is the wrong edge here — without
   this the page stays indented by the sidebar width on phones and tablets. */
@media (max-width: 1023px) {
  [dir="rtl"] #main-wrapper,
  [dir="rtl"] #main-wrapper.sidebar-collapsed {
    margin-left: 0;
    margin-right: 0;
  }

  /* The drawer hangs off the right edge, so it slides out to the right and
     back — the base sheet hides it by moving it left, which swings it across
     the whole viewport before disappearing. */
  [dir="rtl"] #sidebar {
    transform: translateX(100%);
  }

  [dir="rtl"] #sidebar.mobile-open {
    transform: translateX(0);
  }
}

/* The divider between the logo block and its label was on the left. */
[dir="rtl"] #sidebar-logo .sidebar-label {
  border-left: none;
  border-right: 1px solid var(--border);
  padding-left: 0;
  padding-right: 12px;
}

/* --- Menu items ----------------------------------------------------------- */
[dir="rtl"] .nav-item,
[dir="rtl"] .submenu-item {
  text-align: right;
}

/* Tailwind's text-left is physical; in RTL the reading edge is the right. */
[dir="rtl"] .text-left { text-align: right !important; }

[dir="rtl"] .nav-item .sidebar-label,
[dir="rtl"] .submenu-item span {
  text-align: right;
}

/* Keep the disclosure control pushed to the far end of the row. */
[dir="rtl"] .nav-toggle-icon {
  margin-inline-start: auto;
}

/* --- Header --------------------------------------------------------------- */
[dir="rtl"] #app-header { text-align: right; }

[dir="rtl"] .breadcrumb { direction: rtl; }

[dir="rtl"] .breadcrumb .sep { padding: 0 8px; }

/* The breadcrumb chevron points the way the reader travels; mirror the glyph. */
[dir="rtl"] .breadcrumb .sep::before,
[dir="rtl"] .breadcrumb .sep::after {
  transform: scaleX(-1);
}

/* --- Tables ---------------------------------------------------------------
   Text columns take the reading edge. The action column used text-right to sit
   at the far end, which correctly moves it to the opposite side in RTL. */
[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td {
  text-align: right;
}

[dir="rtl"] .data-table .text-right,
[dir="rtl"] .data-table th.text-right,
[dir="rtl"] .data-table td.text-right {
  text-align: left !important;
}

[dir="rtl"] .data-table .text-left,
[dir="rtl"] .data-table th.text-left,
[dir="rtl"] .data-table td.text-left {
  text-align: right !important;
}

/* --- Forms ---------------------------------------------------------------- */
[dir="rtl"] .form-input,
[dir="rtl"] .form-select,
[dir="rtl"] .form-textarea,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  text-align: right;
  font-family: inherit;
}

[dir="rtl"] .form-label,
[dir="rtl"] .form-hint,
[dir="rtl"] .field-error {
  text-align: right;
}

/* --- Dropdown menus -------------------------------------------------------
   Menus are anchored to the trailing edge, which is the left in RTL. */
[dir="rtl"] .dropdown-menu { text-align: right; }

[dir="rtl"] .action-dropdown-menu,
[dir="rtl"] .dropdown-menu[style*="right:0"] {
  right: auto;
  left: 0;
}

/* --- Flash messages ------------------------------------------------------- */
[dir="rtl"] .alert,
[dir="rtl"] .toast { text-align: right; }

/* --- Totals panels --------------------------------------------------------
   The label sits on the reading edge and the figure on the far edge, which
   keeps digits from drifting away from their label. */
[dir="rtl"] .totals-row span { text-align: right; }

[dir="rtl"] .totals-row strong,
[dir="rtl"] .totals-row span:last-child {
  text-align: left;
}

/* --- Point of sale -------------------------------------------------------- */
[dir="rtl"] .pos-workspace { direction: rtl; }
[dir="rtl"] .pos-cart-row { text-align: right; }
[dir="rtl"] .pos-card { text-align: right; }
[dir="rtl"] #pos-cart-body,
[dir="rtl"] #pos-grid { text-align: right; }

/* --- Print ----------------------------------------------------------------
   A printed invoice is read by the same people as the screen, so the
   direction is preserved rather than flattened back to left-to-right. */
@media print {
  [dir="rtl"] .print-sheet { direction: rtl; }
}