/**
 * RTL (Right-to-Left) Language Support for MakeRAG+
 * Enables proper rendering for Arabic, Hebrew, Persian, Urdu
 * Automatically applied when detecting RTL language codes
 */

/* ========================================
   RTL LANGUAGE DETECTION & DIRECTION
   ======================================== */

/* Arabic */
[lang="ar"] {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Arial Unicode MS', 'Simplified Arabic', Arial, sans-serif;
}

/* Hebrew */
[lang="he"] {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
}

/* Persian/Farsi */
[lang="fa"] {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Tahoma', 'B Nazanin', Arial, sans-serif;
}

/* Urdu */
[lang="ur"] {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Urdu Typesetting', 'Arial Unicode MS', Arial, sans-serif;
}

/* Generic RTL fallback for any detected RTL language */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* ========================================
   RTL UI ELEMENT MIRRORING
   ======================================== */

/* Mirror navigation elements for RTL */
[lang="ar"] nav,
[lang="he"] nav,
[lang="fa"] nav,
[lang="ur"] nav,
[dir="rtl"] nav {
    flex-direction: row-reverse;
}

/* Mirror sidebar */
[lang="ar"] .sidebar,
[lang="he"] .sidebar,
[lang="fa"] .sidebar,
[lang="ur"] .sidebar,
[dir="rtl"] .sidebar {
    margin-left: 0;
    margin-right: 1rem;
    border-left: none;
    border-right: 4px solid #4F46E5;
}

/* Mirror padding/margins for RTL */
[lang="ar"] .content,
[lang="he"] .content,
[lang="fa"] .content,
[lang="ur"] .content,
[dir="rtl"] .content {
    padding-left: 2rem;
    padding-right: 0;
}

/* Mirror buttons and form elements */
[lang="ar"] button,
[lang="he"] button,
[lang="fa"] button,
[lang="ur"] button,
[dir="rtl"] button {
    text-align: right;
    padding-left: 0.5rem;
    padding-right: 1rem;
}

/* Mirror form inputs */
[lang="ar"] input,
[lang="he"] input,
[lang="fa"] input,
[lang="ur"] input,
[dir="rtl"] input,
[lang="ar"] textarea,
[lang="he"] textarea,
[lang="fa"] textarea,
[lang="ur"] textarea,
[dir="rtl"] textarea {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* Mirror list items */
[lang="ar"] li,
[lang="he"] li,
[lang="fa"] li,
[lang="ur"] li,
[dir="rtl"] li {
    text-align: right;
    padding-left: 1rem;
    padding-right: 0;
    display: flex;
    flex-direction: row-reverse;
}

/* Mirror list markers */
[lang="ar"] ul,
[lang="he"] ul,
[lang="fa"] ul,
[lang="ur"] ul,
[dir="rtl"] ul {
    padding-left: 0;
    padding-right: 2rem;
    margin-left: 0;
    margin-right: 1rem;
}

/* ========================================
   RTL TEXT & TYPOGRAPHY ADJUSTMENTS
   ======================================== */

/* Preserve proper text direction for mixed content (LTR within RTL) */
[lang="ar"] .english-text,
[lang="he"] .english-text,
[lang="fa"] .english-text,
[lang="ur"] .english-text {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Proper line height for scripts with diacritics */
[lang="ar"] p,
[lang="he"] p,
[lang="fa"] p,
[lang="ur"] p,
[dir="rtl"] p {
    line-height: 1.8;
    letter-spacing: 0.3px;
}

/* Tables in RTL */
[lang="ar"] table,
[lang="he"] table,
[lang="fa"] table,
[lang="ur"] table,
[dir="rtl"] table {
    direction: rtl;
}

[lang="ar"] th,
[lang="he"] th,
[lang="fa"] th,
[lang="ur"] th,
[dir="rtl"] th,
[lang="ar"] td,
[lang="he"] td,
[lang="fa"] td,
[lang="ur"] td,
[dir="rtl"] td {
    text-align: right;
    border-right: 1px solid #E5E7EB;
    border-left: none;
    padding-right: 1rem;
    padding-left: 0;
}

/* ========================================
   RTL DROPDOWN & SELECT ELEMENTS
   ======================================== */

[lang="ar"] select,
[lang="he"] select,
[lang="fa"] select,
[lang="ur"] select,
[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-left: 2.5rem;
    padding-right: 0.5rem;
    direction: rtl;
    text-align: right;
}

/* ========================================
   RTL MODAL & DIALOG POSITIONING
   ======================================== */

[lang="ar"] .modal,
[lang="he"] .modal,
[lang="fa"] .modal,
[lang="ur"] .modal,
[dir="rtl"] .modal {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* ========================================
   RTL ICONS & VISUAL ELEMENTS
   ======================================== */

/* Flip icons if needed (arrows, chevrons) */
[lang="ar"] .icon-arrow-left,
[lang="he"] .icon-arrow-left,
[lang="fa"] .icon-arrow-left,
[lang="ur"] .icon-arrow-left,
[dir="rtl"] .icon-arrow-left {
    transform: scaleX(-1);
}

[lang="ar"] .icon-arrow-right,
[lang="he"] .icon-arrow-right,
[lang="fa"] .icon-arrow-right,
[lang="ur"] .icon-arrow-right,
[dir="rtl"] .icon-arrow-right {
    transform: scaleX(-1);
}

/* ========================================
   RTL CHAT INTERFACE STYLING
   ======================================== */

/* Chat bubbles in RTL */
[lang="ar"] .chat-message.user,
[lang="he"] .chat-message.user,
[lang="fa"] .chat-message.user,
[lang="ur"] .chat-message.user,
[dir="rtl"] .chat-message.user {
    margin-left: 0;
    margin-right: auto;
    border-radius: 18px 0 18px 18px;
}

[lang="ar"] .chat-message.ai,
[lang="he"] .chat-message.ai,
[lang="fa"] .chat-message.ai,
[lang="ur"] .chat-message.ai,
[dir="rtl"] .chat-message.ai {
    margin-right: 0;
    margin-left: auto;
    border-radius: 0 18px 18px 18px;
}

/* ========================================
   RTL ANIMATION & TRANSITION SUPPORT
   ======================================== */

/* Ensure transitions work correctly for RTL */
[lang="ar"] *,
[lang="he"] *,
[lang="fa"] *,
[lang="ur"] *,
[dir="rtl"] * {
    transition: direction 0s, text-align 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

/* ========================================
   RTL & LTR MIXED CONTENT HANDLING
   ======================================== */

/* Proper handling of mixed Arabic+English text */
[lang="ar"] .mixed-content,
[lang="he"] .mixed-content,
[lang="fa"] .mixed-content,
[lang="ur"] .mixed-content {
    unicode-bidi: bidi-override;
    direction: rtl;
}

/* Preserve English text direction within RTL context */
[lang="ar"] .preserve-ltr,
[lang="he"] .preserve-ltr,
[lang="fa"] .preserve-ltr,
[lang="ur"] .preserve-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ========================================
   ACCESSIBILITY & SCREEN READER SUPPORT FOR RTL
   ======================================== */

[lang="ar"] .sr-only,
[lang="he"] .sr-only,
[lang="fa"] .sr-only,
[lang="ur"] .sr-only,
[dir="rtl"] .sr-only {
    direction: rtl;
    text-align: right;
}