Additional mobile fixes from parallel agents (forms, lists, reports)

- Remaining form views: touch-friendly inputs, stacked buttons
- assignment-list, pricing-rule-list: mobile card layouts
- visual-schedule-builder: stacked sidebar on mobile
- reports-page, user-profile: responsive grids and padding
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

resources/views/livewire/assignments/assignment-form.blade.php

@@ -198,13 +198,13 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
         {{-- Submit --}}
         <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
             <a href="{{ route('assignments.list') }}" wire:navigate
-               class="text-center px-4 sm:px-6 py-2.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">
+               class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">
                 {{ __('إلغاء') }}
             </a>
             <button type="submit"
                     wire:loading.attr="disabled"
                     wire:target="save"
-                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
+                    class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50">
                 <span wire:loading.remove wire:target="save">{{ __('حفظ التكليف') }}</span>
                 <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
             </button>

resources/views/livewire/evaluations/evaluation-form.blade.php

@@ -156,7 +156,7 @@ class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:r
         <!-- Actions -->
         <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
             <a href="{{ route('evaluations.list') }}"
-               class="px-5 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors text-center w-full sm:w-auto">
+               class="text-center px-4 sm:px-6 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                 {{ __('إلغاء') }}
             </a>
 
@@ -165,7 +165,7 @@ class="px-5 py-2.5 sm:py-2 text-sm font-medium text-gray-700 bg-white border bor
                 wire:click="saveDraft"
                 wire:loading.attr="disabled"
                 wire:target="saveDraft"
-                class="px-5 py-2.5 sm:py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 disabled:bg-gray-400 transition-colors w-full sm:w-auto">
+                class="text-center px-4 sm:px-6 py-2.5 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 disabled:bg-gray-400 transition-colors">
                 <span wire:loading.remove wire:target="saveDraft">{{ __('حفظ كمسودة') }}</span>
                 <span wire:loading wire:target="saveDraft">{{ __('جارٍ الحفظ...') }}</span>
             </button>
@@ -175,7 +175,7 @@ class="px-5 py-2.5 sm:py-2 bg-gray-600 text-white text-sm font-medium rounded-lg
                 wire:click="submit"
                 wire:loading.attr="disabled"
                 wire:target="submit"
-                class="px-5 py-2.5 sm:py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors w-full sm:w-auto">
+                class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
                 <span wire:loading.remove wire:target="submit">{{ __('تقديم') }}</span>
                 <span wire:loading wire:target="submit">{{ __('جارٍ التقديم...') }}</span>
             </button>

resources/views/livewire/facilities/facility-form.blade.php

@@ -157,18 +157,18 @@ class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2
             </div>
 
             {{-- Boolean Options --}}
-            <div class="flex flex-wrap gap-6 mt-4 pt-4 border-t border-gray-100">
-                <label class="flex items-center gap-2 cursor-pointer">
+            <div class="flex flex-wrap gap-4 sm:gap-6 mt-4 pt-4 border-t border-gray-100">
+                <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
                     <input type="checkbox" wire:model="is_indoor"
                            class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                     <span class="text-sm text-gray-700">{{ __('مغطى (داخلي)') }}</span>
                 </label>
-                <label class="flex items-center gap-2 cursor-pointer">
+                <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
                     <input type="checkbox" wire:model="has_lighting"
                            class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                     <span class="text-sm text-gray-700">{{ __('يوجد إضاءة') }}</span>
                 </label>
-                <label class="flex items-center gap-2 cursor-pointer">
+                <label class="min-h-[44px] flex items-center gap-2 cursor-pointer">
                     <input type="checkbox" wire:model="has_ac"
                            class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                     <span class="text-sm text-gray-700">{{ __('يوجد تكييف') }}</span>
@@ -226,7 +226,7 @@ class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2
                 <div>
                     <label for="sort_order" class="block text-sm font-medium text-gray-700 mb-1">{{ __('الترتيب') }}</label>
                     <input type="number" id="sort_order" wire:model="sort_order" min="0" dir="ltr"
-                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sort_order') border-red-500 @enderror">
+                           class="w-full text-sm px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('sort_order') border-red-500 @enderror">
                     @error('sort_order') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
                 </div>
             </div>

resources/views/livewire/financial/coupon-validator.blade.php

-<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
-    <h4 class="text-sm font-semibold text-gray-700 mb-3">{{ __('كود خصم') }}</h4>
+<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
+    <h4 class="text-base sm:text-lg font-semibold text-gray-700 mb-3">{{ __('كود خصم') }}</h4>
 
-    <div class="flex gap-2">
+    <div class="flex flex-col sm:flex-row gap-2">
         <input type="text" wire:model="code" wire:keydown.enter="check"
                placeholder="{{ __('أدخل الكود') }}"
-               class="flex-1 rounded-lg border-gray-300 text-sm uppercase" dir="ltr">
+               class="flex-1 rounded-lg border-gray-300 text-sm uppercase py-2.5" dir="ltr">
         <button wire:click="check" wire:loading.attr="disabled" wire:target="check"
-                class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50">
+                class="w-full sm:w-auto px-4 py-2.5 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 disabled:opacity-50">
             <span wire:loading.remove wire:target="check">{{ __('تحقق') }}</span>
             <span wire:loading wire:target="check">...</span>
         </button>

resources/views/livewire/financial/payment-plan-create.blade.php

@@ -93,7 +93,7 @@ class="w-full rounded-lg border-gray-300 text-sm py-2.5">
             </div>
 
             <button wire:click="save" wire:loading.attr="disabled"
-                    class="w-full mt-6 px-6 py-2.5 sm:py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
+                    class="w-full mt-6 px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
                 <span wire:loading.remove wire:target="save">{{ __('إنشاء خطة الدفع') }}</span>
                 <span wire:loading wire:target="save">{{ __('جارٍ الإنشاء...') }}</span>
             </button>

resources/views/livewire/inventory/warehouse-form.blade.php

@@ -98,9 +98,9 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
         {{-- Actions --}}
         <div class="flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
             <a href="{{ route('inventory.warehouses') }}" wire:navigate
-               class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
+               class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">{{ __('إلغاء') }}</a>
             <button type="submit" wire:loading.attr="disabled" wire:target="save"
-                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
+                    class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
                 <span wire:loading.remove wire:target="save">{{ $editing ? __('حفظ التعديلات') : __('إنشاء المستودع') }}</span>
                 <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
             </button>

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

@@ -104,11 +104,11 @@ class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:r
         {{-- Submit --}}
         <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3 pt-4 border-t border-gray-200">
             <a href="{{ route('notifications.templates') }}" wire:navigate
-               class="px-6 py-2.5 sm:py-2 text-gray-700 rounded-lg hover:bg-gray-100 text-sm font-medium text-center w-full sm:w-auto">
+               class="text-center px-4 sm:px-6 py-2.5 text-gray-700 rounded-lg hover:bg-gray-100 text-sm font-medium">
                 {{ __('إلغاء') }}
             </a>
             <button type="submit" wire:loading.attr="disabled" wire:target="save"
-                    class="inline-flex items-center justify-center gap-2 px-6 py-2.5 sm:py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed w-full sm:w-auto">
+                    class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                 <span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span>
                 <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
             </button>

resources/views/livewire/participants/participant-import.blade.php

@@ -6,7 +6,7 @@ class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للقائ
     </div>
 
     {{-- Instructions --}}
-    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
+    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 sm:p-6 mb-4 sm:mb-6">
         <h3 class="text-sm font-semibold text-blue-800 mb-2">{{ __('تعليمات الاستيراد') }}</h3>
         <ul class="text-sm text-blue-700 space-y-1 list-disc list-inside">
             <li>{{ __('الملف يجب أن يكون بصيغة CSV') }}</li>
@@ -17,11 +17,11 @@ class="text-sm text-blue-600 hover:text-blue-800">{{ __('العودة للقائ
     </div>
 
     {{-- Upload --}}
-    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
         <div class="mb-4">
             <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('ملف CSV') }}</label>
             <input type="file" wire:model="file" accept=".csv,.txt"
-                   class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
+                   class="block w-full text-sm text-gray-500 file:me-4 file:py-2.5 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
             @error('file') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
         </div>
 
@@ -30,14 +30,14 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou
 
     {{-- Preview --}}
     @if(!empty($preview))
-    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 mb-4 sm:mb-6">
         <h3 class="text-sm font-semibold text-gray-800 mb-3">{{ __('معاينة (أول 5 سجلات)') }}</h3>
-        <div class="overflow-x-auto">
+        <div class="overflow-x-auto -mx-4 sm:mx-0">
             <table class="min-w-full text-sm">
                 <thead class="bg-gray-50">
                     <tr>
                         @foreach(array_keys($preview[0]) as $col)
-                        <th class="px-3 py-2 text-start text-xs font-medium text-gray-500">{{ $col }}</th>
+                        <th class="px-3 py-2 text-start text-xs font-medium text-gray-500 whitespace-nowrap">{{ $col }}</th>
                         @endforeach
                     </tr>
                 </thead>
@@ -45,7 +45,7 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou
                     @foreach($preview as $row)
                     <tr class="border-t">
                         @foreach($row as $cell)
-                        <td class="px-3 py-2 text-gray-700">{{ $cell }}</td>
+                        <td class="px-3 py-2 text-gray-700 whitespace-nowrap">{{ $cell }}</td>
                         @endforeach
                     </tr>
                     @endforeach
@@ -53,17 +53,19 @@ class="block w-full text-sm text-gray-500 file:me-4 file:py-2 file:px-4 file:rou
             </table>
         </div>
 
-        <button wire:click="import" wire:loading.attr="disabled"
-                class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
-            <span wire:loading.remove wire:target="import">{{ __('بدء الاستيراد') }}</span>
-            <span wire:loading wire:target="import">{{ __('جارٍ الاستيراد...') }}</span>
-        </button>
+        <div class="flex flex-col-reverse sm:flex-row gap-3 mt-4">
+            <button wire:click="import" wire:loading.attr="disabled"
+                    class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
+                <span wire:loading.remove wire:target="import">{{ __('بدء الاستيراد') }}</span>
+                <span wire:loading wire:target="import">{{ __('جارٍ الاستيراد...') }}</span>
+            </button>
+        </div>
     </div>
     @endif
 
     {{-- Errors --}}
     @if(!empty($importErrors))
-    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
+    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-4 sm:mb-6">
         <h3 class="text-sm font-semibold text-red-800 mb-2">{{ __('أخطاء') }}</h3>
         <ul class="text-sm text-red-700 space-y-1 max-h-40 overflow-y-auto">
             @foreach($importErrors as $error)
@@ -75,9 +77,9 @@ class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabl
 
     {{-- Results --}}
     @if($done)
-    <div class="bg-green-50 border border-green-200 rounded-xl p-6">
-        <h3 class="text-lg font-semibold text-green-800 mb-3">{{ __('اكتمل الاستيراد') }}</h3>
-        <div class="flex items-center gap-6 text-sm">
+    <div class="bg-green-50 border border-green-200 rounded-xl p-4 sm:p-6">
+        <h3 class="text-base sm:text-lg font-semibold text-green-800 mb-3">{{ __('اكتمل الاستيراد') }}</h3>
+        <div class="grid grid-cols-2 gap-3 sm:gap-6 text-sm">
             <span class="text-green-700">{{ __('تم استيراد:') }} <span class="font-bold">{{ $imported }}</span></span>
             <span class="text-amber-700">{{ __('تم تخطي:') }} <span class="font-bold">{{ $skipped }}</span></span>
         </div>

resources/views/livewire/pricing/base-price-form.blade.php

@@ -123,13 +123,13 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
             {{-- Submit --}}
             <div class="mt-6 flex flex-col-reverse sm:flex-row items-stretch sm:items-center justify-end gap-3">
                 <a href="{{ route('pricing.base-prices') }}" wire:navigate
-                   class="text-center px-4 sm:px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm">
+                   class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium text-sm">
                     {{ __('إلغاء') }}
                 </a>
                 <button type="submit"
                         wire:loading.attr="disabled"
                         wire:target="save"
-                        class="text-center px-4 sm:px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50">
+                        class="px-6 py-2.5 sm:py-2 w-full sm:w-auto text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium text-sm disabled:opacity-50">
                     <span wire:loading.remove wire:target="save">{{ $editing ? __('تحديث') : __('حفظ') }}</span>
                     <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                 </button>

resources/views/livewire/pricing/pricing-rule-form.blade.php

@@ -148,7 +148,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                 <div class="bg-gray-50 rounded-lg p-4" x-data="{ conditions: @entangle('conditions') }">
                     @switch($rule_type)
                         @case('age')
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('العمر الأدنى') }}</label>
                                     <input type="number" min="0" dir="ltr"
@@ -165,7 +165,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
                             @break
 
                         @case('membership_duration')
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى (أشهر)') }}</label>
                                     <input type="number" min="0" dir="ltr"
@@ -182,7 +182,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
                             @break
 
                         @case('family_size')
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى لحجم الأسرة') }}</label>
                                     <input type="number" min="1" dir="ltr"
@@ -203,7 +203,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
                                 <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('ترتيب الأخ (مثال: 2 = الثاني)') }}</label>
                                 <input type="number" min="1" dir="ltr"
                                        x-model.number="conditions.sibling_order"
-                                       class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                       class="w-full max-w-xs px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                             </div>
                             @break
 
@@ -212,7 +212,7 @@ class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2
                                 <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التصنيفات المؤهلة') }}</label>
                                 <div class="flex flex-wrap gap-3 mt-2">
                                     @foreach(['regular' => 'عادي', 'vip' => 'VIP', 'scholarship' => 'منحة', 'staff_child' => 'ابن موظف', 'trial' => 'تجريبي'] as $val => $lbl)
-                                    <label class="inline-flex items-center gap-2">
+                                    <label class="min-h-[44px] inline-flex items-center gap-2">
                                         <input type="checkbox" value="{{ $val }}"
                                                x-model="conditions.classifications"
                                                class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
@@ -227,12 +227,12 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                             <div>
                                 <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الجنس') }}</label>
                                 <div class="flex gap-4 mt-2">
-                                    <label class="inline-flex items-center gap-2">
+                                    <label class="min-h-[44px] inline-flex items-center gap-2">
                                         <input type="radio" value="male" x-model="conditions.gender"
                                                class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
                                         <span class="text-sm text-gray-700">{{ __('ذكر') }}</span>
                                     </label>
-                                    <label class="inline-flex items-center gap-2">
+                                    <label class="min-h-[44px] inline-flex items-center gap-2">
                                         <input type="radio" value="female" x-model="conditions.gender"
                                                class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
                                         <span class="text-sm text-gray-700">{{ __('أنثى') }}</span>
@@ -242,7 +242,7 @@ class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500">
                             @break
 
                         @case('enrollment_timing')
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('التسجيل قبل تاريخ') }}</label>
                                     <input type="date" dir="ltr"
@@ -263,12 +263,12 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
                                 <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للتسجيلات') }}</label>
                                 <input type="number" min="1" dir="ltr"
                                        x-model.number="conditions.min_enrollments"
-                                       class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                       class="w-full max-w-xs px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                             </div>
                             @break
 
                         @case('seasonal')
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }}</label>
                                     <input type="date" dir="ltr"
@@ -285,7 +285,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
                             @break
 
                         @case('day_time')
-                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الأيام') }}</label>
                                     <div class="flex flex-wrap gap-2 mt-1">
@@ -321,7 +321,7 @@ class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2
                                 <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحد الأدنى للنقاط') }}</label>
                                 <input type="number" min="0" dir="ltr"
                                        x-model.number="conditions.min_points"
-                                       class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                       class="w-full max-w-xs px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                             </div>
                             @break
 
@@ -345,7 +345,7 @@ class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                             <div>
                                 <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('وصف الشرط المخصص') }}</label>
                                 <textarea x-model="conditions.description" rows="3"
-                                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                          class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                           placeholder="{{ __('اكتب وصف الشرط المخصص...') }}"></textarea>
                             </div>
                             @break

resources/views/livewire/pricing/pricing-rule-list.blade.php

 <div>
-    <div class="flex items-center justify-between mb-6">
+    {{-- Header --}}
+    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
         <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('قواعد التسعير') }}</h1>
         @can('pricing.create')
         <a href="{{ route('pricing.rules.create') }}" wire:navigate
            class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
-            {{ __('إضافة قاعدة') }}
+            <span class="hidden sm:inline">{{ __('إضافة قاعدة') }}</span>
         </a>
         @endcan
     </div>
@@ -23,20 +24,20 @@ class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-l
     @endif
 
     {{-- Filters --}}
-    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-4">
-        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
-            <div class="sm:col-span-2">
+    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-3 sm:p-4 mb-4">
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div class="col-span-2">
                 <input type="text" wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('بحث بالاسم...') }}"
-                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                       class="w-full px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
             </div>
-            <select wire:model.live="ruleType" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            <select wire:model.live="ruleType" class="px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                 <option value="">{{ __('كل الأنواع') }}</option>
                 @foreach($ruleTypes as $value => $label)
                 <option value="{{ $value }}">{{ $label }}</option>
                 @endforeach
             </select>
-            <select wire:model.live="activeFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            <select wire:model.live="activeFilter" class="px-4 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                 <option value="">{{ __('الكل') }}</option>
                 <option value="1">{{ __('نشط') }}</option>
                 <option value="0">{{ __('غير نشط') }}</option>
@@ -44,9 +45,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
         </div>
     </div>
 
-    {{-- Table --}}
-    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-        <div wire:loading.class="opacity-50 pointer-events-none">
+    {{-- Desktop Table --}}
+    <div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+        <div class="overflow-x-auto" wire:loading.class="opacity-50 pointer-events-none">
             <table class="w-full text-sm">
                 <thead class="bg-gray-50 border-b border-gray-200">
                     <tr>
@@ -138,4 +139,88 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
         </div>
         @endif
     </div>
+
+    {{-- Mobile Cards --}}
+    <div class="md:hidden space-y-3" wire:loading.class="opacity-50 pointer-events-none">
+        @forelse($rules as $rule)
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
+            {{-- Card Header: Name + Status Toggle --}}
+            <div class="flex items-start justify-between gap-3 mb-3">
+                <div>
+                    <span class="font-medium text-gray-800">{{ $rule->name_ar }}</span>
+                    @if($rule->branch)
+                    <span class="block text-xs text-gray-400 mt-0.5">{{ $rule->branch->name_ar }}</span>
+                    @endif
+                </div>
+                <button wire:click="toggleActive('{{ $rule->uuid }}')"
+                        wire:loading.attr="disabled"
+                        class="px-2 py-1 text-xs rounded-full shrink-0 {{ $rule->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
+                    {{ $rule->is_active ? __('نشط') : __('غير نشط') }}
+                </button>
+            </div>
+
+            {{-- Badges Row --}}
+            <div class="flex flex-wrap items-center gap-2 mb-3">
+                <span class="px-2 py-0.5 text-xs bg-purple-100 text-purple-700 rounded-full">
+                    {{ $rule->rule_type->label() }}
+                </span>
+                <span class="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
+                    {{ $rule->adjustment_type->label() }}
+                </span>
+            </div>
+
+            {{-- Details Row --}}
+            <div class="flex items-center justify-between text-sm text-gray-600 mb-3">
+                <div class="flex items-center gap-4">
+                    <span dir="ltr" class="font-medium text-gray-800">
+                        @if(in_array($rule->adjustment_type, [\App\Domain\Pricing\Enums\AdjustmentType::PercentageDiscount, \App\Domain\Pricing\Enums\AdjustmentType::PercentageIncrease]))
+                            {{ $rule->adjustment_value }}%
+                        @else
+                            {{ number_format($rule->adjustment_value / 100, 2) }} {{ __('ج.م') }}
+                        @endif
+                    </span>
+                    <span>
+                        {{ __('الأولوية') }}: <span dir="ltr">{{ $rule->priority }}</span>
+                    </span>
+                </div>
+                <span>
+                    @if($rule->is_stackable)
+                    <span class="text-green-600 text-xs">{{ __('قابل للتكديس') }}</span>
+                    @else
+                    <span class="text-gray-400 text-xs">{{ __('غير قابل للتكديس') }}</span>
+                    @endif
+                </span>
+            </div>
+
+            {{-- Action --}}
+            @can('pricing.update')
+            <a href="{{ route('pricing.rules.edit', $rule) }}" wire:navigate
+               class="block text-center py-2 text-blue-600 hover:text-blue-800 text-sm font-medium border-t border-gray-100 -mx-4 -mb-4 px-4 pt-3 pb-3 rounded-b-xl hover:bg-gray-50">
+                {{ __('تعديل') }}
+            </a>
+            @endcan
+        </div>
+        @empty
+        <div class="bg-white rounded-xl shadow-sm border border-gray-200 px-4 py-12 text-center">
+            <div class="flex flex-col items-center">
+                <svg class="w-12 h-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+                </svg>
+                <p class="text-gray-500 text-sm">{{ __('لا توجد قواعد تسعير') }}</p>
+                @can('pricing.create')
+                <a href="{{ route('pricing.rules.create') }}" wire:navigate
+                   class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
+                    {{ __('إضافة أول قاعدة') }}
+                </a>
+                @endcan
+            </div>
+        </div>
+        @endforelse
+
+        @if($rules->hasPages())
+        <div class="mt-4">
+            {{ $rules->links() }}
+        </div>
+        @endif
+    </div>
 </div>

resources/views/livewire/profile/user-profile.blade.php

@@ -46,23 +46,23 @@ class="w-full sm:w-auto px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-b
         <form wire:submit="changePassword" class="space-y-4">
             <div>
                 <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور الحالية') }}</label>
-                <input type="password" wire:model="current_password" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                <input type="password" wire:model="current_password" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                 @error('current_password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('كلمة المرور الجديدة') }}</label>
-                    <input type="password" wire:model="new_password" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <input type="password" wire:model="new_password" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                     @error('new_password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                 </div>
                 <div>
                     <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('تأكيد كلمة المرور') }}</label>
-                    <input type="password" wire:model="new_password_confirmation" dir="ltr" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <input type="password" wire:model="new_password_confirmation" dir="ltr" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                 </div>
             </div>
 
             <button type="submit" wire:loading.attr="disabled" wire:target="changePassword"
-                    class="px-6 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 text-sm font-medium">
+                    class="w-full sm:w-auto px-6 py-2.5 bg-amber-600 text-white rounded-lg hover:bg-amber-700 disabled:opacity-50 text-sm font-medium">
                 <span wire:loading.remove wire:target="changePassword">{{ __('تغيير كلمة المرور') }}</span>
                 <span wire:loading wire:target="changePassword">{{ __('جارٍ التغيير...') }}</span>
             </button>