/**
 * Qvora Clinic — right-to-left layout for the Arabic interface (Phase 2).
 *
 * <html dir="rtl"> is set by js/lang-boot.js when Arabic is chosen. Most of the
 * layout is flexbox and already mirrors; this file covers what does not:
 * directional icons, Tabler's physical margin utilities, text that was
 * hard-coded to the left, and English data (names, codes) inside Arabic text.
 * Views and dialogs that are not translated yet carry dir="ltr"; every rule
 * uses :dir(rtl), so those islands are left exactly as in English. Screen only; printing is unchanged.
 */
@media screen {

body:dir(rtl) { font-family: var(--font-arabic); }
body:dir(rtl) :where(h1, h2, h3, h4, p, label, button, td, th, li, span, div):dir(rtl) { letter-spacing: 0; }

/* Directional icons point the reading way */
.ti-chevron-left:dir(rtl), .ti-chevron-right:dir(rtl),
.ti-arrow-left:dir(rtl), .ti-arrow-right:dir(rtl),
.ti-chevrons-left:dir(rtl), .ti-chevrons-right:dir(rtl),
.ti-arrow-back-up:dir(rtl), .ti-logout:dir(rtl),
.ti-layout-sidebar-left-collapse:dir(rtl), .ti-layout-sidebar-left-expand:dir(rtl) { transform: scaleX(-1); }

/* Tabler's margin utilities are physical (margin-right for .me-*) */
.me-1:dir(rtl) { margin-right: 0 !important; margin-left: .25rem !important; }
.me-2:dir(rtl) { margin-right: 0 !important; margin-left: .5rem !important; }
.ms-1:dir(rtl) { margin-left: 0 !important; margin-right: .25rem !important; }
.ms-2:dir(rtl) { margin-left: 0 !important; margin-right: .5rem !important; }
.ms-auto:dir(rtl) { margin-left: 0 !important; margin-right: auto !important; }
.text-right:dir(rtl), .text-end:dir(rtl) { text-align: left !important; }
.text-left:dir(rtl), .text-start:dir(rtl) { text-align: right !important; }

/* Tables, lists and tabs start from the right */
.data-table th:dir(rtl), .data-table td:dir(rtl) { text-align: right; }
.data-table td.num:dir(rtl), .data-table th.num:dir(rtl) { text-align: left; }
.folder-tabs .tab:dir(rtl) { text-align: right !important; }
.modal-actions:dir(rtl), .qv-dialog-foot:dir(rtl) { justify-content: flex-start; }

/* English data inside Arabic screens keeps its own reading order */
.sidebar-user-info strong:dir(rtl), .sidebar-user-name:dir(rtl), .sidebar-clinic strong:dir(rtl),
.patient-card-info strong:dir(rtl), .patient-card-info span:dir(rtl),
.data-table td:dir(rtl), .notif-item strong:dir(rtl), .info-item .value:dir(rtl),
input:dir(rtl), select:dir(rtl), textarea:dir(rtl) { unicode-bidi: plaintext; }
input[type="tel"]:dir(rtl), input[type="email"]:dir(rtl), input[type="number"]:dir(rtl),
.phone-number-input:dir(rtl), .phone-dial:dir(rtl), .qv-mono:dir(rtl) { direction: ltr; text-align: right; }

/* Arabic reads better one step larger (body-ar) */
.data-table td:dir(rtl), .modal-body:dir(rtl), .hint:dir(rtl), .qv-dialog-message:dir(rtl) { line-height: 1.7; }
.sidebar-nav-item:dir(rtl), .folder-tabs .tab:dir(rtl), .btn:dir(rtl) { font-size: 14px; }

/* Language switch */
.qv-lang-toggle { font-weight: 500; }
.qv-lang-toggle .qv-lang-label[lang], .qv-lang-toggle[lang="ar"] .qv-lang-label { font-family: var(--font-arabic); }
.topbar-actions { display: flex; gap: var(--space-2); align-items: center; }
.auth-lang { display: flex; justify-content: center; margin-top: var(--space-4); }

}

@media screen {
/* English islands (views not translated yet) keep the Latin UI face */
[lang="en"][dir="ltr"] { font-family: var(--font-sans); }
}

/* Encounter workspace: in LTR it opens beside the sidebar (qvora-tabler.css pins it with a
   physical left offset). In RTL the sidebar is on the right, so the offset moves to the right. */
@media screen and (min-width: 1025px) {
  #encounterModalOverlay:dir(rtl) { left: 0 !important; right: var(--app-sidebar-width, 240px) !important; width: auto !important; }
}

/* Dropdown arrow: style.css draws it on the right (calc(100% - 16px)); in RTL the text starts on
   the right, so the arrow moves to the left edge, where the padding already makes room. */
select:dir(rtl):not(.form-select):not([multiple]) { background-position: 11px center, 16px center; }
select.form-select:dir(rtl):not([multiple]) { background-position: left 12px center; }