Fix toggle switches broken in RTL — force dir=ltr on switch element

The knob was offset because `after:start-[2px]` + `rtl:peer-checked:after:-translate-x-full`
creates conflicting positioning in RTL. Fix: wrap the toggle in dir="ltr" and use
`after:left-[2px]` so the switch itself is always LTR (knob moves left→right when on),
while the label text around it remains RTL.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

resources/views/livewire/admin/system-settings.blade.php

@@ -53,17 +53,19 @@ class="shrink-0 px-3 sm:px-4 py-2.5 text-sm font-medium whitespace-nowrap border
 
                             @if($config['type'] === 'boolean')
                                 {{-- Toggle switch --}}
-                                <label class="relative inline-flex items-center cursor-pointer">
-                                    <input
-                                        type="checkbox"
-                                        id="setting-{{ $key }}"
-                                        wire:model="settings.{{ $key }}"
-                                        value="1"
-                                        @checked(filter_var($settings[$key] ?? false, FILTER_VALIDATE_BOOLEAN))
-                                        class="sr-only peer"
-                                    >
-                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-                                    <span class="ms-3 text-sm text-gray-600">
+                                <label class="inline-flex items-center cursor-pointer gap-3">
+                                    <span class="relative" dir="ltr">
+                                        <input
+                                            type="checkbox"
+                                            id="setting-{{ $key }}"
+                                            wire:model="settings.{{ $key }}"
+                                            value="1"
+                                            @checked(filter_var($settings[$key] ?? false, FILTER_VALIDATE_BOOLEAN))
+                                            class="sr-only peer"
+                                        >
+                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                                    </span>
+                                    <span class="text-sm text-gray-600">
                                         {{ filter_var($settings[$key] ?? false, FILTER_VALIDATE_BOOLEAN) ? __('مفعّل') : __('معطّل') }}
                                     </span>
                                 </label>
@@ -112,6 +114,10 @@ class="w-full max-w-xs rounded-lg border-gray-300 shadow-sm focus:border-blue-50
                                     class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
                                 >
                             @endif
+
+                            @if(!empty($config['hint']))
+                                <p class="mt-1.5 text-xs text-gray-500">{{ __($config['hint']) }}</p>
+                            @endif
                         </div>
                     @endforeach
                 </div>

resources/views/livewire/notifications/notification-template-form.blade.php

@@ -93,9 +93,9 @@ class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:r
 
             {{-- Active --}}
             <div class="min-h-[44px] flex items-center gap-3 pt-6">
-                <label class="relative inline-flex items-center cursor-pointer">
+                <label class="relative inline-flex items-center cursor-pointer" dir="ltr">
                     <input type="checkbox" wire:model="is_active" class="sr-only peer">
-                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                 </label>
                 <span class="text-sm font-medium text-gray-700">{{ __('القالب نشط') }}</span>
             </div>

resources/views/livewire/receptionist/enroll-existing-wizard.blade.php

@@ -277,9 +277,9 @@ class="inline-flex items-center gap-2 px-6 py-3 min-h-16 bg-emerald-600 text-whi
             @if($program && $program->fee_amount)
             <div class="border-t border-gray-200 pt-6">
                 <div class="flex items-center gap-4 mb-4">
-                    <label class="relative cursor-pointer">
+                    <label class="relative cursor-pointer" dir="ltr">
                         <input type="checkbox" wire:model.live="pay_now" class="peer sr-only">
-                        <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-green-500 transition-colors after:content-[''] after:absolute after:top-1 after:start-1 after:w-6 after:h-6 after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-6 rtl:peer-checked:after:-translate-x-6"></div>
+                        <div class="w-14 h-8 rounded-full bg-gray-300 peer-checked:bg-green-500 transition-colors after:content-[''] after:absolute after:top-1 after:left-1 after:w-6 after:h-6 after:bg-white after:rounded-full after:transition-all peer-checked:after:translate-x-6"></div>
                     </label>
                     <span class="text-base font-medium text-gray-700">{{ __('الدفع الآن') }}</span>
                 </div>

resources/views/livewire/settings/branding-settings.blade.php

@@ -465,9 +465,9 @@ class="px-3 sm:px-5 py-2.5 sm:py-3 text-xs sm:text-sm font-medium whitespace-now
                         'compact_sidebar' => ['شريط جانبي مضغوط', 'يعرض الشريط الجانبي بحجم أصغر (أيقونات فقط)'],
                     ] as $field => [$label, $desc])
                         <label class="flex items-start gap-4 cursor-pointer group">
-                            <div class="relative mt-0.5">
+                            <div class="relative mt-0.5" dir="ltr">
                                 <input type="checkbox" wire:model="{{ $field }}" class="sr-only peer">
-                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                             </div>
                             <div>
                                 <span class="text-sm font-medium text-gray-900 group-hover:text-blue-700 transition-colors">{{ __($label) }}</span>

resources/views/livewire/settings/system-settings-form.blade.php

@@ -67,7 +67,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c
                             </label>
 
                             @if($type === 'boolean')
-                                <label class="relative inline-flex items-center cursor-pointer min-h-[44px]">
+                                <label class="relative inline-flex items-center cursor-pointer" dir="ltr">
                                     <input
                                         type="checkbox"
                                         id="setting-{{ $key }}"
@@ -75,7 +75,7 @@ class="px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-c
                                         value="1"
                                         @checked(filter_var($value, FILTER_VALIDATE_BOOLEAN))
                                         class="sr-only peer">
-                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                 </label>
                             @elseif($type === 'integer' || $type === 'float')
                                 <input