/* mani-shell-rtl.css */
[dir="rtl"] body, html[dir="rtl"]{
    font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif;
}

[dir="rtl"] .mnx-nav-list{
    padding-right: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    margin: 0;
}

[dir="rtl"] .mnx-rail{
    border-right: none !important;
    border-left: 1px solid var(--mnx-border);
}

[dir="rtl"] .mnx-drawer{
    border-right: none !important;
    border-left: 1px solid var(--mnx-border);
    margin-left: 0 !important;
    margin-right: 0;
}

[dir="rtl"] .mnx-app.drawer-closed .mnx-drawer{
    margin-left: 0 !important;
    margin-right: calc(var(--mnx-drawer) * -1) !important;
}

/* Smart Hover Push State for RTL */
[dir="rtl"] .mnx-app.drawer-closed.drawer-hovered .mnx-drawer{
    margin-right: 0 !important;
    margin-left: 0 !important;
}

[dir="rtl"] .mnx-rail-btn[data-tip]:hover::after{
    left: auto;
    right: calc(100% + 14px);
}

[dir="rtl"] .mnx-rail-btn[data-tip]:hover::before{
    left: auto;
    right: calc(100% + 7px);
    border-right-color: transparent;
    border-left-color: var(--mnx-ink);
}

[dir="rtl"] .mnx-rail-btn.is-peek::after{
    right: auto;
    left: -7px;
    right: auto;
    border-left: none;
    border-right: 7px solid var(--mnx-rail-active);
}

@keyframes peek-arrow-pulse {
    0%, 100% { opacity: 0.4; transform: translateY(-50%) translateX(0); }
    50%       { opacity: 0.9; transform: translateY(-50%) translateX(-2px); }
}

[dir="rtl"] .mnx-top-btn{
    justify-content: center;
}

[dir="rtl"] .mnx-curr-dropdown{
    right: auto !important;
    left: 0;
    direction: ltr;
}

[dir="rtl"] .mnx-bc-sep{
    transform: none !important;
    display: inline-block;
    font-size: 10px !important;
}

[dir="rtl"] .mnx-user-row{
    flex-direction: row;
}

[dir="rtl"] .mnx-user-meta{
    text-align: right;
}

@keyframes mnx-soft-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

[dir="rtl"] .mnx-nav-section.is-active{
    animation: mnx-soft-fade 0.2s ease-in-out forwards;
}

@media(max-width: 900px) {
[dir="rtl"] .mnx-drawer{
        left: auto !important;
        right: 56px;
        box-shadow: -8px 0 24px rgba(0, 0, 0, .08);
    }

[dir="rtl"] .mnx-app.drawer-closed .mnx-drawer{
        margin-left: 0 !important;
        margin-right: calc(var(--mnx-drawer) * -1) !important;
        box-shadow: none;
    }
}