Full UX overhaul: tap feedback, close buttons, active states

Problems fixed:
- -webkit-tap-highlight-color:transparent killed OS default feedback
  but no custom active states existed → users got zero confirmation
  of their taps on mobile. Now ALL buttons/links get scale(0.97) on
  :active via CSS base layer, plus explicit active:bg-* on key buttons.
- No modal/dropdown had a visible X close button → users couldn't
  discover how to dismiss on touch. Added X buttons to: sidebar (mobile),
  topbar user menu, global search dropdown, POS receipt modal, and all
  confirmation modals (enrollment cancel, waitlist, freeze, status change,
  reschedule, evaluation criteria form).
- Sidebar nav links had no hover/press states → added hover:bg-white/10
  and active:bg-white/20 + active:scale-[0.97].
- POS terminal: program cards, quantity +/-, checkout, split-add, mobile
  pay bar all now have active:scale and active:bg-* feedback.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

resources/css/app.css

@@ -3,6 +3,8 @@
 @layer base {
     html {
         direction: rtl;
+        scroll-behavior: smooth;
+        -webkit-tap-highlight-color: transparent;
     }
 
     /* Touch-friendly minimum heights */
@@ -12,10 +14,29 @@
         min-height: 44px;
     }
 
-    /* Smooth scrolling */
-    html {
-        scroll-behavior: smooth;
+    /* Universal button/link press feedback */
+    button:not(:disabled),
+    [role="button"],
+    a[href],
+    summary {
         -webkit-tap-highlight-color: transparent;
+        touch-action: manipulation;
+    }
+
+    button:not(:disabled):active,
+    [role="button"]:active,
+    a[href]:active,
+    summary:active {
+        transform: scale(0.97);
+        transition: transform 0.1s ease;
+    }
+
+    /* Prevent stuck hover on touch devices */
+    @media (hover: none) {
+        button:hover,
+        a:hover {
+            background-color: inherit;
+        }
     }
 }
 
@@ -26,6 +47,11 @@
     .safe-top {
         padding-top: env(safe-area-inset-top, 0px);
     }
+    /* Press feedback utility — stronger scale for primary actions */
+    .press-feedback:active {
+        transform: scale(0.95) !important;
+        opacity: 0.9;
+    }
 }
 
 /* Print: hide all app chrome */

resources/views/components/layouts/sidebar.blade.php

@@ -131,8 +131,9 @@
       :class="sidebarOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'"
       class="fixed top-0 start-0 h-screen w-64 flex flex-col z-40 overflow-hidden transition-transform duration-300 ease-in-out lg:translate-x-0"
       style="background-color: var(--brand-sidebar-bg, #0f172a); color: var(--brand-sidebar-text, #e2e8f0);">
-    {{-- Logo --}}
-    <div class="flex items-center justify-center h-16 border-b border-white/10 px-4 shrink-0">
+    {{-- Logo + Mobile Close --}}
+    <div class="flex items-center justify-between h-16 border-b border-white/10 px-4 shrink-0">
+        <div class="flex items-center justify-center flex-1">
             @if(isset($brandLogoDark) && $brandLogoDark && isset($showLogoSidebar) && $showLogoSidebar)
                 <img src="{{ Storage::disk('public')->url($brandLogoDark) }}" alt="" class="h-10 max-w-[140px] object-contain">
             @elseif(isset($brandLogo) && $brandLogo && isset($showLogoSidebar) && $showLogoSidebar)
@@ -141,6 +142,10 @@ class="fixed top-0 start-0 h-screen w-64 flex flex-col z-40 overflow-hidden tran
                 <h1 class="text-xl font-bold">الكابتن</h1>
             @endif
         </div>
+        <button @click="sidebarOpen = false" class="lg:hidden flex items-center justify-center w-10 h-10 rounded-lg text-white/70 hover:text-white hover:bg-white/10 active:bg-white/20 transition-colors" aria-label="{{ __('إغلاق القائمة') }}">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+    </div>
 
     {{-- Navigation --}}
     <nav class="flex-1 overflow-y-auto py-4 ps-3 pe-3 space-y-1">
@@ -149,7 +154,7 @@ class="fixed top-0 start-0 h-screen w-64 flex flex-col z-40 overflow-hidden tran
             @if(isset($item['route']))
                 @if(Route::has($item['route']) && $userCan($item['permission']))
                     <a href="{{ route($item['route']) }}"
-                       class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors duration-150"
+                       class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-150 hover:bg-white/10 active:bg-white/20 active:scale-[0.97]"
                        style="{{ request()->routeIs($item['route'] . '*') ? 'background-color: var(--brand-sidebar-active, #2563eb); color: #fff;' : 'color: var(--brand-sidebar-text, #e2e8f0);' }}">
                         <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $icons[$item['icon']] ?? '' !!}</svg>
                         <span>{{ $item['label'] }}</span>
@@ -171,7 +176,7 @@ class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transi
 
                     @foreach($visibleItems as $child)
                         <a href="{{ route($child['route']) }}"
-                           class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-150"
+                           class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:bg-white/10 active:bg-white/20 active:scale-[0.97]"
                            style="{{ request()->routeIs(Str::before($child['route'], '.index') . '.*') ? 'background-color: var(--brand-sidebar-active, #2563eb); color: #fff;' : 'color: var(--brand-sidebar-text, #e2e8f0);' }}">
                             <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">{!! $icons[$child['icon']] ?? '' !!}</svg>
                             <span>{{ $child['label'] }}</span>
@@ -194,7 +199,7 @@ class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transiti
             </div>
             <form method="POST" action="{{ route('logout') }}">
                 @csrf
-                <button type="submit" class="text-slate-400 hover:text-red-400 transition-colors" title="{{ __('تسجيل الخروج') }}">
+                <button type="submit" class="w-9 h-9 flex items-center justify-center rounded-lg text-slate-400 hover:text-red-400 hover:bg-white/10 active:bg-white/20 transition-colors" title="{{ __('تسجيل الخروج') }}">
                     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                 </button>
             </form>

resources/views/components/layouts/topbar.blade.php

 <header class="sticky top-0 z-30 bg-white border-b border-gray-200 safe-top" data-topbar>
     <div class="flex items-center justify-between h-14 sm:h-16 px-3 sm:px-6 lg:px-8">
         <!-- Mobile menu button -->
-        <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2 -ms-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
+        <button @click="sidebarOpen = !sidebarOpen" class="lg:hidden p-2 -ms-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
         </button>
 
@@ -25,7 +25,7 @@
             </div>
 
             <!-- Notifications (icon only on mobile) -->
-            <a href="{{ route('notifications.center') }}" class="relative p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 transition-colors">
+            <a href="{{ route('notifications.center') }}" class="relative p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
                 <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
             </a>
 
@@ -37,15 +37,22 @@
 
             <!-- User Menu -->
             <div x-data="{ open: false }" class="relative">
-                <button @click="open = !open" class="flex items-center gap-2 p-1.5 rounded-lg hover:bg-gray-100 transition-colors">
+                <button @click="open = !open" class="flex items-center gap-2 p-1.5 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
                     <div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style="background-color: var(--brand-primary, #2563eb);">
                         <span class="text-xs font-medium text-white">{{ mb_substr(auth()->user()->name_ar ?? auth()->user()->name, 0, 1) }}</span>
                     </div>
                     <span class="hidden sm:inline text-sm text-gray-700 max-w-[100px] truncate">{{ auth()->user()->name_ar ?? auth()->user()->name }}</span>
-                    <svg class="w-4 h-4 text-gray-400 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+                    <svg class="w-4 h-4 text-gray-400 hidden sm:block transition-transform" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                 </button>
                 <div x-show="open" @click.outside="open = false" x-transition
                      class="absolute end-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-200 z-50 py-2">
+                    <!-- Close button (touch-friendly) -->
+                    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 mb-1">
+                        <span class="text-xs font-medium text-gray-500">{{ __('القائمة') }}</span>
+                        <button @click="open = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="{{ __('إغلاق') }}">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                        </button>
+                    </div>
                     <!-- Mobile-only items inside menu -->
                     <div class="sm:hidden px-4 py-2 border-b border-gray-100 mb-1">
                         @livewire('branch-switcher')
@@ -54,18 +61,18 @@ class="absolute end-0 mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray
                         @livewire('components.language-switcher')
                         @livewire('components.dark-mode-toggle')
                     </div>
-                    <a href="{{ route('profile') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">
+                    <a href="{{ route('profile') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors">
                         <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                         {{ __('الملف الشخصي') }}
                     </a>
-                    <a href="{{ route('profile.notifications') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50">
+                    <a href="{{ route('profile.notifications') }}" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 active:bg-gray-100 transition-colors">
                         <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                         {{ __('تفضيلات الإشعارات') }}
                     </a>
                     <div class="border-t border-gray-100 mt-1 pt-1">
                         <form method="POST" action="{{ route('logout') }}">
                             @csrf
-                            <button type="submit" class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50">
+                            <button type="submit" class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 active:bg-red-100 transition-colors">
                                 <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                                 {{ __('تسجيل الخروج') }}
                             </button>

resources/views/components/ui/print-receipt-button.blade.php

@@ -17,7 +17,7 @@
             win.focus();
         }
     "
-    {{ $attributes->merge(['class' => "inline-flex items-center justify-center {$sizeClasses} bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"]) }}
+    {{ $attributes->merge(['class' => "inline-flex items-center justify-center {$sizeClasses} bg-green-600 text-white rounded-lg font-medium hover:bg-green-700 active:bg-green-800 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all"]) }}
 >
     <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>

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

@@ -4,7 +4,7 @@
         <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('التكليفات') }}</h1>
         @can('assignments.create')
         <a href="{{ route('assignments.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">
+           class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 text-sm font-medium transition-colors">
             <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>
@@ -140,7 +140,7 @@ class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 f
                                     <button wire:click="suspend('{{ $assignment->uuid }}')"
                                             wire:loading.attr="disabled"
                                             wire:target="suspend('{{ $assignment->uuid }}')"
-                                            class="text-amber-600 hover:text-amber-800 text-sm"
+                                            class="text-amber-600 hover:text-amber-800 active:text-amber-900 text-sm"
                                             title="{{ __('تعليق') }}">
                                         <span wire:loading.remove wire:target="suspend('{{ $assignment->uuid }}')">{{ __('تعليق') }}</span>
                                         <span wire:loading wire:target="suspend('{{ $assignment->uuid }}')">...</span>
@@ -150,7 +150,7 @@ class="text-amber-600 hover:text-amber-800 text-sm"
                                     <button wire:click="activate('{{ $assignment->uuid }}')"
                                             wire:loading.attr="disabled"
                                             wire:target="activate('{{ $assignment->uuid }}')"
-                                            class="text-green-600 hover:text-green-800 text-sm"
+                                            class="text-green-600 hover:text-green-800 active:text-green-900 text-sm"
                                             title="{{ __('تنشيط') }}">
                                         <span wire:loading.remove wire:target="activate('{{ $assignment->uuid }}')">{{ __('تنشيط') }}</span>
                                         <span wire:loading wire:target="activate('{{ $assignment->uuid }}')">...</span>
@@ -161,7 +161,7 @@ class="text-green-600 hover:text-green-800 text-sm"
                                             wire:loading.attr="disabled"
                                             wire:target="cancel('{{ $assignment->uuid }}')"
                                             wire:confirm="{{ __('هل أنت متأكد من إلغاء هذا التكليف؟') }}"
-                                            class="text-red-600 hover:text-red-800 text-sm"
+                                            class="text-red-600 hover:text-red-800 active:text-red-900 text-sm"
                                             title="{{ __('إلغاء') }}">
                                         <span wire:loading.remove wire:target="cancel('{{ $assignment->uuid }}')">{{ __('إلغاء') }}</span>
                                         <span wire:loading wire:target="cancel('{{ $assignment->uuid }}')">...</span>
@@ -181,7 +181,7 @@ class="text-red-600 hover:text-red-800 text-sm"
                                     <p class="text-gray-500 text-sm">{{ __('لا يوجد تكليفات') }}</p>
                                     @can('assignments.create')
                                     <a href="{{ route('assignments.create') }}" wire:navigate
-                                       class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
+                                       class="mt-2 text-blue-600 hover:text-blue-800 active:text-blue-900 text-sm font-medium">
                                         {{ __('إنشاء أول تكليف') }}
                                     </a>
                                     @endcan
@@ -283,7 +283,7 @@ class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
                     <button wire:click="suspend('{{ $assignment->uuid }}')"
                             wire:loading.attr="disabled"
                             wire:target="suspend('{{ $assignment->uuid }}')"
-                            class="py-2 text-amber-600 hover:text-amber-800 text-sm font-medium"
+                            class="py-2 text-amber-600 hover:text-amber-800 active:text-amber-900 text-sm font-medium"
                             title="{{ __('تعليق') }}">
                         <span wire:loading.remove wire:target="suspend('{{ $assignment->uuid }}')">{{ __('تعليق') }}</span>
                         <span wire:loading wire:target="suspend('{{ $assignment->uuid }}')">...</span>
@@ -293,7 +293,7 @@ class="py-2 text-amber-600 hover:text-amber-800 text-sm font-medium"
                     <button wire:click="activate('{{ $assignment->uuid }}')"
                             wire:loading.attr="disabled"
                             wire:target="activate('{{ $assignment->uuid }}')"
-                            class="py-2 text-green-600 hover:text-green-800 text-sm font-medium"
+                            class="py-2 text-green-600 hover:text-green-800 active:text-green-900 text-sm font-medium"
                             title="{{ __('تنشيط') }}">
                         <span wire:loading.remove wire:target="activate('{{ $assignment->uuid }}')">{{ __('تنشيط') }}</span>
                         <span wire:loading wire:target="activate('{{ $assignment->uuid }}')">...</span>
@@ -304,7 +304,7 @@ class="py-2 text-green-600 hover:text-green-800 text-sm font-medium"
                             wire:loading.attr="disabled"
                             wire:target="cancel('{{ $assignment->uuid }}')"
                             wire:confirm="{{ __('هل أنت متأكد من إلغاء هذا التكليف؟') }}"
-                            class="py-2 text-red-600 hover:text-red-800 text-sm font-medium"
+                            class="py-2 text-red-600 hover:text-red-800 active:text-red-900 text-sm font-medium"
                             title="{{ __('إلغاء') }}">
                         <span wire:loading.remove wire:target="cancel('{{ $assignment->uuid }}')">{{ __('إلغاء') }}</span>
                         <span wire:loading wire:target="cancel('{{ $assignment->uuid }}')">...</span>
@@ -322,7 +322,7 @@ class="py-2 text-red-600 hover:text-red-800 text-sm font-medium"
                     <p class="text-gray-500 text-sm">{{ __('لا يوجد تكليفات') }}</p>
                     @can('assignments.create')
                     <a href="{{ route('assignments.create') }}" wire:navigate
-                       class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">
+                       class="mt-2 text-blue-600 hover:text-blue-800 active:text-blue-900 text-sm font-medium">
                         {{ __('إنشاء أول تكليف') }}
                     </a>
                     @endcan

resources/views/livewire/enrollments/enrollment-list.blade.php

@@ -137,7 +137,12 @@ class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
                                      @keydown.escape.window="showCancel = false">
                                     <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-4"
                                          @click.outside="showCancel = false">
-                                        <h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('تأكيد إلغاء التسجيل') }}</h3>
+                                        <div class="flex items-center justify-between mb-4">
+                                            <h3 class="text-lg font-bold text-gray-800">{{ __('تأكيد إلغاء التسجيل') }}</h3>
+                                            <button @click="showCancel = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
+                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                                            </button>
+                                        </div>
                                         <p class="text-sm text-gray-600 mb-4">
                                             {{ __('هل أنت متأكد من إلغاء تسجيل') }}
                                             <strong>{{ $enrollment->participant?->person?->name_ar }}</strong>؟
@@ -148,11 +153,11 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focu
                                                   placeholder="{{ __('سبب الإلغاء (مطلوب)...') }}"></textarea>
                                         <div class="flex items-center justify-end gap-3">
                                             <button @click="showCancel = false"
-                                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg">
+                                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
                                                 {{ __('تراجع') }}
                                             </button>
                                             <button @click="if(reason.trim()) { $wire.cancelEnrollment({{ $enrollment->id }}, reason); showCancel = false; }"
-                                                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
+                                                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 active:bg-red-800 disabled:opacity-50"
                                                     :disabled="!reason.trim()">
                                                 <span wire:loading.remove wire:target="cancelEnrollment">{{ __('تأكيد الإلغاء') }}</span>
                                                 <span wire:loading wire:target="cancelEnrollment">{{ __('جارٍ الإلغاء...') }}</span>
@@ -265,7 +270,12 @@ class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
                      @keydown.escape.window="showCancel = false">
                     <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-4"
                          @click.outside="showCancel = false">
-                        <h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('تأكيد إلغاء التسجيل') }}</h3>
+                        <div class="flex items-center justify-between mb-4">
+                            <h3 class="text-lg font-bold text-gray-800">{{ __('تأكيد إلغاء التسجيل') }}</h3>
+                            <button @click="showCancel = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                            </button>
+                        </div>
                         <p class="text-sm text-gray-600 mb-4">
                             {{ __('هل أنت متأكد من إلغاء تسجيل') }}
                             <strong>{{ $enrollment->participant?->person?->name_ar }}</strong>؟
@@ -276,11 +286,11 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focu
                                   placeholder="{{ __('سبب الإلغاء (مطلوب)...') }}"></textarea>
                         <div class="flex items-center justify-end gap-3">
                             <button @click="showCancel = false"
-                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg">
+                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
                                 {{ __('تراجع') }}
                             </button>
                             <button @click="if(reason.trim()) { $wire.cancelEnrollment({{ $enrollment->id }}, reason); showCancel = false; }"
-                                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
+                                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 active:bg-red-800 disabled:opacity-50"
                                     :disabled="!reason.trim()">
                                 <span wire:loading.remove wire:target="cancelEnrollment">{{ __('تأكيد الإلغاء') }}</span>
                                 <span wire:loading wire:target="cancelEnrollment">{{ __('جارٍ الإلغاء...') }}</span>

resources/views/livewire/enrollments/waitlist-manager.blade.php

@@ -108,7 +108,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
                                 <button wire:click="promote({{ $enrollment->id }})"
                                         wire:loading.attr="disabled"
                                         wire:target="promote({{ $enrollment->id }})"
-                                        class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
+                                        class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded-lg hover:bg-green-700 active:bg-green-800 disabled:opacity-50"
                                         title="{{ __('ترقية إلى معلق') }}">
                                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
                                     <span wire:loading.remove wire:target="promote({{ $enrollment->id }})">{{ __('ترقية') }}</span>
@@ -118,7 +118,7 @@ class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium bg-green-6
 
                                 @can('enrollments.cancel')
                                 <button @click="showCancel = true"
-                                        class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100">
+                                        class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 active:bg-red-200">
                                     <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                     {{ __('إلغاء') }}
                                 </button>
@@ -129,7 +129,12 @@ class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
                                      @keydown.escape.window="showCancel = false">
                                     <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-4"
                                          @click.outside="showCancel = false">
-                                        <h3 class="text-lg font-bold text-gray-800 mb-4">{{ __('تأكيد إلغاء الانتظار') }}</h3>
+                                        <div class="flex items-center justify-between mb-4">
+                                            <h3 class="text-lg font-bold text-gray-800">{{ __('تأكيد إلغاء الانتظار') }}</h3>
+                                            <button @click="showCancel = false" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
+                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                                            </button>
+                                        </div>
                                         <p class="text-sm text-gray-600 mb-4">
                                             {{ __('هل أنت متأكد من إلغاء انتظار') }}
                                             <strong>{{ $enrollment->participant?->person?->name_ar }}</strong>؟
@@ -140,11 +145,11 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focu
                                                   placeholder="{{ __('سبب الإلغاء (مطلوب)...') }}"></textarea>
                                         <div class="flex items-center justify-end gap-3">
                                             <button @click="showCancel = false"
-                                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg">
+                                                    class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-gray-200 rounded-lg">
                                                 {{ __('تراجع') }}
                                             </button>
                                             <button @click="if(reason.trim()) { $wire.cancel({{ $enrollment->id }}, reason); showCancel = false; }"
-                                                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50"
+                                                    class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 active:bg-red-800 disabled:opacity-50"
                                                     :disabled="!reason.trim()">
                                                 <span wire:loading.remove wire:target="cancel">{{ __('تأكيد الإلغاء') }}</span>
                                                 <span wire:loading wire:target="cancel">{{ __('جارٍ الإلغاء...') }}</span>

resources/views/livewire/evaluations/evaluation-criteria-list.blade.php

@@ -8,7 +8,7 @@
         <button
             type="button"
             wire:click="openForm"
-            class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
+            class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors">
             <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>
             {{ __('معيار جديد') }}
         </button>
@@ -32,9 +32,14 @@ class="w-full max-w-sm rounded-lg border-gray-300 shadow-sm focus:border-blue-50
     <!-- Form Modal -->
     @if($showForm)
         <div class="mb-6 bg-white border border-gray-200 rounded-lg p-6">
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-bold text-gray-800">
                     {{ $editingId ? __('تعديل المعيار') : __('إضافة معيار جديد') }}
                 </h3>
+                <button wire:click="closeForm" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
 
             <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                 <div class="sm:col-span-2 lg:col-span-1">
@@ -85,12 +90,12 @@ class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
 
             <div class="mt-4 flex items-center gap-3">
                 <button type="button" wire:click="save" wire:loading.attr="disabled" wire:target="save"
-                        class="px-5 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:bg-blue-400 transition-colors">
+                        class="px-5 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 disabled:bg-blue-400 transition-colors">
                     <span wire:loading.remove wire:target="save">{{ __('حفظ') }}</span>
                     <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                 </button>
                 <button type="button" wire:click="closeForm"
-                        class="px-5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
+                        class="px-5 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-200 transition-colors">
                     {{ __('إلغاء') }}
                 </button>
             </div>
@@ -144,13 +149,13 @@ class="relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full bo
                                 <td class="px-4 py-3 whitespace-nowrap">
                                     <div class="flex items-center gap-2">
                                         <button type="button" wire:click="openForm({{ $criterion->id }})"
-                                                class="text-blue-600 hover:text-blue-800 text-xs font-medium">
+                                                class="text-blue-600 hover:text-blue-800 active:text-blue-900 text-xs font-medium">
                                             {{ __('تعديل') }}
                                         </button>
                                         <button type="button"
                                                 wire:click="delete({{ $criterion->id }})"
                                                 wire:confirm="{{ __('هل أنت متأكد من حذف هذا المعيار؟') }}"
-                                                class="text-red-600 hover:text-red-800 text-xs font-medium">
+                                                class="text-red-600 hover:text-red-800 active:text-red-900 text-xs font-medium">
                                             {{ __('حذف') }}
                                         </button>
                                     </div>

resources/views/livewire/global-search.blade.php

@@ -12,12 +12,19 @@ class="w-full sm:w-64 px-4 py-2 ps-10 text-sm border border-gray-300 rounded-lg
 
     <div x-show="open" x-transition
          class="absolute top-full mt-2 w-full sm:w-96 bg-white rounded-xl shadow-xl border border-gray-200 z-50 max-h-96 overflow-y-auto">
+        {{-- Close button for touch --}}
+        <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100 sticky top-0 bg-white z-10">
+            <span class="text-xs font-medium text-gray-500">{{ __('نتائج البحث') }}</span>
+            <button @click="open = false; $wire.set('query', '')" class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="{{ __('إغلاق') }}">
+                <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="M6 18L18 6M6 6l12 12"/></svg>
+            </button>
+        </div>
         @if(empty($results))
             <div class="p-4 text-center text-gray-400 text-sm">{{ __('لا توجد نتائج') }}</div>
         @else
             @foreach($results as $result)
             <button wire:click="selectResult('{{ $result['url'] }}')"
-                    class="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition text-start border-b border-gray-100 last:border-0">
+                    class="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 active:bg-blue-50 transition-colors text-start border-b border-gray-100 last:border-0">
                 <div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                     {{ $result['type'] === 'participant' ? 'bg-blue-100 text-blue-600' :
                        ($result['type'] === 'invoice' ? 'bg-green-100 text-green-600' : 'bg-purple-100 text-purple-600') }}">

resources/views/livewire/invoices/invoice-show.blade.php

@@ -294,7 +294,7 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
                         <button type="button" wire:click="recordPayment"
                                 wire:loading.attr="disabled"
                                 wire:target="recordPayment"
-                                class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed">
+                                class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 active:bg-green-800 active:scale-[0.97] font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-all">
                             <span wire:loading.remove wire:target="recordPayment">{{ __('تسجيل الدفعة') }}</span>
                             <span wire:loading wire:target="recordPayment">
                                 <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
@@ -314,7 +314,7 @@ class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 te
                         wire:loading.attr="disabled"
                         wire:target="cancelInvoice"
                         wire:confirm="{{ __('هل أنت متأكد من إلغاء هذه الفاتورة؟') }}"
-                        class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-red-50 text-red-600 border border-red-200 rounded-lg hover:bg-red-100 font-medium text-sm disabled:opacity-50">
+                        class="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-red-50 text-red-600 border border-red-200 rounded-lg hover:bg-red-100 active:bg-red-200 active:scale-[0.97] font-medium text-sm disabled:opacity-50 transition-all">
                     <span wire:loading.remove wire:target="cancelInvoice">{{ __('إلغاء الفاتورة') }}</span>
                     <span wire:loading wire:target="cancelInvoice">{{ __('جارٍ الإلغاء...') }}</span>
                 </button>

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

@@ -12,9 +12,14 @@
     @if($showModal)
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" wire:click.self="$set('showModal', false)">
         <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-4 sm:p-6">
-            <h3 class="text-base sm:text-lg font-bold text-gray-800 mb-4">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-bold text-gray-800">
                     {{ $action === 'freeze' ? __('تجميد المشترك') : __('إلغاء تجميد المشترك') }}
                 </h3>
+                <button wire:click="$set('showModal', false)" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
             <p class="text-sm text-gray-600 mb-4">
                 {{ $action === 'freeze'
                     ? __('سيتم تعليق جميع الأنشطة للمشترك. يمكن إلغاء التجميد لاحقاً.')
@@ -28,11 +33,11 @@
                 @error('reason') <p class="text-xs text-red-500 mt-1">{{ $message }}</p> @enderror
             </div>
             <div class="flex flex-col-reverse sm:flex-row gap-3 sm:justify-end">
-                <button wire:click="$set('showModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800">
+                <button wire:click="$set('showModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 active:bg-gray-200 rounded-lg">
                     {{ __('إلغاء') }}
                 </button>
                 <button wire:click="confirm" wire:loading.attr="disabled"
-                        class="w-full sm:w-auto px-4 py-2.5 text-sm text-white rounded-lg {{ $action === 'freeze' ? 'bg-blue-600 hover:bg-blue-700' : 'bg-green-600 hover:bg-green-700' }} disabled:opacity-50">
+                        class="w-full sm:w-auto px-4 py-2.5 text-sm text-white rounded-lg {{ $action === 'freeze' ? 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800' : 'bg-green-600 hover:bg-green-700 active:bg-green-800' }} disabled:opacity-50">
                     <span wire:loading.remove wire:target="confirm">{{ __('تأكيد') }}</span>
                     <span wire:loading wire:target="confirm">{{ __('جارٍ...') }}</span>
                 </button>

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

@@ -685,9 +685,14 @@ class="px-3 py-1.5 text-xs font-medium bg-{{ $transColor }}-50 text-{{ $transCol
     <div class="fixed inset-0 z-50 flex items-center justify-center" x-data>
         <div class="fixed inset-0 bg-black/50" wire:click="closeStatusModal"></div>
         <div class="relative bg-white rounded-xl shadow-xl w-full max-w-md mx-4 p-6">
-            <h3 class="text-lg font-semibold text-gray-800 mb-4">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-bold text-gray-800">
                     {{ __('تغيير الحالة إلى') }}: {{ __($statusLabels[$newStatus] ?? $newStatus) }}
                 </h3>
+                <button wire:click="closeStatusModal" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
 
             <form wire:submit="changeStatus">
                 <div class="mb-4">
@@ -700,13 +705,13 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:rin
 
                 <div class="flex items-center justify-end gap-3">
                     <button type="button" wire:click="closeStatusModal"
-                            class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm">
+                            class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 active:bg-gray-200 text-sm">
                         {{ __('إلغاء') }}
                     </button>
                     <button type="submit"
                             wire:loading.attr="disabled"
                             wire:target="changeStatus"
-                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium">
+                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 disabled:opacity-50 text-sm font-medium">
                         <span wire:loading.remove wire:target="changeStatus">{{ __('تأكيد') }}</span>
                         <span wire:loading wire:target="changeStatus">{{ __('جارٍ التنفيذ...') }}</span>
                     </button>

resources/views/livewire/training/reschedule-session.blade.php

 <div>
     @if($session->status === 'scheduled')
-    <button wire:click="open" class="px-3 py-2.5 text-xs bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200">
+    <button wire:click="open" class="px-3 py-2.5 text-xs bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 active:bg-yellow-300 transition-colors">
         {{ __('إعادة جدولة') }}
     </button>
     @endif
@@ -8,7 +8,12 @@
     @if($showModal)
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" wire:click.self="$set('showModal', false)">
         <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-4 sm:p-6">
-            <h3 class="text-base sm:text-lg font-bold text-gray-800 mb-4">{{ __('إعادة جدولة الحصة') }}</h3>
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-bold text-gray-800">{{ __('إعادة جدولة الحصة') }}</h3>
+                <button wire:click="$set('showModal', false)" class="flex items-center justify-center w-8 h-8 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 active:bg-gray-200 transition-colors" aria-label="إغلاق">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
+                </button>
+            </div>
 
             <div class="space-y-4">
                 <div>
@@ -39,11 +44,11 @@
             </div>
 
             <div class="flex flex-col-reverse sm:flex-row gap-2 sm:gap-2 sm:justify-end mt-6">
-                <button wire:click="$set('showModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 rounded-lg hover:bg-gray-100">
+                <button wire:click="$set('showModal', false)" class="w-full sm:w-auto px-4 py-2.5 text-sm text-gray-600 hover:text-gray-800 rounded-lg hover:bg-gray-100 active:bg-gray-200 transition-colors">
                     {{ __('إلغاء') }}
                 </button>
                 <button wire:click="reschedule" wire:loading.attr="disabled"
-                        class="w-full sm:w-auto px-4 py-2.5 text-sm text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 disabled:opacity-50">
+                        class="w-full sm:w-auto px-4 py-2.5 text-sm text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 active:bg-yellow-800 disabled:opacity-50 transition-colors">
                     <span wire:loading.remove wire:target="reschedule">{{ __('تأكيد') }}</span>
                     <span wire:loading wire:target="reschedule">{{ __('جارٍ...') }}</span>
                 </button>