Refactor RTL support in contexts and NavBar; update CSS for improved direction handling

src/index.css

@@ -55,69 +55,17 @@ html {
   will-change: auto;
 }
 
-/* RTL Support */
-[dir='rtl'] {
-  direction: rtl;
-  text-align: right;
-}
-
-[dir='rtl'] .rtl-mirror {
-  transform: scaleX(-1);
-}
-
-/* Handle margins and paddings for RTL */
-[dir='rtl'] .ml-auto {
-  margin-left: 0;
-  margin-right: auto;
-}
-
-[dir='rtl'] .mr-auto {
-  margin-right: 0;
-  margin-left: auto;
-}
-
-/* Flip icons and arrows in RTL */
+/*
+ * RTL Support
+ *
+ * Component styling is mirrored by stylis-plugin-rtl (see ThemeContext), which
+ * flips the physical properties emitted by `sx`. Do not add per-component
+ * `[dir='rtl']` overrides here — they fight the plugin and double-flip.
+ *
+ * Only opt-in utilities belong in this block:
+ *   .rtl-flip — mirror an icon that encodes a direction (arrows, chevrons).
+ *               Do NOT use it on symbols that read the same either way.
+ */
 [dir='rtl'] .rtl-flip {
   transform: scaleX(-1);
 }
-
-/* Ensure proper text alignment in RTL */
-[dir='rtl'] input,
-[dir='rtl'] textarea {
-  text-align: right;
-}
-
-/* Handle border radius for RTL */
-[dir='rtl'] .rounded-l-none {
-  border-radius: 0 0.375rem 0.375rem 0;
-}
-
-[dir='rtl'] .rounded-r-none {
-  border-radius: 0.375rem 0 0 0.375rem;
-}
-
-/* Fix flex alignment for RTL */
-[dir='rtl'] .flex {
-  direction: rtl;
-}
-
-/* Ensure cards and containers align properly in RTL */
-[dir='rtl'] .MuiCard-root,
-[dir='rtl'] .MuiBox-root,
-[dir='rtl'] .MuiStack-root {
-  text-align: right;
-}
-
-/* Fix list item alignment in RTL */
-[dir='rtl'] .MuiListItem-root,
-[dir='rtl'] .MuiListItemButton-root {
-  flex-direction: row-reverse;
-}
-
-/* Fix gap alignment in RTL */
-[dir='rtl'] .gap-1,
-[dir='rtl'] .gap-2,
-[dir='rtl'] .gap-3,
-[dir='rtl'] .gap-4 {
-  direction: rtl;
-}