From 8d1a940588d9a1673676e4802b194ce52e588efd Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 31 Dec 2025 10:31:49 +0100
Subject: [PATCH] fix(rtl): comprehensive layout fixes for Arabic

- Swap left/right panels in RTL mode
- Flip left panel border to left side
- Flip hint border to right side
- Flip lessons container indentation (margin, border, padding)
- Flip module expand icon and lesson checkmark margins
- Flip toggle switch slider margin
- Reverse setting row and preview controls
---
 src/main.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/src/main.css b/src/main.css
index 7bfe75e..a73511b 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1359,6 +1359,12 @@ input:checked + .toggle-slider::before {
 [dir="rtl"] .hint {
 	flex-direction: row-reverse;
 	text-align: right;
+	border-left: none;
+	border-right: 3px solid var(--primary-light);
+}
+
+[dir="rtl"] .hint-success {
+	border-right-color: var(--success-color);
 }
 
 /* RTL: Module list items */
@@ -1406,3 +1412,52 @@ input:checked + .toggle-slider::before {
 [dir="rtl"] .logo {
 	direction: ltr;
 }
+
+/* RTL: Swap left/right panels */
+[dir="rtl"] .game-layout {
+	flex-direction: row-reverse;
+}
+
+/* RTL: Left panel border flips to left side */
+[dir="rtl"] .left-panel {
+	border-right: none;
+	border-left: 1px solid var(--border-color);
+}
+
+/* RTL: Lessons container indentation flips */
+[dir="rtl"] .lessons-container {
+	margin-left: 0;
+	margin-right: 16px;
+	border-left: none;
+	border-right: 2px solid var(--border-color);
+	padding-left: 0;
+	padding-right: 8px;
+}
+
+/* RTL: Module expand icon */
+[dir="rtl"] .module-header .expand-icon {
+	margin-left: 6px;
+	margin-right: 0;
+}
+
+/* RTL: Lesson checkmark position */
+[dir="rtl"] .lesson-list-item::before {
+	margin-left: 6px;
+	margin-right: 0;
+}
+
+/* RTL: Toggle switch slider */
+[dir="rtl"] .toggle-slider {
+	margin-right: 0;
+	margin-left: 8px;
+}
+
+/* RTL: Setting row */
+[dir="rtl"] .setting-row {
+	flex-direction: row-reverse;
+}
+
+/* RTL: Preview controls */
+[dir="rtl"] .preview-controls {
+	flex-direction: row-reverse;
+}