/* ==========================================================================
   Right-to-left support (Hebrew).

   MOST of the RTL work is NOT in this file. ds-components.css and ds-pages.css
   use LOGICAL properties — margin-inline-start, border-inline-end,
   inset-inline-start, text-align: start — so the whole frame mirrors itself
   from the dir="rtl" on <html> with no rules here at all. That is deliberate:
   a parallel [dir="rtl"] stylesheet would have to be kept in step with every
   future layout change, and would be forgotten.

   What lives here is only what logical properties cannot express:
     1. glyphs that must be physically mirrored,
     2. content that must stay left-to-right inside a right-to-left page,
     3. third-party markup (Quill) that hardcodes a direction.

   The same rule holds for inline style="" attributes and <style> blocks in
   views: logical properties only. Inline styles beat this stylesheet, so a
   physical one there cannot be fixed from here — tests/i18n.test.js fails on
   any that appear (genuinely coordinate-based ones are marked
   i18n-physical-ok). This file is the one place physical properties are
   allowed, because everything below overrides something that is physical.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mirrored glyphs

   Icons that point somewhere — back/forward arrows, disclosure chevrons, reply
   arrows — mean the opposite thing when the page flips. Add .flip-x to those
   and ONLY those. Never add it to icons that merely contain an asymmetric
   shape (an envelope, a magnifier, a logo): mirroring those just makes them
   look wrong.
   -------------------------------------------------------------------------- */
[dir="rtl"] .flip-x {
  transform: scaleX(-1);
}

/* Mirrored inside a control that is itself transformed (e.g. a rotating
   chevron) — compose rather than overwrite. */
[dir="rtl"] .flip-x.is-open {
  transform: scaleX(-1) rotate(180deg);
}

/* --------------------------------------------------------------------------
   2. Content that stays LTR inside an RTL page

   Email addresses, URLs, phone numbers, case numbers, file paths and code are
   left-to-right regardless of the surrounding language. Without isolation the
   bidi algorithm drags their punctuation to the wrong end — "user@host.com"
   renders as "com.host@user", and "+972 3-555-0110" loses its plus sign. This
   is the single most visible RTL bug in a support tool, because addresses and
   ticket numbers are everywhere.

   `unicode-bidi: isolate` (not `embed`) so the run cannot leak into the
   neighbouring text, and `text-align: start` so it still sits on the correct
   side of its container.
   -------------------------------------------------------------------------- */
.force-ltr,
code, kbd, samp, pre,
.mono, [class*="font-mono"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* Inputs whose VALUE is always Latin. The label beside them stays translated
   and right-aligned; only the typed value flips. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="password"] {
  direction: ltr;
  text-align: start;
}

/* Message bodies and customer-authored text: an English email inside a Hebrew
   UI must render left-to-right, and a Hebrew one right-to-left, decided per
   block by the content itself. Pair this class with dir="auto" on the element
   for the browser to do that detection. */
.dir-auto {
  unicode-bidi: plaintext;
}

/* --------------------------------------------------------------------------
   3. Third-party markup

   Quill hardcodes ltr on its editor and toolbar. Composing a reply in Hebrew
   has to actually type right-to-left, so the editor follows the UI direction.
   The toolbar's button order flips on its own, but its spacing, picker
   arrows and list markers are physical in quill.snow.css — overridden below.
   -------------------------------------------------------------------------- */
[dir="rtl"] .ql-editor {
  direction: rtl;
  text-align: right;
}

/* Quill's own alignment classes must keep winning over the rule above,
   otherwise a deliberately left-aligned paragraph snaps back. */
[dir="rtl"] .ql-editor .ql-align-left   { text-align: left; }
[dir="rtl"] .ql-editor .ql-align-center { text-align: center; }
[dir="rtl"] .ql-editor .ql-align-right  { text-align: right; }

/* The blockquote/list indents Quill draws with physical padding. */
[dir="rtl"] .ql-editor blockquote {
  border-left: none;
  border-right: 4px solid #ccc;
  padding-left: 0;
  padding-right: 16px;
}
[dir="rtl"] .ql-editor ol,
[dir="rtl"] .ql-editor ul {
  padding-left: 0;
  padding-right: 1.5em;
}

/* Quill's dropdown pickers are absolutely positioned with physical offsets. */
[dir="rtl"] .ql-snow .ql-picker-options {
  left: auto;
  right: 0;
}

/* Toolbar: the gap between button groups and the picker label/arrow are
   physical in quill.snow.css. */
[dir="rtl"] .ql-toolbar.ql-snow .ql-formats {
  margin-right: 0;
  margin-left: 15px;
}
[dir="rtl"] .ql-snow .ql-picker-label {
  padding-left: 2px;
  padding-right: 8px;
}
[dir="rtl"] .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  right: auto;
  left: 0;
}

/* Quill 2 draws list markers in a .ql-ui pseudo-element offset into the
   item's left padding. These are the same mirrored values Quill applies to a
   paragraph marked .ql-direction-rtl, applied here to the whole RTL page. */
[dir="rtl"] .ql-editor li {
  padding-left: 0;
  padding-right: 1.5em;
}
[dir="rtl"] .ql-editor li > .ql-ui:before {
  margin-left: .3em;
  margin-right: -1.5em;
  text-align: left;
}