/**
 * RTL Layout Overrides
 * Converts LTR layout to RTL for Arabic support
 * Uses logical CSS properties (start/end) and directional flips
 */

/* Handle text direction and base properties */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

html[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* Sidebar positioning - flip from left to right in RTL */
html[dir="rtl"] aside {
    left: auto;
    right: 0;
    border-left: none;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

html[dir="rtl"] main {
    margin-left: 0;
    margin-right: 16rem; /* 64px/4 = 16rem */
}

/* Header adjustments for RTL */
html[dir="rtl"] header {
    padding-left: 0;
    padding-right: 2rem;
}

/* Flex layouts - only reverse explicit rows in RTL */
html[dir="rtl"] .flex.flex-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .flex.flex-col {
    flex-direction: column;
}

/* Sidebar and logo direction in RTL: keep normal row so icon appears on the right naturally */
html[dir="rtl"] aside nav a.flex,
html[dir="rtl"] aside .px-8.py-10.flex,
html[dir="rtl"] aside .px-4.py-8 a.flex,
html[dir="rtl"] aside .px-4.py-8 button.flex {
    flex-direction: row !important;
}

/* Padding adjustments - swap left/right */
html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
html[dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; }
html[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; }
html[dir="rtl"] .pl-16 { padding-left: 0; padding-right: 4rem; }

html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
html[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
html[dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; }
html[dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; }
html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; }

/* Margin adjustments - swap left/right */
html[dir="rtl"] .ml-0 { margin-left: 0; margin-right: 0; }
html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
html[dir="rtl"] .ml-64 { margin-left: 0; margin-right: 16rem; }
html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }

html[dir="rtl"] .mr-0 { margin-right: 0; margin-left: 0; }
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
html[dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; }

/* Position adjustments - swap left/right */
html[dir="rtl"] .left-0 { left: auto; right: 0; }
html[dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
html[dir="rtl"] .left-4 { left: auto; right: 1rem; }
html[dir="rtl"] .left-8 { left: auto; right: 2rem; }
html[dir="rtl"] .left-64 { left: auto; right: 16rem; }

html[dir="rtl"] .right-0 { right: auto; left: 0; }
html[dir="rtl"] .right-3 { right: auto; left: 0.75rem; }
html[dir="rtl"] .right-4 { right: auto; left: 1rem; }
html[dir="rtl"] .right-8 { right: auto; left: 2rem; }

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

/* Items alignment in flex */
html[dir="rtl"] .items-start { align-items: flex-end; }
html[dir="rtl"] .items-end { align-items: flex-start; }
html[dir="rtl"] .items-center { align-items: center; }

/* Justify alignment */
html[dir="rtl"] .justify-start { justify-content: flex-end; }
html[dir="rtl"] .justify-end { justify-content: flex-start; }
html[dir="rtl"] .justify-between { justify-content: space-between; }
html[dir="rtl"] .justify-center { justify-content: center; }

/* Border adjustments - swap left/right */
html[dir="rtl"] .border-l { border-left: none; border-right: 1px solid; }
html[dir="rtl"] .border-r { border-right: none; border-left: 1px solid; }

html[dir="rtl"] .border-l-4 { border-left: none; border-right: 4px solid; }
html[dir="rtl"] .border-r-4 { border-right: none; border-left: 4px solid; }

/* Rounded corners for RTL-specific elements */
html[dir="rtl"] .rounded-l-lg { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
html[dir="rtl"] .rounded-r-lg { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }

/* Gap and space adjustments for flex/grid */
html[dir="rtl"] .gap-0 { gap: 0; }
html[dir="rtl"] .gap-2 { gap: 0.5rem; }
html[dir="rtl"] .gap-3 { gap: 0.75rem; }
html[dir="rtl"] .gap-4 { gap: 1rem; }
html[dir="rtl"] .gap-6 { gap: 1.5rem; }
html[dir="rtl"] .gap-8 { gap: 2rem; }

/* Inset adjustments for absolute/fixed positioning */
html[dir="rtl"] .inset-y-0 {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
}

html[dir="rtl"] .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Icon flipping for RTL (arrows, chevrons, etc.) */
html[dir="rtl"] .icon-flip-rtl {
    transform: rotateY(180deg);
}

/* Tables - reverse order of columns */
html[dir="rtl"] table {
    direction: rtl;
}

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

html[dir="rtl"] thead {
    direction: rtl;
}

/* Forms - adjust RTL input styling */
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] input[type="number"] {
    text-align: right;
}

html[dir="rtl"] input[type="date"],
html[dir="rtl"] .font-mono,
html[dir="rtl"] .tabular-nums {
    direction: ltr;
    unicode-bidi: plaintext;
}

/* Dropdown/Select alignment */
html[dir="rtl"] select {
    background-position: left 0.5rem center;
    padding-left: 2.5rem;
    padding-right: 0.75rem;
}

/* Modal/Dialog centered still */
html[dir="rtl"] .fixed.inset-0 {
    direction: rtl;
}

/* Progress bar direction */
html[dir="rtl"] .progress {
    direction: rtl;
}

html[dir="rtl"] .bg-gradient-to-r {
    background-image: linear-gradient(to left, var(--tw-gradient-stops));
}

html[dir="rtl"] .bg-gradient-to-l {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Sidebar nav items - ensure proper alignment */
html[dir="rtl"] aside nav a {
    display: flex;
    flex-direction: row-reverse;
    padding-right: 1rem;
    padding-left: 0.5rem;
}

/* Search input icon positioning */
html[dir="rtl"] .relative.group .material-symbols-outlined {
    left: auto;
    right: 0.75rem;
}

/* Animations and transitions maintain direction */
html[dir="rtl"] .transition-all,
html[dir="rtl"] .transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll behavior - maintains LTR/RTL */
html[dir="rtl"] .overflow-y-auto {
    overflow-y: auto;
}

html[dir="rtl"] ::-webkit-scrollbar {
    width: 4px;
}

html[dir="rtl"] ::-webkit-scrollbar-track {
    background: transparent;
}

html[dir="rtl"] ::-webkit-scrollbar-thumb {
    background: #e7e8e9;
    border-radius: 10px;
}

/* Tooltips and popovers */
html[dir="rtl"] .tooltip {
    left: auto;
    right: 0;
}

/* Button groups - reverse order */
html[dir="rtl"] .btn-group {
    flex-direction: row-reverse;
}

/* Breadcrumbs */
html[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb::before {
    content: " / ";
    margin: 0 0.5rem;
}

/* Cards and containers - ensure proper spacing */
html[dir="rtl"] .card,
html[dir="rtl"] .container {
    direction: rtl;
}

/* Utility for float elements */
html[dir="rtl"] .float-left {
    float: right;
}

html[dir="rtl"] .float-right {
    float: left;
}

/* Clear floats */
html[dir="rtl"] .clear-both {
    clear: both;
}

/* Ensure data attributes work correctly */
html[dir="rtl"] [data-direction="ltr"] {
    direction: ltr;
}

html[dir="rtl"] [data-direction="rtl"] {
    direction: rtl;
}

/* Force LTR for numbers and codes */
html[dir="rtl"] .ltr-text,
html[dir="rtl"] .code-text,
html[dir="rtl"] .reference-no {
    direction: ltr;
    text-align: left;
}

/* User initials and avatars - keep centered */
html[dir="rtl"] .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notification/Toast positioning */
html[dir="rtl"] .toast {
    left: auto;
    right: 1rem;
}

html[dir="rtl"] .notification {
    left: auto;
    right: 1rem;
}