/**
 * RTL (Right-to-Left) CSS Overrides
 * Applied when html has dir="rtl" attribute (Arabic, Hebrew, etc.)
 *
 * This file handles layout mirroring for RTL languages.
 * Bootstrap RTL handles most cases; these are custom overrides.
 *
 * BACKUP FROM: git show bcf3001b^:apps/core/static/css/rtl-overrides.css
 * BACKUP DATE: 2025-11-29
 * ORIGINAL COMMIT: Before bcf3001b (Remove 6 additional languages and clean up unused assets)
 */

/* ==========================================================================
   Layout & Sidebar
   ========================================================================== */

html[dir="rtl"] .layout-menu {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .layout-page {
    padding-left: 0 !important;
    padding-right: 260px !important;
}

html[dir="rtl"] .layout-menu-fixed .layout-page {
    padding-right: 260px !important;
    padding-left: 0 !important;
}

html[dir="rtl"] .layout-menu-collapsed .layout-page {
    padding-right: 78px !important;
    padding-left: 0 !important;
}

/* Navbar adjustments */
html[dir="rtl"] .layout-navbar {
    left: 0 !important;
    right: 260px !important;
}

html[dir="rtl"] .layout-menu-collapsed .layout-navbar {
    right: 78px !important;
}

/* ==========================================================================
   Text Alignment
   ========================================================================== */

html[dir="rtl"] .text-start {
    text-align: right !important;
}

html[dir="rtl"] .text-end {
    text-align: left !important;
}

/* ==========================================================================
   Margin & Padding Utilities
   ========================================================================== */

/* ms-* (margin-start) becomes margin-right in RTL */
html[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }

/* me-* (margin-end) becomes margin-left in RTL */
html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }

/* ps-* (padding-start) becomes padding-right in RTL */
html[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; }

/* pe-* (padding-end) becomes padding-left in RTL */
html[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }

/* ==========================================================================
   Navigation & Breadcrumbs
   ========================================================================== */

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
    padding-right: 0.5rem;
    padding-left: 0;
}

/* ==========================================================================
   Menu Icons & Arrows
   ========================================================================== */

html[dir="rtl"] .menu-toggle::after {
    margin-left: 0;
    margin-right: auto;
    transform: rotate(180deg);
}

html[dir="rtl"] .menu-item.open > .menu-toggle::after {
    transform: rotate(90deg);
}

html[dir="rtl"] .menu-icon {
    margin-right: 0;
    margin-left: 0.5rem;
}

html[dir="rtl"] .menu-sub {
    padding-right: 2.5rem;
    padding-left: 0;
}

/* ==========================================================================
   Form Controls
   ========================================================================== */

html[dir="rtl"] .input-group > .input-group-text:first-child {
    border-radius: 0 0.375rem 0.375rem 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] .input-group > .form-control:last-child,
html[dir="rtl"] .input-group > .form-select:last-child {
    border-radius: 0.375rem 0 0 0.375rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html[dir="rtl"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}

html[dir="rtl"] .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .dropdown-item {
    text-align: right;
}

/* ==========================================================================
   Tables
   ========================================================================== */

html[dir="rtl"] table.dataTable {
    direction: rtl;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

/* DataTables specific */
html[dir="rtl"] .dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: left;
}

html[dir="rtl"] .dataTables_wrapper .dataTables_length {
    float: right;
}

html[dir="rtl"] .dataTables_wrapper .dataTables_info {
    float: right;
}

html[dir="rtl"] .dataTables_wrapper .dataTables_paginate {
    float: left;
}

/* ==========================================================================
   Charts (ApexCharts)
   ========================================================================== */

/* Charts render internally in LTR but container should be RTL */
html[dir="rtl"] .apexcharts-canvas {
    direction: ltr;
}

html[dir="rtl"] .apexcharts-legend {
    direction: rtl;
}

/* ==========================================================================
   Cards & Content
   ========================================================================== */

html[dir="rtl"] .card-header {
    text-align: right;
}

html[dir="rtl"] .list-group-item {
    text-align: right;
}

/* ==========================================================================
   Buttons & Icons
   ========================================================================== */

html[dir="rtl"] .btn-group > .btn:first-child {
    border-radius: 0 0.375rem 0.375rem 0;
}

html[dir="rtl"] .btn-group > .btn:last-child {
    border-radius: 0.375rem 0 0 0.375rem;
}

/* Icons with text */
html[dir="rtl"] .btn > i:first-child,
html[dir="rtl"] .btn > .bx:first-child {
    margin-right: 0;
    margin-left: 0.25rem;
}

html[dir="rtl"] .btn > i:last-child,
html[dir="rtl"] .btn > .bx:last-child {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */

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

html[dir="rtl"] .alert-dismissible {
    padding-right: 1rem;
    padding-left: 3rem;
}

html[dir="rtl"] .alert-dismissible .btn-close {
    right: auto;
    left: 0;
}

/* ==========================================================================
   Modal Dialogs
   ========================================================================== */

html[dir="rtl"] .modal-header .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem;
}

/* ==========================================================================
   Float Utilities Override
   ========================================================================== */

html[dir="rtl"] .float-start {
    float: right !important;
}

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

/* ==========================================================================
   Border Utilities
   ========================================================================== */

html[dir="rtl"] .border-start {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-left: 0 !important;
}

html[dir="rtl"] .border-end {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    border-right: 0 !important;
}

/* ==========================================================================
   Positioning
   ========================================================================== */

html[dir="rtl"] .start-0 {
    right: 0 !important;
    left: auto !important;
}

html[dir="rtl"] .start-50 {
    right: 50% !important;
    left: auto !important;
}

html[dir="rtl"] .start-100 {
    right: 100% !important;
    left: auto !important;
}

html[dir="rtl"] .end-0 {
    left: 0 !important;
    right: auto !important;
}

html[dir="rtl"] .end-50 {
    left: 50% !important;
    right: auto !important;
}

html[dir="rtl"] .end-100 {
    left: 100% !important;
    right: auto !important;
}

/* ==========================================================================
   Translate Transforms
   ========================================================================== */

html[dir="rtl"] .translate-middle-x {
    transform: translateX(50%) !important;
}

/* ==========================================================================
   App-Specific Overrides
   ========================================================================== */

/* Language switcher */
html[dir="rtl"] .language-switcher-modal .badge {
    text-align: center;
}

/* Trading tables - numbers stay LTR for readability */
html[dir="rtl"] .pnl-value,
html[dir="rtl"] .currency-value,
html[dir="rtl"] .numeric-value {
    direction: ltr;
    unicode-bidi: embed;
}

/* Ensure form labels align with inputs */
html[dir="rtl"] label {
    text-align: right;
}