/**
 * RTL菜单强制覆盖样式
 * 确保菜单在RTL和LTR模式下正确显示
 * 
 * 优先级: 最高 - 使用!important确保生效
 */

/* ============================================
   RTL模式 - 菜单在右边（维吾尔语）
   ============================================ */

html[dir="rtl"] .app-layout {
    display: flex !important;
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: var(--sidebar-width, 260px) !important;
    height: 100vh !important;
    background: var(--surface) !important;
    border-left: 1px solid var(--border-light) !important;
    border-right: none !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 24px 16px !important;
    transition: transform 0.3s ease !important;
}

html[dir="rtl"] .app-sidebar.open {
    transform: translateX(0) !important;
}

html[dir="rtl"] .app-main {
    flex: 1 !important;
    margin-right: var(--sidebar-width, 260px) !important;
    margin-left: 0 !important;
    padding: 32px 40px !important;
    min-width: 0 !important;
}

html[dir="rtl"] .sidebar-header {
    margin-bottom: 32px !important;
    padding: 0 12px !important;
    text-align: right !important;
}

html[dir="rtl"] .sidebar-brand {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

html[dir="rtl"] .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

html[dir="rtl"] .nav-item {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    text-align: right !important;
    border-radius: var(--radius-lg, 12px) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
}

html[dir="rtl"] .nav-item svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
    margin-left: 0 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

html[dir="rtl"] .sidebar-footer {
    margin-top: auto !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--border-light) !important;
    text-align: right !important;
}

/* ============================================
   LTR模式 - 菜单在左边（中文）
   ============================================ */

html[dir="ltr"] .app-layout {
    display: flex !important;
    flex-direction: row !important;
}

html[dir="ltr"] .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: var(--sidebar-width, 260px) !important;
    height: 100vh !important;
    background: var(--surface) !important;
    border-right: 1px solid var(--border-light) !important;
    border-left: none !important;
    z-index: 50 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 24px 16px !important;
    transition: transform 0.3s ease !important;
}

html[dir="ltr"] .app-sidebar.open {
    transform: translateX(0) !important;
}

html[dir="ltr"] .app-main {
    flex: 1 !important;
    margin-left: var(--sidebar-width, 260px) !important;
    margin-right: 0 !important;
    padding: 32px 40px !important;
    min-width: 0 !important;
}

html[dir="ltr"] .sidebar-header {
    margin-bottom: 32px !important;
    padding: 0 12px !important;
    text-align: left !important;
}

html[dir="ltr"] .sidebar-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
}

html[dir="ltr"] .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

html[dir="ltr"] .nav-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    border-radius: var(--radius-lg, 12px) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
}

html[dir="ltr"] .nav-item svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2 !important;
    margin-left: 12px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

html[dir="ltr"] .sidebar-footer {
    margin-top: auto !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--border-light) !important;
    text-align: left !important;
}

/* ============================================
   移动端 - RTL模式菜单从右边滑出
   ============================================ */

@media (max-width: 768px) {
    html[dir="rtl"] .app-sidebar {
        transform: translateX(100%) !important;
        width: 280px !important;
        box-shadow: var(--shadow-xl) !important;
    }

    html[dir="rtl"] .app-sidebar.open {
        transform: translateX(0) !important;
    }

    html[dir="rtl"] .app-main {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* ============================================
   移动端 - LTR模式菜单从左边滑出
   ============================================ */

@media (max-width: 768px) {
    html[dir="ltr"] .app-sidebar {
        transform: translateX(-100%) !important;
        width: 280px !important;
        box-shadow: var(--shadow-xl) !important;
    }

    html[dir="ltr"] .app-sidebar.open {
        transform: translateX(0) !important;
    }

    html[dir="ltr"] .app-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   覆盖层
   ============================================ */

.app-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 45 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.app-overlay.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ============================================
   菜单项状态
   ============================================ */

.nav-item:hover {
    background: var(--background-tertiary) !important;
    color: var(--text-primary) !important;
}

.nav-item.active {
    background: var(--primary-50) !important;
    color: var(--primary-600) !important;
}

/* ============================================
   响应式 - 平板设备
   ============================================ */

@media (max-width: 1024px) {
    :root {
        --sidebar-width: 220px !important;
    }
}

/* ============================================
   响应式 - 小屏幕设备
   ============================================ */

@media (max-width: 640px) {
    :root {
        --sidebar-width: 100% !important;
    }

    html[dir="rtl"] .app-sidebar,
    html[dir="ltr"] .app-sidebar {
        width: 100% !important;
        max-width: 280px !important;
    }

    html[dir="rtl"] .app-main,
    html[dir="ltr"] .app-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}