/* ============================================
   lang.css — RTL + language-specific tweaks
   ============================================ */

/* Arabic (RTL) mirrors the layout */
html[dir=rtl] .sidebar {
  left: auto;
  right: 0;
}

html[dir=rtl] .content {
  margin-left: 0;
  margin-right: var(--sidebar-width);
}

html[dir=rtl] .messaging-layout {
  flex-direction: row-reverse;
}

html[dir=rtl] .stat-card, html[dir=rtl] .exercise-row, html[dir=rtl] .day-header {
  text-align: right;
}


/* ============================================
   NEW — RTL mirroring for tables & forms
   ============================================ */
html[dir=rtl] .data-table th,
html[dir=rtl] .data-table td {
  text-align: right;
}

/* Form rows lay out left-to-right by default; mirror in RTL */
html[dir=rtl] .form-row {
  direction: rtl;
}

/* Keep buttons aligned to the right in RTL form rows */
html[dir=rtl] .form-row .btn-block {
  justify-content: center;
}

/* Exercise rows: swap the space-between order so actions sit on the left in RTL */
html[dir=rtl] .exercise-row {
  flex-direction: row-reverse;
}

/* Plan controls (edit/del buttons) — mirror so they align to the left in RTL */
html[dir=rtl] .plan-controls {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* Inline exercise form fields — mirror the row order */
html[dir=rtl] .inline-exercise-form {
  flex-direction: row-reverse;
}

/* Message bubbles: in RTL the "mine" (self) bubble reads from the right */
html[dir=rtl] .msg-mine,
html[dir=rtl] .bubble.mine {
  align-self: flex-start;
  border-bottom-right-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
}
html[dir=rtl] .msg-theirs,
html[dir=rtl] .bubble.theirs {
  align-self: flex-end;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-sm);
}

/* Auth card is already centered — ensure text aligns right in RTL */
html[dir=rtl] .auth-card,
html[dir=rtl] .auth-card h2,
html[dir=rtl] .auth-card .form-group label {
  text-align: right;
}

@media (max-width: 768px) {
  html[dir=rtl] .content {
    margin-right: 0;
  }
}