/* ============================================
   MEDICODA — RTL Styles
   ============================================
   Arabic-first RTL support. Uses CSS logical 
   properties where possible for natural RTL.
   ============================================ */

/* ── Base RTL Direction ── */
[dir="rtl"] {
    text-align: right;
}

/* ── Logical property helpers ── */
/* Use these classes for directional spacing instead of margin-left/right */

.ms-1 { margin-inline-start: var(--space-1); }
.ms-2 { margin-inline-start: var(--space-2); }
.ms-3 { margin-inline-start: var(--space-3); }
.ms-4 { margin-inline-start: var(--space-4); }
.me-1 { margin-inline-end: var(--space-1); }
.me-2 { margin-inline-end: var(--space-2); }
.me-3 { margin-inline-end: var(--space-3); }
.me-4 { margin-inline-end: var(--space-4); }

.ps-1 { padding-inline-start: var(--space-1); }
.ps-2 { padding-inline-start: var(--space-2); }
.ps-3 { padding-inline-start: var(--space-3); }
.ps-4 { padding-inline-start: var(--space-4); }
.pe-1 { padding-inline-end: var(--space-1); }
.pe-2 { padding-inline-end: var(--space-2); }
.pe-3 { padding-inline-end: var(--space-3); }
.pe-4 { padding-inline-end: var(--space-4); }

/* ── RTL-aware flex ── */
[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

/* ── Icons that need flipping in RTL ── */
/* Arrows, breadcrumbs, navigation chevrons */
[dir="rtl"] .icon-flip {
    transform: scaleX(-1);
}

/* ── Phone numbers and English text stay LTR ── */
.ltr-text {
    direction: ltr;
    unicode-bidi: embed;
    text-align: left;
}

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

/* Phone numbers displayed inline in RTL context */
.phone-number {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--font-latin);
}

/* Prices and numbers that should stay LTR */
.number {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── RTL-aware borders ── */
[dir="rtl"] .border-start {
    border-right: 2px solid var(--color-border);
    border-left: none;
}

[dir="rtl"] .border-end {
    border-left: 2px solid var(--color-border);
    border-right: none;
}

/* ── RTL-aware positioning ── */
[dir="rtl"] .float-start {
    float: right;
}

[dir="rtl"] .float-end {
    float: left;
}

/* ── Form inputs in RTL ── */
[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="search"],
[dir="rtl"] textarea {
    text-align: right;
}

/* Phone/number inputs stay LTR */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: right;
}

/* ── Select dropdown arrow ── */
[dir="rtl"] select {
    background-position: left 0.75rem center;
    padding-left: 2.5rem;
    padding-right: 0.75rem;
}

/* ── RTL-aware table alignment ── */
[dir="rtl"] th,
[dir="rtl"] td {
    text-align: right;
}

/* ── Chat bubbles RTL ── */
[dir="rtl"] .chat-message-user {
    align-self: flex-start;
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-sm);
}

[dir="rtl"] .chat-message-bot {
    align-self: flex-end;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-sm);
}

/* ── Sidebar in RTL ── */
[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
    border-left: 1px solid var(--color-border);
    border-right: none;
}

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