/* ============================================ SportMans RTL CSS Overrides Applied when [dir="rtl"] is set on ============================================ This file flips all physical properties (left/right, margin-left/right, padding-left/right, border-radius, transforms) that SportMans's CSS uses instead of CSS logical properties. ============================================ */ /* ============================================================ 1. GLOBAL TAILWIND UTILITY SWAPS These swap physical left/right utilities for RTL. Using !important to override Tailwind's generated CSS. ============================================================ */ /* --- Position: left-0 <-> right-0 --- */ [dir="rtl"] .left-0 { left: auto !important; right: 0 !important; } [dir="rtl"] .right-0 { right: auto !important; left: 0 !important; } /* --- Margin auto: ml-auto <-> mr-auto --- */ [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } /* --- Margins: swap mr-* <-> ml-* for common values --- */ [dir="rtl"] .mr-0\.5 { margin-right: 0 !important; margin-left: 0.125rem !important; } [dir="rtl"] .ml-0\.5 { margin-left: 0 !important; margin-right: 0.125rem !important; } [dir="rtl"] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; } [dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; } [dir="rtl"] .mr-3\.5 { margin-right: 0 !important; margin-left: 0.875rem !important; } [dir="rtl"] .ml-3\.5 { margin-left: 0 !important; margin-right: 0.875rem !important; } [dir="rtl"] .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; } [dir="rtl"] .mr-5 { margin-right: 0 !important; margin-left: 1.25rem !important; } [dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 1.25rem !important; } [dir="rtl"] .mr-6 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .ml-6 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .mr-8 { margin-right: 0 !important; margin-left: 2rem !important; } [dir="rtl"] .ml-8 { margin-left: 0 !important; margin-right: 2rem !important; } /* --- Paddings: swap pr-* <-> pl-* for common values --- */ [dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; } [dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; } [dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } [dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; } [dir="rtl"] .pr-0\.5 { padding-right: 0 !important; padding-left: 0.125rem !important; } [dir="rtl"] .pl-0\.5 { padding-left: 0 !important; padding-right: 0.125rem !important; } [dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 1.25rem !important; } [dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 1.25rem !important; } [dir="rtl"] .pr-8 { padding-right: 0 !important; padding-left: 2rem !important; } [dir="rtl"] .pl-8 { padding-left: 0 !important; padding-right: 2rem !important; } [dir="rtl"] .pr-10 { padding-right: 0 !important; padding-left: 2.5rem !important; } [dir="rtl"] .pl-10 { padding-left: 0 !important; padding-right: 2.5rem !important; } /* --- Negative margins (arbitrary values) --- */ [dir="rtl"] .-ml-\[100\%\] { margin-left: 0 !important; margin-right: -100% !important; } [dir="rtl"] .-mr-\[100\%\] { margin-right: 0 !important; margin-left: -100% !important; } [dir="rtl"] .-ml-\[60px\] { margin-left: 0 !important; margin-right: -60px !important; } [dir="rtl"] .-ml-\[105px\] { margin-left: 0 !important; margin-right: -105px !important; } [dir="rtl"] .-ml-\[1\.125rem\] { margin-left: 0 !important; margin-right: -1.125rem !important; } /* --- before: pseudo-element utilities --- */ [dir="rtl"] .before\:right-0::before { right: auto !important; left: 0 !important; } [dir="rtl"] .before\:left-0::before { left: auto !important; right: 0 !important; } [dir="rtl"] .before\:-ml-\[1\.125rem\]::before { margin-left: 0 !important; margin-right: -1.125rem !important; } /* --- Responsive: sm: prefixes --- */ @media (min-width: 640px) { [dir="rtl"] .sm\:mr-6 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .sm\:ml-6 { margin-left: 0 !important; margin-right: 1.5rem !important; } [dir="rtl"] .sm\:mr-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .sm\:ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .sm\:-ml-\[105px\] { margin-left: 0 !important; margin-right: -105px !important; } [dir="rtl"] .sm\:-mr-\[105px\] { margin-right: 0 !important; margin-left: -105px !important; } } /* ============================================================ 2. GROUP VARIANT OVERRIDES Override Tailwind group-variant utilities for mobile menu and theme switcher slide directions. ============================================================ */ /* Mobile menu: slide from right in RTL */ [dir="rtl"] .group.mobile-menu--active .group-\[\.mobile-menu--active\]\:ml-0 { margin-left: 0 !important; margin-right: 0 !important; } /* Theme switcher: slide from left in RTL */ [dir="rtl"] .group.show .group-\[\.show\]\:mr-0 { margin-right: 0 !important; margin-left: 0 !important; } /* ============================================================ 3. SIDE NAV OVERRIDES (ALL THEMES: rubick, enigma, icewall, tinker) Override physical properties from side-nav.css ============================================================ */ /* Sidebar padding: swap left/right */ [dir="rtl"] .side-nav { padding-right: 0 !important; padding-left: 1.25rem !important; } /* ---------------------------------------------------------------- SIDE MENU UNIFORM ALIGNMENT (comprehensive fix) Every menu item — top-level, group header, sub-item, sub-sub-item, active or not — must have the EXACT same horizontal alignment for both icon and text. The rules below address five root causes: (a) PADDING — force identical padding-right on all levels so the icon left-edge is always at the same offset. (b) MARGIN — force margin-left/right to 0 so no stray margin shifts an item horizontally. (c) FLEX — the theme sets .side-menu__title { width:100% } which creates a flex-basis larger than the available space, causing proportional shrinkage of BOTH the icon and the title. Replacing width:100% with flex:1 lets the title absorb remaining space WITHOUT compressing the icon. (d) ICON — .side-menu__icon has no flex-shrink:0, so it can be squeezed by the flex overflow described in (c). Pinning it with flex-shrink:0 + inline-flex guarantees a constant icon width and therefore a constant icon-to-text gap on every item. (e) UL / PSEUDO — sub-menu

/side-nav.css; the .side-menu__sub-open descendant covers levels 2 and 3. */ [dir="rtl"] nav.side-nav .side-menu, [dir="rtl"] nav.side-nav .side-menu__sub-open .side-menu { padding-left: 0 !important; padding-right: 1.25rem !important; margin-left: 0 !important; margin-right: 0 !important; } /* (c) Title: swap margin-left -> margin-right, and replace width:100% (flex-basis overflow) with flex:1 1 0% so the title takes remaining space without forcing the icon to shrink. */ [dir="rtl"] nav.side-nav .side-menu .side-menu__title { width: auto !important; flex: 1 1 0% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0.75rem !important; } /* Sub-icon (chevron): push to the end (left in RTL) without affecting the text start position. flex-shrink:0 prevents compression. */ [dir="rtl"] nav.side-nav .side-menu .side-menu__title .side-menu__sub-icon { margin-left: 1.25rem !important; margin-right: auto !important; flex-shrink: 0 !important; } /* (d) Icon container: prevent flex-shrink so the icon is always the same width, guaranteeing a consistent icon-to-text gap on every item regardless of label length, nesting level, or active state. */ [dir="rtl"] nav.side-nav .side-menu__icon { flex-shrink: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Force the Lucide SVG to block display + fixed size so no inline whitespace adds extra width to the icon container. */ [dir="rtl"] nav.side-nav .side-menu__icon svg { display: block !important; width: 1.25rem !important; height: 1.25rem !important; } /* (e) Force ALL