/* RTL layout overrides, scoped under [dir="rtl"] (set on <html> by
   assets/js/i18n.js). Loaded on every page alongside the app's normal
   stylesheets - it does nothing until the page is switched to
   Arabic, so it's safe to include everywhere rather than swapping
   stylesheets per-language.

   This is a targeted override file rather than a rewrite of
   base.css/app-shell.css into logical properties (margin-inline-start
   etc.) - that's the more "correct" long-term approach, but doing it
   as overrides here means every existing LTR rule keeps working
   exactly as before, and each RTL fix is visible in one place instead
   of scattered through the base stylesheets. */

[dir="rtl"] { text-align: right; }

/* --- App shell --- */
[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--color-outline-variant);
}
[dir="rtl"] .nav-link:hover { transform: translateX(-2px); }

/* Mobile nav drawer - the sidebar sits on the right in RTL (flexbox
   reverses main-axis start with the page direction), so the off-canvas
   drawer added in app-shell.css must anchor and slide from the right too. */
@media (max-width: 900px) {
  [dir="rtl"] .sidebar {
    left: auto; right: 0;
    transform: translateX(100%);
  }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
}

[dir="rtl"] .role-switch-dropdown,
[dir="rtl"] .notif-dropdown {
  right: auto;
  left: 0;
}
[dir="rtl"] .role-switch-option { text-align: right; }
[dir="rtl"] .notif-badge { right: auto; left: -2px; }
[dir="rtl"] .notif-item { text-align: right; }

[dir="rtl"] .specialty-chip { margin: 2px 0 2px 4px; }

/* --- Tables --- */
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }

/* --- Banners (colored left border used as an accent stripe - flips
   to the leading edge, which is the right side in RTL) --- */
[dir="rtl"] .banner { border-left: none; border-right: 4px solid transparent; }
[dir="rtl"] .banner-error { border-left-color: transparent; border-right-color: var(--color-error); }
[dir="rtl"] .banner-success { border-left-color: transparent; border-right-color: var(--color-success); }

/* --- Forms --- */
[dir="rtl"] .field-row { flex-direction: row-reverse; }
[dir="rtl"] .row-actions { text-align: left; }

/* --- Auth pages (login/register split layout) --- */
[dir="rtl"] .auth-shell { direction: rtl; }
[dir="rtl"] .tabs { align-self: flex-end; }

/* --- Print documents --- */
[dir="rtl"] .header { flex-direction: row-reverse; }
[dir="rtl"] .meta-row { flex-direction: row-reverse; }
[dir="rtl"] .totals { text-align: left; }
[dir="rtl"] .stamp { transform: translate(-50%, -50%) rotate(18deg); }

/* --- Patient portal profile card --- */
[dir="rtl"] .patient-avatar-upload { right: auto; left: -2px; }

/* --- Misc small utility flips --- */
[dir="rtl"] .row-actions.text-right { text-align: left; }