/*
 * Hand-maintained RTL fixes. Loaded ONLY when dir="rtl", after whapbot.rtl.css.
 *
 * This is the counterpart to the generated stylesheets: rtlcss mirrors physical properties, but it
 * cannot know that a glyph points the wrong way or that a toast should arrive from the other side
 * of the screen. Anything requiring that judgement belongs here.
 *
 * Do NOT put mirrorable rules here — if rtlcss can handle it, fix the LTR source and re-run
 * `npm run build:rtl`. Rules added here have to be maintained by hand forever.
 */

/* ══════════════════════════════════════════════════════════════════════════
   Typography
   ══════════════════════════════════════════════════════════════════════════
   Cairo is the de-facto standard for GCC product UI. Open Sans (the LTR face) has a weak Arabic
   subset and renders Arabic with inconsistent stroke weight next to its Latin.

   The line-height bump is not cosmetic. Arabic ascenders and descenders are taller than Latin,
   and diacritics sit above the baseline — at the theme's default line-height they clip. */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] .btn,
[dir="rtl"] .form-control {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

[dir="rtl"] body {
  line-height: 1.7;
}

/* Latin digits and Latin-script content (phone numbers, WhatsApp IDs, template names, API tokens)
   must stay LTR even inside an RTL paragraph, or the browser's bidi algorithm reorders them.
   Apply to any element rendering a value that is not natural-language Arabic. */
[dir="rtl"] .ltr-value,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .phone-number,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
  direction: ltr;
  unicode-bidi: embed;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar brand logo
   ══════════════════════════════════════════════════════════════════════════
   A brand lockup does not mirror. The icon-then-wordmark arrangement is part of the mark itself,
   not a reading-order decision, so the whole block is pinned back to LTR.

   Concretely: .sidebar-logo positions the wordmark with `margin-top: -38px; margin-left: -11px`,
   pulling it up and across so it sits OVER the icon and hides it while the sidebar is expanded.
   The icon is only meant to be visible in compact mode, when the wordmark is gone.

   rtlcss mirrored that to `margin-right: -11px` — mechanically correct, but it moves the wordmark
   away from the icon instead of over it, so both render and overlap. Restoring direction: ltr on
   the container lets the original hand-tuned offsets do what they were measured to do. */
[dir="rtl"] .nk-header-app-logo,
[dir="rtl"] .nk-header-app-logo .nk-nav-toggle {
  direction: ltr;
}

/* ...but the BOX must also shrink to its content.
   The base rule fixes .nk-header-app-logo at width: 300px, wider than the sidebar in either state
   (60px collapsed, ~190px expanded). In LTR a block is inline-start anchored, so that extra width
   spills rightward into the content area, past the point where the lockup actually ends — nothing
   visible lands on anything. Mirrored, the box is right-anchored and the same slack spills LEFT,
   dropping ~110px of it straight onto the header greeting.

   fit-content, NOT auto: `width: auto` on a block means fill the parent, so the box stayed 300px
   wide and the overlap survived. fit-content collapses it to the lockup's real width, which leaves
   it anchored at the sidebar edge.

   And no max-width here. whapbot.css:15659 sets a global `img { max-width: 100% }`, so capping
   this container's width also scales the logo images down — that is what shrank the icon to the
   60px sidebar in collapsed mode. Sizing to content sidesteps it entirely. */
[dir="rtl"] .nk-header-app-logo {
  width: fit-content;
  max-width: none;
}

/* The wordmark PNG contains its own copy of the mark, and the LTR offsets line it up exactly on
   top of the icon image so the two read as one lockup. That alignment is the sum of TWO margins:
   .nk-menu-text's +10px and .sidebar-logo's -11px, netting -1px.

   rtlcss flipped both to the opposite side. Restoring only .sidebar-logo left the wordmark ~20px
   off, so the two marks no longer coincide and the B renders doubled. Both have to go back.

   Scoped to the logo — .nk-menu-text's margin SHOULD flip for the actual menu labels below. */
[dir="rtl"] .nk-header-app-logo .nk-menu-text {
  margin-right: 0;
  margin-left: 10px;
}

[dir="rtl"] .sidebar-logo {
  margin-right: 0;
  margin-left: -11px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Directional icons
   ══════════════════════════════════════════════════════════════════════════
   Navigational arrows and chevrons indicate "forward"/"back", which reverses in RTL. Flipped as a
   class-wide rule rather than hunted down individually — there are hundreds of usages.

   Deliberately NOT flipped: up/down carets, external-link icons, and brand glyphs, none of which
   have a reading direction. If a specific arrow should stay put, add .no-rtl-flip to it. */
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-double-right,
[dir="rtl"] .fa-angle-double-left,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .ni-chevron-right,
[dir="rtl"] .ni-chevron-left,
[dir="rtl"] .ni-arrow-right,
[dir="rtl"] .ni-arrow-left {
  transform: scaleX(-1);
}

[dir="rtl"] .no-rtl-flip {
  transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Toastr
   ══════════════════════════════════════════════════════════════════════════
   The library hardcodes its geometry per position class, so the RTL correction has to be explicit.

   Note that a good number of call sites already pass positionClass: 'toast-top-center', which is
   direction-neutral and needs nothing — only the corner positions matter here. */
[dir="rtl"] #toast-container > div {
  direction: rtl;
  text-align: right;
  /* Icon sits on the right in RTL; the library's default padding assumes the left. */
  padding: 15px 50px 15px 15px;
  background-position: calc(100% - 15px) center;
}

[dir="rtl"] #toast-container.toast-top-right,
[dir="rtl"] #toast-container.toast-bottom-right {
  right: auto;
  left: 12px;
}

[dir="rtl"] #toast-container.toast-top-left,
[dir="rtl"] #toast-container.toast-bottom-left {
  left: auto;
  right: 12px;
}

[dir="rtl"] .toast-close-button {
  float: left;
}

/* ══════════════════════════════════════════════════════════════════════════
   DataTables horizontal scroll (scrollX)
   ══════════════════════════════════════════════════════════════════════════
   Tables carrying the `nowrap` class get scrollX: true (assets/js/scripts.js). DataTables 1.10
   then measures the columns and writes explicit pixel widths, expecting the overflow to be
   absorbed by .dataTables_scrollBody's own scrollbar.

   Under RTL that containment fails and the width propagates up the ancestors instead:

     .dataTables_scroll   2241px
     .card-inner          2275px
     .components-preview  2336px   <- overflows the viewport, page-level scrollbar appears

   DataTables 1.10.10 predates proper RTL support for scrollX, so this is a CLAMP rather than a
   root-cause fix: pin the chain to its container and let the scroll body do the scrolling it was
   supposed to do. min-width: 0 is the part that matters — without it a flex or grid ancestor
   refuses to shrink an item below its content's min-content size, which is what lets a wide table
   push its parents open.

   Scoped to RTL: LTR already contains this correctly, and widening the blast radius on ~100 tables
   to fix a bug that only appears in one direction is not a trade worth making. */
[dir="rtl"] .components-preview,
[dir="rtl"] .dataTables_wrapper,
[dir="rtl"] .dataTables_scroll,
[dir="rtl"] .dataTables_scrollHead,
[dir="rtl"] .dataTables_scrollBody {
  min-width: 0;
  max-width: 100%;
}

/* The scrollbar belongs here, on the body, not on the page. */
[dir="rtl"] .dataTables_scrollBody {
  overflow-x: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   DataTables layout — deliberately NOTHING here
   ══════════════════════════════════════════════════════════════════════════
   This block previously floated .dataTables_length / _filter / _info / _paginate to mirror them.
   That was wrong, and it broke the layout on every table screen (campaigns, templates, contacts,
   flows): cards shifted left and the length dropdown overflowed off the edge.

   The theme does not lay DataTables out with floats. NioApp.DataTable builds a Bootstrap grid via
   the dom option:

     <"row justify-between"<"col-7 col-sm-4 text-start"f><"col-5 col-sm-8 text-end"...l>>
     <"row align-items-center"<"col-md-9"p><"col-md-3 text-start text-md-end"i>>

   .row is flex and text-start/text-end are logical properties, so Bootstrap already mirrors the
   whole thing under dir="rtl". Adding float pulled those elements out of normal flow INSIDE their
   grid columns, collapsing the columns and dragging the surrounding card with them.

   The length dropdown's caret needs no rule either: whapbot.css positions it from the right and
   rtlcss generates `background-position: left 0.5rem center` in whapbot.rtl.css automatically.

   Lesson worth keeping: check whether the theme already solves it with logical properties before
   hand-writing a mirror. A redundant override is not harmless — it fights the thing that works. */

/* ══════════════════════════════════════════════════════════════════════════
   Timestamps and dates — bidi, not layout
   ══════════════════════════════════════════════════════════════════════════
   "05:49 pm" rendered as "pm 05:49", and "06 Aug 2026" as "Aug 2026 06".

   Nothing is mispositioned here — this is the Unicode bidi algorithm doing its job. A run of
   Latin-script characters inside an RTL paragraph is laid out right-to-left AS A WHOLE, so the
   neutral space between "05:49" and "pm" lets the two tokens swap places. Same reason the day
   number migrates to the end of a date.

   direction: ltr fixes the run's internal order; isolate keeps it from disturbing the Arabic
   either side of it. text-align: end then places the whole block on the correct side for RTL, so
   the fix is bidi-only and does not undo the mirroring.

   This applies to any Latin-script value embedded in Arabic prose — phone numbers, WhatsApp IDs,
   template names, currency amounts — which is why .ltr-value below is a reusable hook. */
[dir="rtl"] .chat-meta,
[dir="rtl"] .chat-meta_me,
[dir="rtl"] .chat-meta li,
[dir="rtl"] .chat-meta_me li,
[dir="rtl"] .last-message-time,
[dir="rtl"] .chat-sap,
[dir="rtl"] .chat-sap span,
[dir="rtl"] .ltr-value {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The meta block itself still belongs on the mirrored side; only its CONTENTS read left-to-right. */
[dir="rtl"] .chat-meta,
[dir="rtl"] .chat-meta_me {
  text-align: end;
}

/* ══════════════════════════════════════════════════════════════════════════
   Chat bubbles
   ══════════════════════════════════════════════════════════════════════════
   The highest-risk surface in the app. The tails are hand-drawn CSS triangles built from
   border-width tricks, and rtlcss mirrors the offsets but NOT which border edge carries the
   colour — so a naive flip produces a tail pointing into the bubble.

   Sent/received sides swap wholesale in RTL, so the tails swap with them.

   ⚠ VERIFY VISUALLY before shipping. These are asserted from the CSS, not from a rendered page. */
[dir="rtl"] .chat.is-you .chat-msg::after {
  left: auto;
  right: -5px;
  border-right: none;
  border-left: 10px solid #fff;
}

[dir="rtl"] .chat-attachment-news-new .message.received .message-content::after {
  right: auto;
  left: -6px;
  border-left: none;
  border-right: 10px solid white;
}

/* ══════════════════════════════════════════════════════════════════════════
   Form validation
   ══════════════════════════════════════════════════════════════════════════
   Bootstrap's is-invalid icon is a background-image offset from the right edge; the LTR source
   additionally nudges it to clear the character counter in the template builder. */
[dir="rtl"] .form-control.is-invalid,
[dir="rtl"] .was-validated .form-control:invalid {
  background-position: left calc(0.375em + 0.1875rem) center;
}

[dir="rtl"] .buttonsRow .form-control.is-invalid {
  background-position: left 55px center;
  padding-right: 0.75rem;
  padding-left: 75px;
}

[dir="rtl"] .buttonsRow .char-count-input.is-invalid + .char-count-display {
  right: auto;
  left: 10px;
}