/* ==========================================================================
   Paya Design System — right-to-left corrections
   --------------------------------------------------------------------------
   Only loaded when is_rtl() is true.

   Perfex already sets dir="rtl" and ships bootstrap-arabic, which handles the
   broad layout flip. What remains are the places Bootstrap 3 hard-codes a
   physical side that no dir attribute can reach, plus the content that must
   stay left-to-right inside a right-to-left page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Content that must not flip
   --------------------------------------------------------------------------
   Numbers, e-mail addresses, URLs and money read left-to-right even inside a
   Persian sentence. `unicode-bidi: isolate` stops the bidi algorithm dragging
   trailing punctuation to the wrong end — the classic "(۱۲۳" artefact.
   -------------------------------------------------------------------------- */

[dir='rtl'] body.app.admin .paya-ltr,
[dir='rtl'] body.customers .paya-ltr,
[dir='rtl'] body.app.admin input[type='email'],
[dir='rtl'] body.app.admin input[type='url'],
[dir='rtl'] body.app.admin input[type='tel'],
[dir='rtl'] body.app.admin input[type='number'],
[dir='rtl'] body.customers input[type='email'],
[dir='rtl'] body.customers input[type='tel'] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* Amounts sit at the reading edge but do not reorder internally. */
[dir='rtl'] body.app.admin .amount,
[dir='rtl'] body.app.admin td.amount,
[dir='rtl'] body.customers .amount {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* --------------------------------------------------------------------------
   2. Float utilities
   --------------------------------------------------------------------------
   .pull-right / .pull-left mean "end of the line" / "start of the line" to
   the person who wrote the view, not a literal side.
   -------------------------------------------------------------------------- */

[dir='rtl'] body.app.admin .pull-right,
[dir='rtl'] body.customers .pull-right { float: left !important; }

[dir='rtl'] body.app.admin .pull-left,
[dir='rtl'] body.customers .pull-left { float: right !important; }

[dir='rtl'] body.app.admin .text-right, [dir='rtl'] body.customers .text-right { text-align: left; }
[dir='rtl'] body.app.admin .text-left,  [dir='rtl'] body.customers .text-left  { text-align: right; }

/* --------------------------------------------------------------------------
   3. Tables and forms
   -------------------------------------------------------------------------- */

[dir='rtl'] body.app.admin .table > thead > tr > th,
[dir='rtl'] body.app.admin .table > tbody > tr > td,
[dir='rtl'] body.customers .table > thead > tr > th,
[dir='rtl'] body.customers .table > tbody > tr > td {
  text-align: right;
}

[dir='rtl'] body.app.admin .form-horizontal .control-label { text-align: left; }
[dir='rtl'] body.app.admin .close, [dir='rtl'] body.customers .close { float: left; }
[dir='rtl'] body.app.admin .modal-footer, [dir='rtl'] body.customers .modal-footer { text-align: left; }

/* Input groups: Bootstrap 3 rounds by physical side, so the visual first
   child is the last DOM child under RTL and the corners come out sheared. */
[dir='rtl'] body.app.admin .input-group .form-control:first-child,
[dir='rtl'] body.app.admin .input-group-addon:first-child,
[dir='rtl'] body.app.admin .input-group-btn:first-child > .btn {
  border-radius: 0 var(--paya-radius-md) var(--paya-radius-md) 0;
}

[dir='rtl'] body.app.admin .input-group .form-control:last-child,
[dir='rtl'] body.app.admin .input-group-addon:last-child,
[dir='rtl'] body.app.admin .input-group-btn:last-child > .btn {
  border-radius: var(--paya-radius-md) 0 0 var(--paya-radius-md);
}

/* --------------------------------------------------------------------------
   4. Dropdowns and menus
   -------------------------------------------------------------------------- */

[dir='rtl'] body.app.admin .dropdown-menu,
[dir='rtl'] body.customers .dropdown-menu {
  right: 0;
  left: auto;
  text-align: right;
}

[dir='rtl'] body.app.admin .dropdown-menu-right { right: auto; left: 0; }
[dir='rtl'] body.app.admin .dropdown-submenu > .dropdown-menu { right: 100%; left: auto; }

/* --------------------------------------------------------------------------
   5. Sidebar
   -------------------------------------------------------------------------- */

[dir='rtl'] body.app.admin .sidebar ul.nav li a i.menu-icon {
  float: right;
  margin-right: 0;
  margin-left: var(--paya-space-3);
}

[dir='rtl'] body.app.admin .sidebar ul.nav li .nav-second-level li a {
  padding-right: var(--paya-space-12);
  padding-left: var(--paya-space-4);
}

[dir='rtl'] body.app.admin .sidebar .arrow { float: left; }

/* A chevron points at the panel it opens; under RTL that is the other way.
   Mirroring the glyph is more reliable than swapping it for a different one,
   which would need every icon name to have a counterpart. */
[dir='rtl'] body.app.admin .fa-angle-left,
[dir='rtl'] body.app.admin .fa-angle-right,
[dir='rtl'] body.app.admin .fa-chevron-left,
[dir='rtl'] body.app.admin .fa-chevron-right,
[dir='rtl'] body.app.admin .fa-arrow-left,
[dir='rtl'] body.app.admin .fa-arrow-right,
[dir='rtl'] body.customers .fa-angle-left,
[dir='rtl'] body.customers .fa-angle-right {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   6. DataTables controls
   -------------------------------------------------------------------------- */

[dir='rtl'] body.app.admin .dataTables_wrapper .dataTables_filter   { float: left; text-align: left; }
[dir='rtl'] body.app.admin .dataTables_wrapper .dataTables_length   { float: right; }
[dir='rtl'] body.app.admin .dataTables_wrapper .dataTables_info     { float: right; }
[dir='rtl'] body.app.admin .dataTables_wrapper .dataTables_paginate { float: left; }

[dir='rtl'] body.app.admin .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: var(--paya-space-2);
  padding-left: var(--paya-space-5);
  text-align: right;
}

[dir='rtl'] body.app.admin #toast-container > div {
  direction: rtl;
  text-align: right;
}

/* ==========================================================================
   TinyMCE menu sink
   --------------------------------------------------------------------------
   Perfex's own stylesheet carries a very broad rule:

       [dir="rtl"] { overflow-x: hidden; }          assets/css/style.css

   TinyMCE renders every menu, dropdown and context toolbar into a "sink"
   element appended to <body>:

       <div class="tox tox-silver-sink tox-tinymce-aux" dir="rtl">

   It stamps dir="rtl" on that element as soon as the loaded language pack
   declares `_dir: "rtl"` — which langs/fa.js does. The sink then matches the
   rule above, and because the sink is deliberately zero-height, an
   overflow-x other than visible forces overflow-y to compute to `auto`. The
   absolutely positioned menu inside is clipped away completely.

   The result is menus that open — aria-expanded flips, the items are built
   and measured correctly — but paint nowhere and cannot be clicked. It looks
   exactly like a dead menubar, and it only appears once the Persian language
   pack is in place, which is what makes it look like a translation problem.

   Verified by hit-testing the menu's own coordinates: before this rule
   document.elementFromPoint returned the page content behind the menu;
   after it, the menu item itself.

   This is scoped to the sink alone. The menus keep their own overflow, so
   long dropdowns still scroll. */
.tox-tinymce-aux,
.tox.tox-silver-sink {
  overflow: visible !important;
}