أريد تعديل تصميم واجهة النظام (الـ Frontend) بحيث تصبح ألوانه وهوية التصميم قريبة من تصميم نظام Q-Samaya القديم (الموف/الوردي) مع إضافة شعار Q-Samaya في أعلى القائمة الجانبية.

########################################
# 1) إعداد ألوان الهوية (Theme Colors)
########################################

عدّل ملف تهيئة التصميم (Tailwind أو CSS variables أو theme system المستخدم حالياً) ليصبح لدينا هوية ألوان موحّدة على مستوى النظام:

اقترح الألوان التالية (يمكن تعديل القيمة قليلاً إذا لزم):

- Primary main (لون رئيسي للأزرار والعناوين البارزة):
  - HEX: #D93E8D   (وردي غامق قريب من الشعار)
- Primary gradient start:
  - HEX: #D93E8D
- Primary gradient end:
  - HEX: #8B5CF6   (موف بنفسجي)
- Secondary:
  - HEX: #F472B6   (وردي فاتح)
- Background:
  - HEX: #F9FAFB
- Sidebar background:
  - HEX: #FFFFFF مع تدرجات/دوائر خفيفة إذا أحببت
- Text primary:
  - #111827
- Text muted:
  - #6B7280

المطلوب:

1) تحديث tailwind.config أو ملف theme بحيث:
   - `primary` و `primary-500` و `primary-600` تستخدم اللون #D93E8D
   - إن وجد gradient للأزرار أو الـ header، استخدم التدرج:
     - من #D93E8D إلى #8B5CF6

2) تحديث المكونات التالية لاستخدام الـ primary الجديد:
   - الأزرار الرئيسية (CTA)
   - زر "تطبيق" في لوحة التحكم
   - البادجات النشطة (مثل عدد الطلبات، إلخ)
   - خلفية العنوان في أعلى السايدبار إن وجدت

3) التأكد أن الكروت في لوحة التحكم (مبيعات اليوم، حجوزات اليوم، الطلبات الملغاة، العملاء الجدد…) تستخدم ألوان خلفية محايدة مع أيقونات بلون primary/secondary وليس الأزرق القديم.

########################################
# 2) إضافة شعار Q-Samaya في أعلى القائمة الجانبية
########################################

سأرفع شعار الشركة (مثلاً باسم الملف):
- `client/src/assets/q-samaya-logo.png`  أو `q-samaya-logo.svg`

المطلوب:

1) في مكوّن الـ Layout الرئيسي أو الـ Sidebar (عادةً في:
   - `client/src/components/layout/Sidebar.tsx` أو ما يعادلها)
   أضف منطقة Brand في أعلى القائمة الجانبية تحتوي على:

   - صورة الشعار في المنتصف
   - تحتها اسم النظام: `Q-Samaya`
   - سطر فرعي: `نظام إدارة صالون`

   مثال JSX (عدّل حسب بنية المشروع):

   ```tsx
   import LogoQS from "@/assets/q-samaya-logo.png";

   function SidebarHeader() {
     return (
       <div className="flex flex-col items-center justify-center py-6 gap-2">
         <div className="w-16 h-16 rounded-full overflow-hidden bg-white shadow">
           <img src={LogoQS} alt="Q-Samaya" className="w-full h-full object-contain" />
         </div>
         <div className="text-center">
           <div className="font-bold text-lg text-primary">Q-Samaya</div>
           <div className="text-xs text-gray-500">نظام إدارة صالون</div>
         </div>
       </div>
     );
   }
