/* Business OS: interim Hebrew (RTL) fixes for Twenty 2.42.6.
 *
 * Injected by the edge (Caddy) into every Twenty page on the CRM host, for every
 * browser, phones included (ADR-0026). Every rule applies only to right-to-left
 * pages and uses stable hooks (link targets and Twenty's constant class names,
 * never its generated ones), so English pages are untouched. Remove each rule
 * when the Twenty release that fixes it upstream is deployed
 * (docs/architecture/rtl-audit-2026-10-07.md).
 */

/* R1: phone numbers read left to right (+972 50 123 4567, not reversed). */
html[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* R2, partly: emails and web links in table cells read left to right and are
   cut at their end. Other English text is still cut at its start: CSS cannot
   tell English text from Hebrew. */
html[dir="rtl"] .record-table-cell-display a[href^="mailto:"],
html[dir="rtl"] .record-table-cell-display a[href^="http"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* R9: pinned columns use logical edges. Twenty pins them with physical `left`,
   so in RTL they stick to the wrong side when a wide table scrolls sideways. */
html[dir="rtl"] div.header-cell.record-table-column-drag-and-drop,
html[dir="rtl"] div.table-cell.record-table-column-drag-and-drop {
  left: auto !important;
  right: 0 !important;
}

html[dir="rtl"] div.header-cell.record-table-column-checkbox,
html[dir="rtl"] div.table-cell.record-table-column-checkbox {
  left: auto !important;
  right: var(--record-table-drag-drop-width) !important;
}

html[dir="rtl"] div.header-cell.record-table-column-field-0,
html[dir="rtl"] div.table-cell.record-table-column-field-0,
html[dir="rtl"] div.table-cell-0-0 {
  left: auto !important;
  right: var(--record-table-first-column-left) !important;
}

/* R9 on phones (Twenty's mobile breakpoint, 768px): the name column's text is
   drawn from a zero-width anchor pinned with `left`, so in RTL it lands off
   screen and the column looks empty. Pin the anchor and its text to the start
   (right) edge instead. */
@media (max-width: 768px) {
  html[dir="rtl"] div.table-cell.record-table-column-field-0 > .record-table-cell-content,
  html[dir="rtl"] div.table-cell-0-0 > .record-table-cell-content,
  html[dir="rtl"] div.header-cell.record-table-column-field-0 .record-table-cell-content,
  html[dir="rtl"] div.footer-cell.record-table-column-field-0 .record-table-cell-content {
    left: auto !important;
    right: calc(var(--record-table-drag-drop-width) + var(--record-table-checkbox-width)) !important;
  }

  html[dir="rtl"] div.table-cell.record-table-column-field-0 > .record-table-cell-content > .record-table-cell-display,
  html[dir="rtl"] div.table-cell-0-0 > .record-table-cell-content > .record-table-cell-display {
    left: auto !important;
    right: 0 !important;
  }
}