/*
 * PumpSpectra - RTL Support Styles
 * Contains styles specific to RTL languages like Arabic
 */

/* Reset critical directions for RTL */
[dir="rtl"] {
    /* Text alignment */
    text-align: right;
    
    /* Flexbox and grid directions */
    direction: rtl;
}

/* Navigation */
[dir="rtl"] .nav-link i {
    margin-right: 0;
    /* margin-left: 0.25rem; */
}

/* Form elements */
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    text-align: right;
}

/* Lists */
[dir="rtl"] ul, 
[dir="rtl"] ol {
    padding-inline-end: 1.5rem;
    padding-inline-start: 0;
}

/* Tailwind-specific overrides for RTL */
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }

[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }

[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pl-3 { padding-inline-start: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }

[dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
[dir="rtl"] .pr-4 { padding-inline-end: 0; padding-inline-start: 1rem; }

/* Icon flipping for RTL languages */
[dir="rtl"] .fa-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .fa-arrow-left { transform: scaleX(-1); }
[dir="rtl"] .fa-chevron-right { transform: scaleX(-1); }
[dir="rtl"] .fa-chevron-left { transform: scaleX(1); }

/* Borders that need to be swapped */
[dir="rtl"] .border-l { border-left: 0; border-right: 1px solid; }
[dir="rtl"] .border-r { border-right: 0; border-left: 1px solid; }

/* Border radius adjustments */
[dir="rtl"] .rounded-l { 
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}
[dir="rtl"] .rounded-r {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.ml-6 {
    margin-inline-start: 1.5rem !important;
}



/* Right-to-left positioning adjustments */
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .left-0 { inset-inline-start: auto; inset-inline-end: 0; }

/* Text alignment */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Special adjustments for graphs */
[dir="rtl"] .js-plotly-plot .main-svg {
    transform: scaleX(1) !important; /* Prevent automatic flipping of graphs */
}

/* Tooltip adjustments */
[dir="rtl"] .modern-tooltip {
    transform: translate(50%, -100%);
}

/* Modal dialog positioning */
[dir="rtl"] .modal-header-image button#close-team-modal {
    right: auto;
    left: 3px;
}

/* Logo and navigation adjustments */
[dir="rtl"] header .flex.items-center.space-x-3 {
    flex-direction: row;
}

/* Flip back the app title and logo container in RTL mode */
[dir="rtl"] header .app-title-container {
    flex-direction: row;
    gap: 0.75rem;
}

/* Theme toggle button in RTL */
[dir="rtl"] .theme-toggle-btn {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Fix language dropdown positioning in RTL */
[dir="rtl"] #language-dropdown {
    right: auto;
    left: 0;
}

/* Fix control buttons spacing in RTL */
[dir="rtl"] .header-controls .flex.items-center {
    gap: 0.5rem;
}

/* Forms and input groups */
[dir="rtl"] .input-group .input-group-text:first-child {
    border-radius: 0 0.375rem 0.375rem 0;
}
[dir="rtl"] .input-group .input-group-text:last-child {
    border-radius: 0.375rem 0 0 0.375rem;
}

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

/* Recommendation tags in subscription plans */
[dir="rtl"] .absolute.top-0.right-0 {
    right: auto;
    left: 0;
}

/* Adjust border radius for recommendation tags */
[dir="rtl"] .rounded-bl-lg {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0.5rem;
}

[dir="rtl"] .rounded-br-lg {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0.5rem;
}

[dir="rtl"] .ml-5 {
    margin-right: 1.25rem;
}

/* 
 * Logical spacing properties that work correctly in both RTL and LTR
 * These override Tailwind's default space utilities
 */

/* space-x-* utilities using logical properties with !important */
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0 !important;
    margin-inline-end: calc(0.25rem * var(--tw-space-x-reverse)) !important;
    margin-inline-start: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0 !important;
    margin-inline-end: calc(0.5rem * var(--tw-space-x-reverse)) !important;
    margin-inline-start: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

.space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0 !important;
    margin-inline-end: calc(0.75rem * var(--tw-space-x-reverse)) !important;
    margin-inline-start: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0 !important;
    margin-inline-end: calc(1rem * var(--tw-space-x-reverse)) !important;
    margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0 !important;
    margin-inline-end: calc(2rem * var(--tw-space-x-reverse)) !important;
    margin-inline-start: calc(2rem * calc(1 - var(--tw-space-x-reverse))) !important;
}

/* space-y-* utilities using logical properties with !important */
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0 !important;
    margin-block-end: calc(0.25rem * var(--tw-space-y-reverse)) !important;
    margin-block-start: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))) !important;
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0 !important;
    margin-block-end: calc(0.5rem * var(--tw-space-y-reverse)) !important;
    margin-block-start: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))) !important;
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0 !important;
    margin-block-end: calc(0.75rem * var(--tw-space-y-reverse)) !important;
    margin-block-start: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))) !important;
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0 !important;
    margin-block-end: calc(1rem * var(--tw-space-y-reverse)) !important;
    margin-block-start: calc(1rem * calc(1 - var(--tw-space-y-reverse))) !important;
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0 !important;
    margin-block-end: calc(2rem * var(--tw-space-y-reverse)) !important;
    margin-block-start: calc(2rem * calc(1 - var(--tw-space-y-reverse))) !important;
}


[dir="rtl"] .border-l-4

 {
    border-right-width: 4px !important;
}


[dir=rtl] .rounded-r-lg {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

[dir=rtl] .rounded-l-lg {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}


@media (min-width: 1024px) {
    [dir=rtl] .lg\:mr-6 {
        margin-left: 1.5rem;
    }
}