/* RTL fixes and bug fixes for Twenty's UI. Twenty sets <html dir="rtl"> itself
   for RTL languages, so every rule is scoped to html[dir='rtl'], which also
   outranks the single-class rules in Twenty's CSS without !important.
   The class names are build hashes from Twenty's CSS (linaria), so re-check
   them after any image update. */

/* Menu item icon (e.g. the settings icon in the navigation drawer):
   the gap belongs on the left of the icon in RTL. */
html[dir='rtl'] .s1blnvxp {
  margin-right: unset;
  margin-left: var(--t-spacing-2);
}

/* GraphQL playground (Settings > APIs > Playground): GraphiQL and its Monaco
   editors assume LTR and break under dir="rtl", so the whole playground stays LTR. */
html[dir='rtl'] .graphiql-container {
  direction: ltr;
  text-align: left;
}

/* Settings sections (e.g. Profile > Name): the Section component's
   data-align="left" sets a physical text-align: left, which pins the
   description and the field labels to the left in RTL. */
html[dir='rtl'] ._root_ztxxm_1[data-align='left'] {
  text-align: start;
}

/* Select field button (e.g. Settings > Experience > Language): a physical
   text-align: left pins the selected value to the left in RTL. */
html[dir='rtl'] .stjcje8 {
  text-align: start;
}

/* Record table (index pages): the sticky columns (drag handle, checkbox, name)
   are pinned with physical `left` offsets, mirrored here to `right`.
   On mobile the name cell is the important one: Twenty puts its content in a
   zero-width sticky box and positions the chip absolutely at `left: 0`, which in
   RTL lands outside the cell, where `overflow: clip` hides it. The names were
   invisible and could not be tapped to open the record. */
html[dir='rtl'] .s16b0281 div.header-cell.record-table-column-drag-and-drop,
html[dir='rtl'] .s16b0281 div.table-cell.record-table-column-drag-and-drop,
html[dir='rtl'] .sxd9i94 div.table-cell.record-table-column-drag-and-drop {
  left: auto;
  right: 0;
}
html[dir='rtl'] .s16b0281 div.header-cell.record-table-column-checkbox,
html[dir='rtl'] .s16b0281 div.table-cell.record-table-column-checkbox,
html[dir='rtl'] .sxd9i94 div.table-cell.record-table-column-checkbox {
  left: auto;
  right: var(--record-table-drag-drop-width);
}
html[dir='rtl'] .s16b0281 div.header-cell.record-table-column-field-0 {
  left: 0;
  right: var(--record-table-first-column-left);
}
html[dir='rtl'] .s16b0281 div.table-cell.record-table-column-field-0,
html[dir='rtl'] .s16b0281 div.table-cell-0-0 {
  left: auto;
  right: var(--record-table-first-column-left);
}
html[dir='rtl'] .sxd9i94 div.table-cell.record-table-column-field-0,
html[dir='rtl'] .sxd9i94 div.table-cell-0-0 {
  left: auto;
  right: calc(var(--record-table-drag-drop-width) + var(--record-table-checkbox-width));
}
@media (width<=768px) {
  html[dir='rtl'] .s16b0281 div.table-cell.record-table-column-field-0 > .record-table-cell-content,
  html[dir='rtl'] .s16b0281 div.table-cell-0-0 > .record-table-cell-content,
  html[dir='rtl'] .s16b0281 div.header-cell.record-table-column-field-0 .record-table-cell-content,
  html[dir='rtl'] .s16b0281 div.footer-cell.record-table-column-field-0 .record-table-cell-content {
    left: auto;
    right: calc(var(--record-table-drag-drop-width) + var(--record-table-checkbox-width));
  }
  html[dir='rtl'] .s16b0281 div.table-cell.record-table-column-field-0 > .record-table-cell-content > .record-table-cell-display,
  html[dir='rtl'] .s16b0281 div.table-cell-0-0 > .record-table-cell-content > .record-table-cell-display {
    left: auto;
    right: 0;
  }
}

/* Loading / empty placeholder rows of the record table. */
html[dir='rtl'] .s1fq0cyi {
  left: auto;
  right: 0;
}
html[dir='rtl'] .s1rxj04e {
  left: auto;
  right: 12px;
}
html[dir='rtl'] .s1q977n {
  left: auto;
  right: 40px;
}