/**
 * Language Synchronization CSS
 * Prevents RTL/LTR visual glitches during language changes
 */

/* Ensure direction is applied immediately */
html {
    direction: ltr;
}

html[lang="ar"],
html[dir="rtl"] {
    direction: rtl !important;
}

html[lang="en"],
html[dir="ltr"] {
    direction: ltr !important;
}

/* Prevent content flash during language initialization */
html:not(.language-sync-active) {
    visibility: hidden;
}

html.language-sync-active {
    visibility: visible;
}

/* Smooth transitions for direction changes (optional - can be disabled) */
html.language-changing * {
    transition: none !important;
}

/* Prevent layout shift during language changes */
body {
    min-height: 100vh;
}

/* RTL-specific fixes */
html[dir="rtl"] body {
    text-align: right;
}

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

/* Prevent margin/padding flip glitches */
html[dir="rtl"] .me-1,
html[dir="rtl"] .me-2,
html[dir="rtl"] .me-3 {
    margin-right: 0 !important;
    margin-left: var(--bs-gutter-x, 0.25rem) !important;
}

html[dir="rtl"] .ms-1,
html[dir="rtl"] .ms-2,
html[dir="rtl"] .ms-3 {
    margin-left: 0 !important;
    margin-right: var(--bs-gutter-x, 0.25rem) !important;
}

/* Prevent flex direction glitches */
html[dir="rtl"] .d-flex {
    flex-direction: row-reverse;
}

html[dir="ltr"] .d-flex {
    flex-direction: row;
}

/* Icon spacing fixes */
html[dir="rtl"] .btn i {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html[dir="ltr"] .btn i {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* Dropdown menu positioning */
html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
}

html[dir="ltr"] .dropdown-menu {
    left: 0;
    right: auto;
}

/* Text alignment consistency */
html[dir="rtl"] .text-start {
    text-align: right !important;
}

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

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

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

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

html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select {
    text-align: left;
}

/* Prevent icon flip */
html[dir="rtl"] .fa,
html[dir="rtl"] .fas,
html[dir="rtl"] .far,
html[dir="rtl"] .fab {
    display: inline-block;
}

/* Navbar fixes */
html[dir="rtl"] .navbar-nav {
    flex-direction: row-reverse;
}

html[dir="ltr"] .navbar-nav {
    flex-direction: row;
}

/* Alert icon spacing */
html[dir="rtl"] .alert i {
    margin-left: 0.5rem;
    margin-right: 0;
}

html[dir="ltr"] .alert i {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* Badge positioning */
html[dir="rtl"] .badge {
    margin-left: 0.25rem;
    margin-right: 0;
}

html[dir="ltr"] .badge {
    margin-right: 0.25rem;
    margin-left: 0;
}

/* Prevent scroll bar flip glitches */
html[dir="rtl"] {
    overflow-y: scroll;
}

html[dir="ltr"] {
    overflow-y: scroll;
}

/* Card layout consistency */
html[dir="rtl"] .card-body {
    text-align: right;
}

html[dir="ltr"] .card-body {
    text-align: left;
}

/* List item consistency */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 2rem;
    padding-left: 0;
}

html[dir="ltr"] ul,
html[dir="ltr"] ol {
    padding-left: 2rem;
    padding-right: 0;
}

/* Prevent flash of unstyled content */
@media (prefers-reduced-motion: no-preference) {
    html.language-sync-active * {
        transition: all 0.2s ease;
    }
}

/* Force stable layout during rapid changes */
html.stabilizing * {
    transition: none !important;
    animation: none !important;
}