/* ==========================================
 * RTL (Right-to-Left) 样式文件
 * 用于阿拉伯语等从右到左的语言
 * 
 * 策略：依赖 dir="rtl" 让浏览器自动处理大部分布局
 * 只手动调整特殊情况
 * ========================================== */

/* 基础RTL设置 */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* ==========================================
 * 文本对齐
 * ========================================== */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

/* ==========================================
 * 定位翻转（仅针对 absolute/fixed 元素）
 * ========================================== */
html[dir="rtl"] .absolute.left-0:not(.right-0) { 
    left: auto !important; 
    right: 0 !important; 
}
html[dir="rtl"] .absolute.right-0:not(.left-0) { 
    right: auto !important; 
    left: 0 !important; 
}
html[dir="rtl"] .fixed.left-0:not(.right-0) { 
    left: auto !important; 
    right: 0 !important; 
}
html[dir="rtl"] .fixed.right-0:not(.left-0) { 
    right: auto !important; 
    left: 0 !important; 
}

/* ==========================================
 * 边框翻转
 * ========================================== */
html[dir="rtl"] .border-l { border-left: none !important; border-right: 1px solid !important; }
html[dir="rtl"] .border-r { border-right: none !important; border-left: 1px solid !important; }
html[dir="rtl"] .border-l-2 { border-left: none !important; border-right: 2px solid !important; }
html[dir="rtl"] .border-r-2 { border-right: none !important; border-left: 2px solid !important; }

/* ==========================================
 * 浮动翻转
 * ========================================== */
html[dir="rtl"] .float-left { float: right !important; }
html[dir="rtl"] .float-right { float: left !important; }

/* ==========================================
 * 表单元素
 * ========================================== */
html[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]),
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* ==========================================
 * 列表
 * ========================================== */
html[dir="rtl"] ul:not(.space-y-3):not(.space-y-4),
html[dir="rtl"] ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* ==========================================
 * 移动菜单 - 从左侧滑入
 * ========================================== */
html[dir="rtl"] #mobile-menu {
    left: 0 !important;
    right: auto !important;
}

html[dir="rtl"] #mobile-menu.-translate-x-full {
    transform: translateX(-100%) !important;
}

/* ==========================================
 * 下拉菜单位置
 * ========================================== */
html[dir="rtl"] #language-menu {
    left: 0 !important;
    right: auto !important;
}

/* ==========================================
 * 导航下划线
 * ========================================== */
html[dir="rtl"] nav a .absolute.-bottom-2 {
    right: 0 !important;
    left: auto !important;
}

/* ==========================================
 * 图标方向翻转（仅针对方向性图标）
 * ========================================== */
html[dir="rtl"] [data-lucide="chevron-right"],
html[dir="rtl"] [data-lucide="chevron-left"],
html[dir="rtl"] [data-lucide="arrow-right"],
html[dir="rtl"] [data-lucide="arrow-left"] {
    transform: scaleX(-1);
}

/* ==========================================
 * 搜索框和输入框图标位置
 * ========================================== */
html[dir="rtl"] .relative input + [data-lucide] {
    left: 0.75rem !important;
    right: auto !important;
}

/* ==========================================
 * 响应式工具类
 * ========================================== */

/* 处理 space-x 系列 */
@media (min-width: 640px) {
    html[dir="rtl"] .sm\\:space-x-4 > * + * { 
        margin-right: 1rem !important; 
        margin-left: 0 !important; 
    }
}

@media (min-width: 768px) {
    html[dir="rtl"] .md\\:space-x-6 > * + * { 
        margin-right: 1.5rem !important; 
        margin-left: 0 !important; 
    }
}

@media (min-width: 1024px) {
    html[dir="rtl"] .lg\\:space-x-8 > * + * { 
        margin-right: 2rem !important; 
        margin-left: 0 !important; 
    }
}

/* ==========================================
 * 清除浏览器默认的 RTL 行为（需要时）
 * ========================================== */

/* 某些flex容器不应该被浏览器自动翻转 */
html[dir="rtl"] .flex.flex-col {
    direction: ltr; /* 垂直flex保持LTR */
}

html[dir="rtl"] .flex.flex-col > * {
    direction: rtl; /* 但子元素仍然是RTL */
}

/* ==========================================
 * 修复 Tailwind 的 space-x 在 RTL 中的问题
 * ========================================== */
html[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

html[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

html[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

html[dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1;
}

/* ==========================================
 * Footer 链接对齐
 * ========================================== */
html[dir="rtl"] footer ul {
    text-align: right;
}

footer a {
    text-align: inherit;
}

/* ==========================================
 * 模态框按钮对齐
 * ========================================== */
html[dir="rtl"] .modal-content .justify-end {
    justify-content: flex-start !important;
}

html[dir="rtl"] .modal-content .justify-start {
    justify-content: flex-end !important;
}

/* ==========================================
 * 修复特定组件
 * ========================================== */

/* Logo 图标的位置已经在 HTML 中通过 ml-2/ml-3 处理 */
/* 不需要额外的 CSS */

/* Toast 通知位置 */
html[dir="rtl"] .fixed[class*="left-1/2"] {
    left: auto !important;
    right: 50% !important;
    transform: translateX(50%) !important;
}

/* 下拉菜单箭头 */
html[dir="rtl"] [data-lucide="chevron-down"] {
    transform: none !important; /* 下箭头不需要翻转 */
}