/**
 * RTL Fixes for Arabic Interface
 * Fixes text overlap, alignment, and layout issues for RTL languages
 * Date: 2026-03-31
 */

/* ============================================
   1. GLOBAL TEXT & FONT SETTINGS
   ============================================ */
[dir="rtl"] body,
[dir="rtl"] html {
    font-family: 'Tajawal', 'Cairo', 'Noto Sans Arabic', 'Conv_GESSTwoLight', 'Droid Arabic Kufi', sans-serif;
    text-align: right;
}

[dir="rtl"] * {
    letter-spacing: 0 !important;
}

/* ============================================
   2. SIDEBAR FIXES
   ============================================ */

/* Flip sidebar to right side */
[dir="rtl"] .side-bar {
    border-left: 1px solid #e5e7eb;
    border-right: none !important;
}

/* Fix sidebar child items padding (tw-pl-11 -> pr) */
[dir="rtl"] .chiled {
    padding-left: 0 !important;
    padding-right: 2.75rem !important; /* tw-pr-11 */
}

/* Fix vertical line in child menu (tw-left-5 -> right-5) */
[dir="rtl"] .chiled > .tw-absolute.tw-inset-y-0 {
    left: auto !important;
    right: 1.25rem !important; /* tw-right-5 */
}

/* Fix dropdown arrow position (tw-ml-auto -> mr-auto) */
[dir="rtl"] .drop_down .svg {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Fix sidebar menu item gap direction */
[dir="rtl"] #side-bar a {
    text-align: right;
}

/* Fix sidebar header border */
[dir="rtl"] .side-bar > a:first-child {
    border-left: 1px solid rgba(99, 102, 241, 0.3);
    border-right: none !important;
}

/* Fix sidebar scroll container border */
[dir="rtl"] #side-bar {
    border-left: 1px solid #e5e7eb;
    border-right: none !important;
}

/* Fix all tw-border-r in RTL context */
[dir="rtl"] .tw-border-r {
    border-right: none !important;
    border-left: 1px solid #e5e7eb !important;
}

/* ============================================
   3. HEADER & NAVBAR FIXES
   ============================================ */
[dir="rtl"] .main-header .navbar {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

[dir="rtl"] .navbar-custom-menu,
[dir="rtl"] .navbar-right {
    float: left;
}

[dir="rtl"] .navbar-nav > li > .dropdown-menu {
    left: 0;
    right: auto;
}

/* ============================================
   4. FORM & INPUT FIXES
   ============================================ */

/* Fix form labels alignment */
[dir="rtl"] label,
[dir="rtl"] .control-label {
    text-align: right;
}

/* Fix input groups - flip addon/button sides for RTL */
[dir="rtl"] .input-group {
    direction: rtl;
}

[dir="rtl"] .input-group .form-control {
    text-align: right;
}

[dir="rtl"] .input-group .form-control:first-child {
    border-radius: 0 8px 8px 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

[dir="rtl"] .input-group .form-control:last-child {
    border-radius: 8px 0 0 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

[dir="rtl"] .input-group-addon:first-child {
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
    border-right: 1.5px solid #e2e8f0 !important;
}

[dir="rtl"] .input-group-addon:last-child {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
    border-left: 1.5px solid #e2e8f0 !important;
}

[dir="rtl"] .input-group .input-group-btn:first-child > .btn {
    border-radius: 0 8px 8px 0 !important;
}

[dir="rtl"] .input-group .input-group-btn:last-child > .btn {
    border-radius: 8px 0 0 8px !important;
}

[dir="rtl"] .input-group-btn {
    direction: rtl;
}

/* Fix select2 RTL */
[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered {
    text-align: right;
    padding-right: 12px !important;
    padding-left: 28px !important;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 8px !important;
    right: auto !important;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-left: 0;
    margin-right: auto;
    float: left;
}

[dir="rtl"] .select2-container .select2-selection--multiple .select2-selection__rendered {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    float: right;
    margin: 2px 0 2px 4px !important;
}

[dir="rtl"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0;
    margin-left: 4px;
}

[dir="rtl"] .select2-search--dropdown .select2-search__field {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .select2-results__option {
    text-align: right;
    direction: rtl;
}

/* Fix select2 inside input-group in RTL */
[dir="rtl"] .input-group .select2-container {
    direction: rtl;
}

[dir="rtl"] .input-group .select2-container .select2-selection--single {
    border-radius: 0 8px 8px 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Fix checkbox/radio alignment */
[dir="rtl"] .checkbox label,
[dir="rtl"] .radio label {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .checkbox input[type="checkbox"],
[dir="rtl"] .radio input[type="radio"] {
    margin-left: 0;
    margin-right: -20px;
}

/* iCheck checkboxes */
[dir="rtl"] .icheckbox_square-blue,
[dir="rtl"] .iradio_square-blue {
    margin-left: 5px;
    margin-right: 0;
}

/* Fix tooltip info icons position */
[dir="rtl"] .fa.fa-info-circle {
    margin-left: 0;
    margin-right: 4px;
}

/* Fix icon margin inside menu items / buttons */
[dir="rtl"] .fa,
[dir="rtl"] .glyphicon,
[dir="rtl"] .ion {
    margin-right: 0;
}

[dir="rtl"] .sidebar-menu > li > a > .fa,
[dir="rtl"] .sidebar-menu > li > a > .ion,
[dir="rtl"] .sidebar-menu > li > a > .glyphicon {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* Fix btn icon spacing */
[dir="rtl"] .btn > .fa,
[dir="rtl"] .btn > .glyphicon {
    margin-right: 0;
    margin-left: 5px;
}

/* Fix native select arrow position for RTL (already in design-enhancements) */

/* Fix form-control direction */
[dir="rtl"] .form-control {
    text-align: right;
    direction: rtl;
}

/* Fix date picker and number inputs to stay LTR */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input.input_number {
    direction: ltr;
    text-align: right;
}

/* Fix input-group addon icon alignment */
[dir="rtl"] .input-group-addon .fa,
[dir="rtl"] .input-group-addon .glyphicon {
    margin: 0;
}

/* Fix the plus/add buttons next to select dropdowns */
[dir="rtl"] .input-group .input-group-btn .btn-modal .fa {
    margin: 0;
}

/* ============================================
   5. TABLE / DATATABLES FIXES
   ============================================ */

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

[dir="rtl"] .dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: left;
}

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

[dir="rtl"] .dataTables_wrapper .dataTables_info {
    float: right;
    text-align: right;
}

[dir="rtl"] .dataTables_wrapper .dataTables_paginate {
    float: left;
    text-align: left;
}

[dir="rtl"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    margin-left: 0;
    margin-right: 2px;
}

[dir="rtl"] table.dataTable thead .sorting:after,
[dir="rtl"] table.dataTable thead .sorting_asc:after,
[dir="rtl"] table.dataTable thead .sorting_desc:after {
    right: auto;
    left: 8px;
}

/* Fix action buttons in tables */
[dir="rtl"] .btn-group {
    direction: ltr;
}

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

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

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

/* Prevent table/container from clipping dropdowns */
[dir="rtl"] .table-responsive,
[dir="rtl"] .dataTables_wrapper {
    overflow: visible !important;
}

[dir="rtl"] .table-responsive > .table {
    overflow: visible;
}

/* Ensure dropdown appears above table rows */
[dir="rtl"] .btn-group.open .dropdown-menu {
    z-index: 1050;
}

[dir="rtl"] .btn-group .dropdown-menu {
    min-width: 160px;
}

/* ============================================
   6. MODAL FIXES
   ============================================ */
[dir="rtl"] .modal-header .close {
    float: left;
    margin: -1px -1px -1px auto;
}

[dir="rtl"] .modal-header h4,
[dir="rtl"] .modal-title {
    text-align: right;
}

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

[dir="rtl"] .modal-footer {
    text-align: left;
}

/* ============================================
   7. BREADCRUMB & CONTENT HEADER FIXES
   ============================================ */
[dir="rtl"] .content-header > h1 {
    text-align: right;
}

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

[dir="rtl"] .content-header h1 small {
    display: block;
    margin-top: 4px;
}

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

/* ============================================
   8. ALERT & NOTIFICATION FIXES
   ============================================ */
[dir="rtl"] .alert {
    text-align: right;
}

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

[dir="rtl"] .alert .close {
    float: left;
}

/* ============================================
   9. WIDGET / BOX FIXES
   ============================================ */
[dir="rtl"] .box-header > .box-tools {
    left: 10px;
    right: auto;
    float: left;
}

[dir="rtl"] .box-header > h3,
[dir="rtl"] .box-header .box-title {
    text-align: right;
    float: none;
}

/* Fix widget header flex layout in RTL - flexbox auto-reverses with dir=rtl */
[dir="rtl"] .box-header.tw-flex {
    direction: rtl;
}

[dir="rtl"] .box-header .box-tools .pull-right {
    float: none !important;
}

/* Ensure content-header direction in RTL */
[dir="rtl"] .content-header h1 {
    direction: rtl;
}

/* ============================================
   10. BUTTON & ACTION FIXES
   ============================================ */
[dir="rtl"] .pull-right {
    float: left !important;
}

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

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

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

/* ============================================
   11. POS SCREEN FIXES
   ============================================ */
[dir="rtl"] .pos-bill-list,
[dir="rtl"] .pos_product_list {
    text-align: right;
}

[dir="rtl"] .pos-total-div {
    text-align: right;
}

/* ============================================
   12. REPORT & PRINT FIXES
   ============================================ */
[dir="rtl"] .invoice-col {
    text-align: right;
}

/* ============================================
   13. TOOLTIP FIXES
   ============================================ */
[dir="rtl"] .tooltip {
    direction: rtl;
}

/* ============================================
   14. HELP BLOCK & INFO TEXT FIXES
   ============================================ */
[dir="rtl"] .help-block {
    text-align: right;
}

/* ============================================
   15. TAB FIXES
   ============================================ */
[dir="rtl"] .nav-tabs > li {
    float: right;
}

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

/* ============================================
   16. LIST GROUP FIXES
   ============================================ */
[dir="rtl"] .list-group-item {
    text-align: right;
}

/* ============================================
   17. CURRENCY SYMBOL FIX (prevent overlap)
   ============================================ */
[dir="rtl"] .input-group-addon {
    direction: rtl;
}

/* ============================================
   18. FLEX LAYOUT RTL FIXES
   ============================================ */

/* Fix Tailwind flex gap direction */
[dir="rtl"] .tw-flex {
    direction: rtl;
}

/* Fix main content area */
[dir="rtl"] main.tw-flex {
    direction: rtl;
}

/* ============================================
   19. DASHBOARD WIDGET FIXES
   ============================================ */
[dir="rtl"] .info-box-content {
    text-align: right;
    margin-right: 10px;
    margin-left: 0;
}

[dir="rtl"] .info-box-icon {
    float: right;
    border-radius: 0 4px 4px 0;
}

[dir="rtl"] .small-box > .inner {
    text-align: right;
}

[dir="rtl"] .small-box > .small-box-footer {
    text-align: right;
}

/* ============================================
   20. MISCELLANEOUS FIXES
   ============================================ */

/* Fix product form description editor */
[dir="rtl"] textarea.form-control {
    text-align: right;
}

/* Fix pagination alignment */
[dir="rtl"] .pagination {
    direction: ltr;
}

/* Fix file input */
[dir="rtl"] input[type="file"] {
    text-align: right;
}

/* Fix multi-input fields (like expiry period) */
[dir="rtl"] .multi-input .pull-left {
    float: right !important;
}

/* Fix notification bell/badge */
[dir="rtl"] .navbar-nav > li > a > .label {
    left: auto;
    right: 7px;
}

/* Fix scrolltop button */
[dir="rtl"] .scrolltop {
    left: 20px;
    right: auto;
}

/* Prevent text overlap in tight spaces */
[dir="rtl"] .tw-truncate {
    text-align: right;
}

/* Fix form-group spacing to prevent overlap */
[dir="rtl"] .form-group {
    text-align: right;
}

[dir="rtl"] .form-group label {
    display: block;
    text-align: right;
}

/* Fix the tour/step indicators */
[dir="rtl"] .introjs-tooltip {
    direction: rtl;
    text-align: right;
}