/*
 * Xing Hai Arabic and RTL layout.
 *
 * Keep direction-specific behavior here. The main stylesheet uses logical
 * properties for shared UI; this file only owns true RTL differences.
 */

html[dir="rtl"],
body[dir="rtl"] {
  font-family: "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
  text-align: start;
}

body[dir="rtl"] :where(
  h1,
  h2,
  h3,
  h4,
  p,
  label,
  summary,
  button,
  a,
  input,
  select,
  textarea,
  th,
  td
) {
  letter-spacing: 0;
}

/*
 * The sidebar lives at inline-start. In RTL that is the right edge, so the
 * content must reserve inline-start space too. Older physical left/right
 * overrides caused the content to sit beneath the sidebar with a blank gutter.
 */
@media (min-width: 1025px) {
  body[dir="rtl"].has-admin-sidebar .main-container,
  body[dir="rtl"].has-admin-sidebar.admin-shell main.container {
    margin-inline-start: var(--xh-sidebar-expanded, var(--admin-sidebar-w, 240px)) !important;
    margin-inline-end: 0 !important;
  }

  body[dir="rtl"].has-admin-sidebar.is-admin-sidebar-collapsed .main-container,
  body[dir="rtl"].has-admin-sidebar.is-admin-sidebar-collapsed.admin-shell main.container {
    margin-inline-start: var(--xh-sidebar-collapsed, 72px) !important;
    margin-inline-end: 0 !important;
  }
}

@media (max-width: 1024px) {
  body[dir="rtl"].has-admin-sidebar .main-container,
  body[dir="rtl"].has-admin-sidebar.admin-shell main.container,
  body[dir="rtl"].has-admin-sidebar.is-admin-sidebar-collapsed .main-container,
  body[dir="rtl"].has-admin-sidebar.is-admin-sidebar-collapsed.admin-shell main.container {
    margin-inline: 0 !important;
  }
}

body[dir="rtl"] .admin-sidebar {
  border-inline-start: 1px solid var(--xh-app-line, var(--line));
  border-inline-end: 0;
}

body[dir="rtl"] .admin-side-section__chevron {
  transform: scaleX(-1);
}

body[dir="rtl"] .nav-side-group[open] > .admin-side-section__summary .admin-side-section__chevron {
  transform: rotate(-90deg);
}

body[dir="rtl"] :where(
  .xh-page-header,
  .panel__head,
  .section-head,
  .action-row,
  .xh-page-actions,
  .topbar-tools,
  .filter-actions,
  .table-actions
) {
  text-align: start;
}

body[dir="rtl"] :where(
  .data-table,
  .professional-table,
  .table-wrap,
  .staff-app-flow,
  .detail-grid,
  .form-grid
) {
  direction: rtl;
}

body[dir="rtl"] :where(
  .data-table th,
  .data-table td,
  .professional-table th,
  .professional-table td
) {
  text-align: start !important;
}

body[dir="rtl"] :where(input, textarea, select) {
  text-align: start;
}

/*
 * Phone numbers, URLs, credentials and machine identifiers retain LTR order
 * inside Arabic screens. unicode-bidi: plaintext also keeps mixed content
 * readable without forcing business names into the wrong direction.
 */
body[dir="rtl"] :where(
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[name*="phone"],
  input[name*="username"],
  input[name*="url"],
  input[name*="token"],
  input[name*="secret"],
  code,
  pre,
  .technical-value,
  .mono,
  .meeting-link,
  .phone-number
) {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

body[dir="rtl"] :where(
  .brand-text,
  .subtitle,
  .muted,
  .staff-app-member-row,
  .chat-message__body,
  .chat-message__meta,
  .timeline-item,
  .alert-card-v66
) {
  unicode-bidi: plaintext;
}

body[dir="rtl"] :where(
  .row-more-menu__panel,
  .table-row-more__panel,
  .xh-overflow-menu__panel,
  .lang-menu__dropdown,
  .theme-menu__dropdown
) {
  text-align: start;
}

body[dir="rtl"] :where(
  .dropdown-menu__item,
  .row-more-menu__panel button,
  .row-more-menu__panel a,
  .xh-overflow-menu__panel button,
  .xh-overflow-menu__panel a
) {
  justify-content: flex-start !important;
  text-align: start !important;
}

body[dir="rtl"] .xh-confirm-dialog__actions {
  justify-content: flex-start;
}

body[dir="rtl"] .chat-v613-sidebar {
  border-inline-start: 1px solid var(--xh-app-line, var(--line));
  border-inline-end: 0;
}

body[dir="rtl"] .chat-message.is-mine {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

body[dir="rtl"] .chat-message:not(.is-mine) {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

@media (max-width: 760px) {
  body[dir="rtl"] .topbar__inner,
  body[dir="rtl"] .container.topbar__inner {
    padding-inline: 12px;
  }

  body[dir="rtl"] .xh-page-header {
    text-align: start;
  }
}