/* =========================================================================
   RTL Styles for FarmHub Template
   =========================================================================
   This stylesheet is designed to be dynamically enabled via JS when a user 
   selects a Right-to-Left language (e.g., Arabic, Hebrew).
   ========================================================================= */

/* 1. Global Document Flow */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* 2. Flexbox Reversals */
html[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .space-x-2> :not([hidden])~ :not([hidden]),
html[dir="rtl"] .space-x-4> :not([hidden])~ :not([hidden]),
html[dir="rtl"] .space-x-6> :not([hidden])~ :not([hidden]),
html[dir="rtl"] .space-x-8> :not([hidden])~ :not([hidden]) {
    margin-right: calc(var(--tw-space-x-reverse, 0) * -1);
    margin-left: calc(var(--tw-space-x-reverse, 0));
    /** Default space-x flips */
    --tw-space-x-reverse: 1;
}

/* 3. Margins & Padding Swaps */
html[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

html[dir="rtl"] .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

html[dir="rtl"] .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

html[dir="rtl"] .ml-4 {
    margin-left: 0;
    margin-right: 1rem;
}

html[dir="rtl"] .mr-4 {
    margin-right: 0;
    margin-left: 1rem;
}

html[dir="rtl"] .pl-4 {
    padding-left: 0;
    padding-right: 1rem;
}

html[dir="rtl"] .pr-4 {
    padding-right: 0;
    padding-left: 1rem;
}

/* 4. Positioning Flips (Left/Right absolute positioning) */
html[dir="rtl"] .left-0 {
    left: auto;
    right: 0;
}

html[dir="rtl"] .right-0 {
    right: auto;
    left: 0;
}

html[dir="rtl"] .-right-1 {
    right: auto;
    left: -0.25rem;
}

html[dir="rtl"] .-left-1 {
    left: auto;
    right: -0.25rem;
}

/* 5. Transform Reversals for Icons/Arrows */
html[dir="rtl"] .rotate-180-rtl {
    transform: rotate(180deg);
}

/* 6. Dashboard specific sidebar flips */
html[dir="rtl"] aside.border-r {
    border-right: none;
    border-left: 1px solid var(--tw-border-opacity);
}