# Unified Dashboard Theme (Archived Documentation)

This README has been relocated from `assets/css/THEME_README.md` to `assets/docs/` as part of cleanup.
The original Arabic documentation is preserved below unchanged.

---

# نظام التصميم الموحد - Unified Dashboard Theme

## نظرة عامة
تم دمج تصميم حديث وموحد لجميع لوحات التحكم في النظام، بما في ذلك:
- لوحة التحكم الرئيسية للمسؤولين
- لوحات تحكم الشركات الفرعية (Perfex SAAS)
- لوحات تحكم العملاء العاديين

## الملفات المحدّثة

### 1. الملفات الرئيسية
- `assets/css/style.css` - الملف الرئيسي المُحسّن مع:
  - متغيرات CSS عالمية (CSS Variables)
  - تصميم Header مع Gradient
  - تصميم Sidebar محسّن
  - تأثيرات حركية (Animations)
  - Scrollbar مخصص

### 2. ملف التصميم الموحد
- `assets/css/unified-dashboard.css` - ملف خفيف يحتوي على:
  - تصميم Cards & Panels
  - تصميم Buttons & Forms
  - تصميم Tables & Dropdowns
  - Badges & Labels
  - Alerts & Modals
  - Utility Classes

### 3. ملفات Perfex SAAS
- `modules/perfex_saas/assets/css/admin_modern.css` - للشركات الفرعية
- `modules/perfex_saas/assets/css/client.css` - للعملاء

## المتغيرات العالمية (CSS Variables)

```css
:root {
	/* الألوان الأساسية */
	--tgw-primary: #41dbf2;
	--tgw-primary-hover: #2ab8d1;
	--tgw-blue: #0065F8;
	--tgw-cyan: #00CAFF;
    
	/* Gradient */
	--tgw-gradient: linear-gradient(135deg, #41dbf2, #0065F8, #4300FF);
    
	/* الخلفيات */
	--tgw-bg-primary: #FFFFFF;
	--tgw-bg-secondary: #F8FAFC;
    
	/* الظلال */
	--tgw-shadow-md: 0 4px 12px -1px rgba(65, 219, 242, 0.1);
	--tgw-shadow-cyber: 0 0 30px rgba(65, 219, 242, 0.3);
    
	/* الحواف */
	--tgw-radius-md: 0.75rem;
	--tgw-radius-lg: 1rem;
    
	/* التحولات */
	--tgw-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

## المميزات الرئيسية

### ⚡ الأداء
- CSS محسّن وخفيف الوزن
- استخدام متغيرات CSS لتقليل التكرار
- تحميل سريع وسلس على جميع الأجهزة

### 🎨 التصميم
- نظام ألوان موحد عبر جميع اللوحات
- Gradient جذاب ومميز
- تأثيرات Hover سلسة
- Animations خفيفة وسريعة

### 📱 الاستجابة
- تصميم متجاوب على جميع الأحجام
- تحسينات خاصة للهواتف المحمولة
- Media Queries محسّنة

### ♿ إمكانية الوصول
- ألوان متباينة للقراءة السهلة
- تأثيرات Focus واضحة
- دعم Reduced Motion

## كيفية الاستخدام

### 1. للتطبيق على صفحة معينة

أضف `class="modern-theme"` إلى عنصر `<body>`:

```html
<body class="modern-theme">
	<!-- محتوى الصفحة -->
</body>
```

### 2. لاستخدام الأزرار المحسّنة

```html
<button class="btn btn-primary">زر رئيسي</button>
<button class="btn btn-success">زر نجاح</button>
```

### 3. لاستخدام البطاقات المحسّنة

```html
<div class="panel">
	<div class="panel-heading">عنوان البطاقة</div>
	<div class="panel-body">محتوى البطاقة</div>
</div>
```

### 4. لاستخدام Widget Stats

```html
<div class="widget">
	<div class="widget-icon">
		<i class="fa fa-users"></i>
	</div>
	<h3>250</h3>
	<p>إجمالي المستخدمين</p>
</div>
```

## التأثيرات الحركية (Animations)

### 1. Pulse Glow
```css
animation: pulseGlow 2s ease-in-out infinite;
```

### 2. Icon Pulse
```css
animation: iconPulse 2s ease-in-out infinite;
```

### 3. Badge Pulse
```css
animation: badgePulse 2s ease-in-out infinite;
```

## فئات الأدوات (Utility Classes)

### Text Gradient
```html
<h1 class="text-gradient">نص بـ Gradient</h1>
```

### Shadow Glow
```html
<div class="shadow-glow">عنصر مع ظل مضيء</div>
```

### Border Gradient
```html
<div class="border-gradient">حدود بـ Gradient</div>
```

## الوضع الداكن (Dark Mode)

الوضع الداكن مدعوم عبر ملف `theme-dark.css` بإضافة:
```html
<body class="modern-theme dark-mode">
```

## التوافق مع المتصفحات

✅ Chrome/Edge (آخر نسختين)
✅ Firefox (آخر نسختين)
✅ Safari (آخر نسختين)
✅ Mobile Browsers

## التحديثات المستقبلية

- [ ] إضافة المزيد من themes
- [ ] تحسين الوضع الداكن
- [ ] إضافة animations إضافية
- [ ] دعم RTL محسّن

## الدعم الفني

للاستفسارات:
- راجع ملفات التوثيق في مجلد docs
- تواصل مع فريق الدعم

---

**تم التطوير بواسطة:** The Global Webs  
**التاريخ:** نوفمبر 2025  
**الإصدار:** 1.0.0

