/* RTL Support */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

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

/* Hide/show directional elements */
html[dir="rtl"] .ltr-only {
    display: none !important;
}

html[dir="ltr"] .rtl-only {
    display: none !important;
}

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

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

/* Font families & sizing (driven by appearance settings) */
html {
    font-family: var(--app-font-family, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
    font-size: calc(16px * var(--app-font-scale, 100) / 100);
    font-weight: var(--app-font-weight, 400);
}

html[dir="rtl"] {
    font-family: var(--app-font-family-rtl, 'Noto Kufi Arabic', 'Noto Sans Arabic', system-ui, sans-serif);
}

html[dir="ltr"] {
    font-family: var(--app-font-family-ltr, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

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

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

/* Margins and paddings */
html[dir="rtl"] .ml-auto {
    margin-left: unset;
    margin-right: auto;
}

html[dir="rtl"] .mr-auto {
    margin-right: unset;
    margin-left: auto;
}

/* Transitions */
html {
    transition: all 0.2s ease-in-out;
}

/* Ensure content is visible */
body {
    opacity: 1 !important;
    visibility: visible !important;
    background-color: var(--surface-page, #fff);
    color: var(--text-strong, #0f172a);
}

/* Fix dropdown positioning */
html[dir="rtl"] .origin-top-right {
    right: auto;
    left: 0;
    transform-origin: top left;
}

html[dir="ltr"] .origin-top-right {
    left: auto;
    right: 0;
    transform-origin: top right;
}