Upload folder using huggingface_hub

README.md

@@ -0,0 +1,243 @@
+# 🚀 TaskFlow Pro v2.0
+
+<div align="center">
+
+![TaskFlow Pro Logo](assets/images/logo.svg)
+
+**منصة إدارة المشاريع الاحترافية - مبنية بـ Vanilla JavaScript**
+
+*بناء مشاريعك بذكاء - بدون إطار عمل، بدون تعقيد*
+
+[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)
+[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)
+[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+[![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)
+
+*دعم كامل للغة العربية مع تصميم RTL*
+
+</div>
+
+---
+
+## 📖 نظرة عامة على المشروع
+
+### ما هو TaskFlow Pro؟
+
+**TaskFlow Pro** هو تطبيق ويب احترافي لإدارة المشاريع والمهام، تم بناؤه بالكامل باستخدام تقنيات الويب الأساسية (Vanilla HTML, CSS, JavaScript) دون الاعتماد على أي إطار عمل خارجي. يهدف التطبيق إلى توفير تجربة إدارة مشاريع سلسة وفعالة للفرق والأفراد الناطقين باللغة العربية.
+
+### فلسفة المشروع
+
+- ✅ **بدون إطار عمل** - 100% Vanilla JavaScript
+- ✅ **سريع وخفيف** - لا تحميل لمكتبة ضخمة
+- ✅ **سهل الفهم** - كود نظيف وموثق
+- ✅ **RTL مدمج** - دعم كامل للغة العربية
+- ✅ **محلي بالكامل** - بياناتك تبقى على جهازك
+
+---
+
+## ✨ المميزات الرئيسية
+
+### 🎯 لوحة التحكم (Dashboard)
+نظرة شاملة على جميع مشاريعك ومهامك مع إحصائيات تفصيلية ورسوم بيانية.
+
+### 📋 نظام كانبان (Kanban Board)
+نظام سحب وإفلات بديهي لإدارة سير العمل عبر ثلاثة أعمدة: قيد الانتظار، قيد العمل، مكتمل.
+
+### 📅 التقويم الذكي
+عرض تقويمي للمواعيد النهائية مع إمكانية التنقل بين الأشهر.
+
+### 👥 إدارة الفريق
+إضافة أعضاء للفريق ومتابعة إنتاجيتهم وتصنيفهم.
+
+### 📈 التحليلات والتقارير
+رسوم بيانية تفاعلية لتوزيع المهام ومعدل الإنجاز.
+
+### ⚙️ إعدادات شاملة
+تخصيص الثيم والوضع الداكن والإشعارات واللغة.
+
+---
+
+## 🖼️ لقطات الشاشة
+
+### 1. لوحة التحكم الرئيسية
+![Dashboard](assets/screenshots/dashboard-preview.svg)
+
+*عرض شامل للإحصائيات والمشاريع الأخيرة*
+
+### 2. إدارة المهام
+![Tasks](assets/screenshots/tasks-preview.svg)
+
+*قائمة المهام مع الفلاتر والخيارات المتقدمة*
+
+### 3. لوحة كانبان
+![Kanban](assets/screenshots/kanban-preview.svg)
+
+*نظام إدارة المهام بالسحب والإفلات*
+
+### 4. التقويم
+![Calendar](assets/screenshots/calendar-preview.svg)
+
+*عرض شهري للمواعيد والمهام*
+
+### 5. إدارة الفريق
+![Team](assets/screenshots/team-preview.svg)
+
+*أعضاء الفريق وإحصائياتهم*
+
+### 6. التحليلات
+![Analytics](assets/screenshots/analytics-preview.svg)
+
+*رسوم بيانية تفاعلية*
+
+### 7. الوضع الداكن
+![Dark Mode](assets/screenshots/dark-mode-preview.svg)
+
+*دعم كامل للثيم الداكن*
+
+### 8. التوافق مع الجوال
+![Mobile](assets/screenshots/mobile-preview.svg)
+
+*تصميم متجاوب يعمل على جميع الأجهزة*
+
+---
+
+## 🎬 فيديو تعريفي
+
+### وصف الفيديو
+
+```
+المدة: 60 ثانية
+اللغة: عربي
+القرار: 1080p
+```
+
+### مشاهد الفيديو
+
+| المدة | المشهد | الوصف |
+|-------|--------|-------|
+| 0:00-0:05 | مقدمة | شعار TaskFlow Pro + عنوان |
+| 0:05-0:15 | جولة لوحة التحكم | عرض الإحصائيات والأنشطة |
+| 0:15-0:25 | عرض كانبان | سحب وإفلات المهام |
+| 0:25-0:35 | إضافة مهمة | فتح النموذج وملؤه |
+| 0:35-0:45 | التقويم | عرض المواعيد والمهام |
+| 0:45-0:55 | الفريق | عرض أعضاء الفريق |
+| 0:55-1:00 | خاتمة | "مبني بـ Vanilla JavaScript" |
+
+### فيديو الإنتاج
+تفاصيل إنتاج الفيديو متاحة في: [docs/video-production.md](docs/video-production.md)
+
+---
+
+## 🚀 بدء الاستخدام
+
+### الطريقة 1: فتح الملف مباشرة
+
+```bash
+cd taskflow-pro
+# افتح index.html في المتصفح
+```
+
+### الطريقة 2: باستخدام خادم محلي
+
+```bash
+# باستخدام Python
+python -m http.server 8000
+
+# أو باستخدام Node.js
+npx serve taskflow-pro
+```
+
+---
+
+## 📁 هيكل المشروع
+
+```
+taskflow-pro/
+│
+├── 📄 index.html                 # الصفحة الرئيسية للتطبيق
+├── 📄 styles.css                 # جميع تنسيقات CSS
+├── 📄 script.js                  # منطق التطبيق والتفاعلات
+├── 📄 README.md                  # هذا الملف
+├── 📄 LICENSE                    # رخصة MIT
+│
+├── 📁 assets/
+│   ├── 📁 images/
+│   │   └── logo.svg              # شعار التطبيق
+│   │   └── video-thumbnail.svg   # صورة الفيديو المصغرة
+│   │
+│   └── 📁 screenshots/
+│       ├── dashboard-preview.svg
+│       ├── tasks-preview.svg
+│       ├── kanban-preview.svg
+│       ├── calendar-preview.svg
+│       ├── team-preview.svg
+│       ├── analytics-preview.svg
+│       ├── dark-mode-preview.svg
+│       └── mobile-preview.svg
+│
+└── 📁 docs/
+    └── video-production.md       # تفاصيل إنتاج الفيديو
+```
+
+---
+
+## 🤝 المساهمة في المشروع
+
+نرحب بمساهماتكم! للمشاركة:
+
+```bash
+# 1. Fork المشروع
+# 2. إنشاء فرع جديد
+git checkout -b feature/amazing-feature
+
+# 3. إجراء التغييرات وCommit
+git commit -m 'إضافة ميزة رائعة'
+
+# 4. Push وفتح Pull Request
+```
+
+---
+
+## ❓ الأسئلة الشائعة
+
+**س: هل التطبيق يحتاج اتصال بالإنترنت؟**
+ج: لا، يعمل محلياً. تحتاج الإنترنت فقط لتحميل الخطوط والأيقونات.
+
+**س: هل بياناتي آمنة؟**
+ج: نعم، تُخزن محلياً في LocalStorage.
+
+**س: هل يدعم اللغة الإنجليزية؟**
+ج: حالياً عربي فقط، الإنجليزية قادمة قريباً.
+
+---
+
+## 📄 الرخصة
+
+هذا المشروع مرخص تحت رخصة MIT - انظر ملف [LICENSE](LICENSE) للتفاصيل.
+
+---
+
+## 📞 تواصل معنا
+
+<div align="center">
+
+[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/MiniMax-Agent/taskflow-pro)
+[![Email](https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:support@minimax.dev)
+
+---
+
+**صُنع بـ ❤️ باستخدام Vanilla JavaScript**
+
+*TaskFlow Pro - إدارة مشاريعك بذكاء*
+
+</div>
+
+---
+
+<div align="left">
+
+*آخر تحديث: 15 يناير 2025*
+*الإصدار: 2.0.0*
+*اللغة: العربية (RTL) + الإنجليزية*
+
+</div>

docs/video-production.md

@@ -0,0 +1,328 @@
+# 🎬 TaskFlow Pro - فيديو تعريفي احترافي
+
+## وثيقة إنتاج الفيديو
+
+### معلومات المشروع
+
+| العنصر | التفاصيل |
+|--------|----------|
+| **اسم المشروع** | TaskFlow Pro v2.0 |
+| **نوع الفيديو** | ترويجي تعريفي |
+| **المدة المستهدفة** | 45-60 ثانية |
+| **اللغة** | عربي |
+| **الجمهور المستهدف** | مدراء المشاريع، الفرق التقنية، رواد الأعمال |
+
+---
+
+## 📝 السيناريو التفصيلي
+
+### المقدمة (5 ثوانٍ)
+```
+[0:00 - 0:05]
+
+🎬 المشهد: شاشة سوداء تتلاشى تدريجياً
+
+🎵 موسيقى: موسيقى هادئة وعصرية (Electronic Ambient)
+
+📝 النص على الشاشة:
+    ┌─────────────────────────────────┐
+    │                                 │
+    │     🚀 TaskFlow Pro v2.0       │
+    │                                 │
+    │   إدارة المشاريع الاحترافية    │
+    │                                 │
+    │     100% Vanilla JS             │
+    │                                 │
+    └─────────────────────────────────┘
+
+🎨 التصميم: خط Cairo بخط عريض، تدرج لوني من البنفسجي إلى الأزرق الداكن
+```
+
+### جولة لوحة التحكم (15 ثانية)
+```
+[0:05 - 0:20]
+
+🎬 المشهد 1: انتقال سلس (Fade) إلى لوحة التحكم
+
+📹 الكاميرا: تتحرك ببطء من الأعلى للأسفل
+
+🎨 العناصر المرئية:
+    ├── 📊 4 بطاقات إحصائيات متحركة
+    │   ├── إجمالي المشاريع: 3
+    │   ├── إجمالي المهام: 6
+    │   ├── المهام المكتملة: 2
+    │   └── أعضاء الفريق: 5
+    │
+    ├── 📁 المشاريع الأخيرة (اليسار)
+    │   └── أشرطة تقدم متحركة
+    │
+    └── 🔔 النشاط الأخير (اليمين)
+        └── قائمة الأنشطة الحديثة
+
+🎵 الموسيقى: تتحول لموسيقى أكثر حيوية
+
+📝 النص على الشاشة:
+    "نظرة شاملة على مشاريعك"
+```
+
+### عرض نظام كانبان (15 ثانية)
+```
+[0:20 - 0:35]
+
+🎬 المشهد 2: انتقال (Slide Left) إلى لوحة كانبان
+
+📹 الكاميرا: تقريب على نظام السحب والإفلات
+
+🎨 العناصر المرئية:
+    ├── 📋 4 أعمدة كانبان
+    │   ├── 📝 للعمل (1 مهمة)
+    │   ├── 🔄 قيد العمل (2 مهام)
+    │   ├── 👁️ مراجعة (1 مهمة)
+    │   └── ✅ مكتمل (2 مهمة)
+    │
+    └── 🎯 بطاقات المهام
+        ├── عرض: العنوان، الأولوية، المسند إليه
+        └── تأثير: ظل عند التحويم
+
+🎵 الموسيقى: ذروة الموسيقى
+
+🎬 الحركة: 
+    └── مؤشر الماوس يسحب بطاقة من "للعمل" إلى "قيد العمل"
+    └── تأثير انتقال سلس مع رسالة "تم تحديث المهمة"
+
+📝 النص على الشاشة:
+    "إدارة مهامك بسحب وإفلات بسيط"
+```
+
+### إضافة مهمة جديدة (10 ثوانٍ)
+```
+[0:35 - 0:45]
+
+🎬 المشهد 3: نقر على زر "إضافة مهمة"
+
+📹 الكاميرا: انتقال سلس للنموذج المنبثق (Modal)
+
+🎨 العناصر المرئية:
+    ├── 📝 نموذج إضافة المهمة
+    │   ├── حقل العنوان
+    │   ├── حقل الوصف
+    │   ├── قائمة الأولوية (عالية/متوسطة/منخفضة)
+    │   ├── قائمة الحالة
+    │   ├── حقل المسند إليه
+    │   └── حقل تاريخ الاستحقاق
+    │
+    └── 🎯 إشعارات Toast
+        └── "تم إضافة المهمة بنجاح"
+
+🎵 الموسيقى: نغمة نجاح قصيرة
+
+🎬 الحركة:
+    └── ملء الحقول بسرعة
+    └── النقر على "حفظ"
+    └── إغلاق النموذج
+    └── ظهور المهمة في العمود المناسب
+```
+
+### التجاوب مع الجوال (5 ثوانٍ)
+```
+[0:45 - 0:50]
+
+🎬 المشهد 4: تقليص نافذة المتصفح
+
+📹 الكاميرا: تصغير تدريجي
+
+🎨 العناصر المرئية:
+    ├── 📱 القائمة الجانبية تتحول لزر همبرغر
+    │   └── القائمة تنزلق من اليسار
+    │
+    └── 📐 إعادة ترتيب العناصر
+        └── بطاقات الإحصائ��ات تتراص في عمود واحد
+        └── لوحة كانبان تصبح أفقية
+
+📝 النص على الشاشة:
+    "يعمل بسلاسة على جميع الأجهزة"
+```
+
+### الخاتمة (5 ثوانٍ)
+```
+[0:50 - 0:55]
+
+🎬 المشهد: شاشة ختامية
+
+🎨 التصميم:
+    ├── 🖥️ أيقونة TaskFlow Pro الكبيرة
+    │   └── شبكة العقد المتصلة
+    │       └── علامة الصح في المنتصف
+    │
+    ├── 📝 النص:
+    │   ┌─────────────────────────────┐
+    │   │                             │
+    │   │   TaskFlow Pro             │
+    │   │                             │
+    │   │   بني بـ 100% Vanilla JS   │
+    │   │   بدون إطار عمل            │
+    │   │                             │
+    │   │   🔗 جربه الآن             │
+    │   │                             │
+    │   └─────────────────────────────┘
+    │
+    └── 🏷️ الشارات
+        └── HTML5 | CSS3 | JavaScript | MIT License
+
+🎵 الموسيقى: ذروة نهائية ثم تلاشي
+
+📝 رابط الموقع:
+    https://taskflow-pro.demo
+```
+
+---
+
+## 🎨 الدليل البصري
+
+### الألوان المستخدمة
+
+```css
+/* التدرج الرئيسي */
+--primary-gradient: linear-gradient(135deg, #4F46E5, #3730A3);
+
+/* ألوان البطاقات */
+--card-bg: #FFFFFF;
+--card-hover: #F9FAFB;
+
+/* ألوان الأولوية */
+--priority-high: #EF4444;   /* أحمر */
+--priority-medium: #F59E0B; /* برتقالي */
+--priority-low: #10B981;    /* أخضر */
+
+/* ألوان الحالة */
+--status-todo: #6366F1;     /* بنفسجي */
+--status-progress: #3B82F6; /* أزرق */
+--status-review: #F59E0B;   /* برتقالي */
+--status-done: #10B981;     /* أخضر */
+```
+
+### الخطوط
+
+```css
+/* العنوان الرئيسي */
+font-family: 'Cairo', sans-serif;
+font-weight: 700;
+font-size: 2.25rem; /* 36px */
+
+/* العناوين الفرعية */
+font-family: 'Cairo', sans-serif;
+font-weight: 600;
+font-size: 1.25rem; /* 20px */
+
+/* النص العادي */
+font-family: 'Cairo', sans-serif;
+font-weight: 400;
+font-size: 1rem; /* 16px */
+```
+
+---
+
+## 🎵 دليل الموسيقى والمؤثرات الصوتية
+
+### المقاطع الموسيقية (Background Music)
+
+| المقطع | المدة | الوصف | المشهد |
+|--------|-------|-------|--------|
+| **Intro** | 5 ثوانٍ | موسيقى إلكترونية هادئة | المقدمة |
+| **Discovery** | 15 ثانية | موسيقى إيجابية خفيفة | لوحة التحكم |
+| **Action** | 15 ثانية | موسيقى نشطة مع إيقاع | كانبان |
+| **Success** | 10 ثوانٍ | نغمة نجاح مبهجة | إضافة مهمة |
+| **Mobile** | 5 ثوانٍ | موسيقى سريعة خفيفة | التجاوب |
+| **Outro** | 5 ثوانٍ | ذروة نهائية وتلاشي | الخاتمة |
+
+### المؤثرات الصوتية (SFX)
+
+| المؤثر | الوصف | المشهد |
+|--------|-------|--------|
+| **Whoosh** | صوت انتقال سريع | تغيير المشاهد |
+| **Pop** | صوت نقر خفيف | النقر على الأزرار |
+| **Slide** | صوت سحب | السحب والإفلات |
+| **Success Chime** | صوت نجاح | حفظ المهمة |
+| **Notification** | صوت إشعار | ظهور Toast |
+
+---
+
+## 📐 إرشادات الإنتاج
+
+### للمصورين/المصممين
+
+1. **استخدم برنامج تسجيل الشاشة:**
+   - OBS Studio (مجاني)
+   - Camtasia (مدفوع)
+   - ScreenFlow (Mac)
+
+2. **إعدادات التسجيل:**
+   - الدقة: 1920x1080 (Full HD)
+   - معدل الإطارات: 60 fps
+   - الضغط: H.264
+
+3. **المؤثرات البصرية:**
+   - انتقالات: Fade, Slide, Zoom
+   - مدة الانتقالات: 0.3-0.5 ثانية
+   - حركة النص: Typing effect
+
+### للمونتير
+
+1. **البرنامج:**
+   - DaVinci Resolve (مجاني)
+   - Adobe Premiere Pro
+   - Final Cut Pro
+
+2. **التنسيق النهائي:**
+   - MP4
+   - H.264 codec
+   - 1080p, 60fps
+   -_bitrate: 15-20 Mbps
+
+---
+
+## 📋 قائمة التحقق قبل النشر
+
+- [ ] جميع المشاهد مسجلة بجودة عالية
+- [ ] الموسيقى والمؤثرات الصوتية جاهزة
+- [ ] النص واضح ومقروء
+- [ ] الألوان متسقة مع الهوية البصرية
+- [ ] لا توجد أخطاء إملائية
+- [ ] الروابط تعمل بشكل صحيح
+- [ ] الفيديو مُحسّن للويب (حجم صغير)
+- [ ] نسخة احتياطية محفوظة
+
+---
+
+## 🔗 الموارد الإضافية
+
+### أدوات مفيدة
+
+| الأداة | الاستخدام | الرابط |
+|--------|----------|--------|
+| Canva | تصميم الصور المصغرة | canva.com |
+| Figma | تصميم wireframes | figma.com |
+| LottieFiles | رسوم متحركة | lottiefiles.com |
+| Remove.bg | إزالة الخلفية | remove.bg |
+
+### مصادر الموسيقى
+
+| المصدر | النوع | الرابط |
+|--------|-------|--------|
+| Epidemic Sound | موسيقى مدفوعة | epidemicsound.com |
+| Artlist | موسيقى مدفوعة | artlist.io |
+| YouTube Audio Library | مجانية | youtube.com/audiolibrary |
+
+---
+
+## 📞 معلومات التواصل
+
+للاستفسارات حول إنتاج الفيديو:
+
+- **البريد الإلكتروني:** video@taskflow-pro.dev
+- **الموقع:** https://taskflow-pro.dev
+
+---
+
+*آخر تحديث: 15 يناير 2025*
+*الإصدار: 1.0*

index.html

@@ -0,0 +1,1059 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskFlow Pro - إدارة المهام الاحترافية</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📋</text></svg>">
+</head>
+<body>
+    <!-- شاشة التحميل -->
+    <div id="loading-screen" class="loading-screen">
+        <div class="loading-content">
+            <div class="loading-spinner"></div>
+            <h2>TaskFlow Pro</h2>
+            <p>جاري تحميل التطبيق...</p>
+        </div>
+    </div>
+
+    <!-- صفحة تسجيل الدخول -->
+    <div id="login-page" class="login-page">
+        <div class="login-container">
+            <div class="login-header">
+                <div class="logo">
+                    <i class="fas fa-clipboard-check"></i>
+                </div>
+                <h1>TaskFlow Pro</h1>
+                <p>إدارة المهام الاحترافية</p>
+            </div>
+            <form id="login-form" class="login-form">
+                <div class="form-group">
+                    <label for="login-email">البريد الإلكتروني</label>
+                    <input type="email" id="login-email" placeholder="أدخل بريدك الإلكتروني" required>
+                    <i class="fas fa-envelope"></i>
+                </div>
+                <div class="form-group">
+                    <label for="login-password">كلمة المرور</label>
+                    <input type="password" id="login-password" placeholder="أدخل كلمة المرور" required>
+                    <i class="fas fa-lock"></i>
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">
+                    <span>تسجيل الدخول</span>
+                    <i class="fas fa-sign-in-alt"></i>
+                </button>
+                <div class="login-options">
+                    <label class="remember-me">
+                        <input type="checkbox" id="remember-me">
+                        <span>تذكرني</span>
+                    </label>
+                    <a href="#" class="forgot-password">نسيت كلمة المرور؟</a>
+                </div>
+                <div class="divider">
+                    <span>أو</span>
+                </div>
+                <button type="button" class="btn btn-social btn-google" id="google-login">
+                    <i class="fab fa-google"></i>
+                    <span>تسجيل الدخول باستخدام Google</span>
+                </button>
+                <button type="button" class="btn btn-social btn-github" id="github-login">
+                    <i class="fab fa-github"></i>
+                    <span>تسجيل الدخول باستخدام GitHub</span>
+                </button>
+                <p class="signup-link">ليس لديك حساب؟ <a href="#" id="show-register">إنشاء حساب جديد</a></p>
+            </form>
+
+            <!-- نموذج التسجيل -->
+            <form id="register-form" class="login-form hidden">
+                <div class="form-group">
+                    <label for="register-name">الاسم الكامل</label>
+                    <input type="text" id="register-name" placeholder="أدخل اسمك الكامل" required>
+                    <i class="fas fa-user"></i>
+                </div>
+                <div class="form-group">
+                    <label for="register-email">البريد الإلكتروني</label>
+                    <input type="email" id="register-email" placeholder="أدخل بريدك الإلكتروني" required>
+                    <i class="fas fa-envelope"></i>
+                </div>
+                <div class="form-group">
+                    <label for="register-password">كلمة المرور</label>
+                    <input type="password" id="register-password" placeholder="أنشئ كلمة مرور" required>
+                    <i class="fas fa-lock"></i>
+                </div>
+                <div class="form-group">
+                    <label for="register-confirm">تأكيد كلمة المرور</label>
+                    <input type="password" id="register-confirm" placeholder="أعد إدخال كلمة المرور" required>
+                    <i class="fas fa-lock"></i>
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">
+                    <span>إنشاء حساب</span>
+                    <i class="fas fa-user-plus"></i>
+                </button>
+                <p class="signup-link">لديك حساب بالفعل؟ <a href="#" id="show-login">تسجيل الدخول</a></p>
+            </form>
+        </div>
+    </div>
+
+    <!-- التطبيق الرئيسي -->
+    <div id="main-app" class="main-app hidden">
+        <!-- الشريط الجانبي -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <div class="logo">
+                    <i class="fas fa-clipboard-check"></i>
+                    <span>TaskFlow Pro</span>
+                </div>
+                <button class="sidebar-toggle" id="sidebar-toggle">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
+            <nav class="sidebar-nav">
+                <ul>
+                    <li class="active" data-view="dashboard">
+                        <a href="#dashboard">
+                            <i class="fas fa-home"></i>
+                            <span>لوحة التحكم</span>
+                        </a>
+                    </li>
+                    <li data-view="tasks">
+                        <a href="#tasks">
+                            <i class="fas fa-tasks"></i>
+                            <span>المهام</span>
+                        </a>
+                    </li>
+                    <li data-view="projects">
+                        <a href="#projects">
+                            <i class="fas fa-project-diagram"></i>
+                            <span>المشاريع</span>
+                        </a>
+                    </li>
+                    <li data-view="kanban">
+                        <a href="#kanban">
+                            <i class="fas fa-columns"></i>
+                            <span>لوحة كانبان</span>
+                        </a>
+                    </li>
+                    <li data-view="calendar">
+                        <a href="#calendar">
+                            <i class="fas fa-calendar-alt"></i>
+                            <span>التقويم</span>
+                        </a>
+                    </li>
+                    <li data-view="team">
+                        <a href="#team">
+                            <i class="fas fa-users"></i>
+                            <span>الفريق</span>
+                        </a>
+                    </li>
+                    <li data-view="analytics">
+                        <a href="#analytics">
+                            <i class="fas fa-chart-pie"></i>
+                            <span>التحليلات</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="sidebar-footer">
+                <ul>
+                    <li data-view="settings">
+                        <a href="#settings">
+                            <i class="fas fa-cog"></i>
+                            <span>الإعدادات</span>
+                        </a>
+                    </li>
+                    <li id="logout-btn">
+                        <a href="#">
+                            <i class="fas fa-sign-out-alt"></i>
+                            <span>تسجيل الخروج</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </aside>
+
+        <!-- المحتوى الرئيسي -->
+        <main class="main-content">
+            <!-- الرأس العلوي -->
+            <header class="main-header">
+                <div class="header-right">
+                    <button class="menu-toggle" id="menu-toggle">
+                        <i class="fas fa-bars"></i>
+                    </button>
+                    <div class="search-box">
+                        <i class="fas fa-search"></i>
+                        <input type="text" placeholder="البحث في المهام والمشاريع..." id="global-search">
+                    </div>
+                </div>
+                <div class="header-left">
+                    <div class="header-actions">
+                        <button class="action-btn" id="quick-add" title="إضافة سريعة">
+                            <i class="fas fa-plus"></i>
+                        </button>
+                        <div class="notifications-dropdown">
+                            <button class="action-btn" id="notifications-btn" title="الإشعارات">
+                                <i class="fas fa-bell"></i>
+                                <span class="badge" id="notification-count">3</span>
+                            </button>
+                            <div class="dropdown-menu notifications-menu" id="notifications-menu">
+                                <div class="dropdown-header">
+                                    <h4>الإشعارات</h4>
+                                    <button class="mark-all-read">تعليم الكل كمقروء</button>
+                                </div>
+                                <div class="notifications-list" id="notifications-list">
+                                    <!-- الإشعارات سيتم إضافتها هنا -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="user-dropdown">
+                            <button class="user-btn" id="user-btn">
+                                <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%234a90d9' width='100' height='100'/><text x='50' y='60' text-anchor='middle' fill='white' font-size='50'>م</text></svg>" alt="المستخدم" class="user-avatar">
+                                <span class="user-name" id="user-name">مستخدم جديد</span>
+                                <i class="fas fa-chevron-down"></i>
+                            </button>
+                            <div class="dropdown-menu user-menu" id="user-menu">
+                                <a href="#" data-action="profile">
+                                    <i class="fas fa-user"></i>
+                                    <span>الملف الشخصي</span>
+                                </a>
+                                <a href="#" data-action="settings">
+                                    <i class="fas fa-cog"></i>
+                                    <span>الإعدادات</span>
+                                </a>
+                                <div class="divider"></div>
+                                <a href="#" data-action="logout">
+                                    <i class="fas fa-sign-out-alt"></i>
+                                    <span>تسجيل الخروج</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <!-- منطقة المحتوى -->
+            <div class="content-area">
+                <!-- لوحة التحكم -->
+                <section id="dashboard-view" class="view active">
+                    <div class="view-header">
+                        <h1>لوحة التحكم</h1>
+                        <div class="view-actions">
+                            <button class="btn btn-primary" id="new-task-btn">
+                                <i class="fas fa-plus"></i>
+                                <span>مهمة جديدة</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="dashboard-stats">
+                        <div class="stat-card">
+                            <div class="stat-icon blue">
+                                <i class="fas fa-tasks"></i>
+                            </div>
+                            <div class="stat-info">
+                                <h3 id="total-tasks">0</h3>
+                                <p>إجمالي المهام</p>
+                            </div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-icon green">
+                                <i class="fas fa-check-circle"></i>
+                            </div>
+                            <div class="stat-info">
+                                <h3 id="completed-tasks">0</h3>
+                                <p>المهام المُنجزة</p>
+                            </div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-icon orange">
+                                <i class="fas fa-clock"></i>
+                            </div>
+                            <div class="stat-info">
+                                <h3 id="pending-tasks">0</h3>
+                                <p>المهام المعلقة</p>
+                            </div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-icon purple">
+                                <i class="fas fa-project-diagram"></i>
+                            </div>
+                            <div class="stat-info">
+                                <h3 id="total-projects">0</h3>
+                                <p>المشاريع النشطة</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="dashboard-content">
+                        <div class="dashboard-main">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3><i class="fas fa-chart-line"></i> تقدم المهام</h3>
+                                </div>
+                                <div class="card-body">
+                                    <div class="progress-chart">
+                                        <div class="progress-bar-container">
+                                            <div class="progress-label">
+                                                <span>نسبة الإنجاز</span>
+                                                <span id="completion-percentage">0%</span>
+                                            </div>
+                                            <div class="progress-bar">
+                                                <div class="progress-fill" id="progress-fill"></div>
+                                            </div>
+                                        </div>
+                                        <div class="chart-legend">
+                                            <div class="legend-item">
+                                                <span class="legend-color completed"></span>
+                                                <span>مكتمل</span>
+                                            </div>
+                                            <div class="legend-item">
+                                                <span class="legend-color in-progress"></span>
+                                                <span>قيد العمل</span>
+                                            </div>
+                                            <div class="legend-item">
+                                                <span class="legend-color pending"></span>
+                                                <span>قيد الانتظار</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3><i class="fas fa-star"></i> المهام المميزة</h3>
+                                    <a href="#" class="view-all" data-view="tasks">عرض الكل</a>
+                                </div>
+                                <div class="card-body">
+                                    <ul class="featured-tasks" id="featured-tasks">
+                                        <!-- المهام المميزة سيتم إضافتها هنا -->
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="dashboard-sidebar">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3><i class="fas fa-calendar-check"></i> مهام اليوم</h3>
+                                </div>
+                                <div class="card-body">
+                                    <ul class="today-tasks" id="today-tasks">
+                                        <!-- مهام اليوم سيتم إضافتها هنا -->
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="card">
+                                <div class="card-header">
+                                    <h3><i class="fas fa-chart-pie"></i> توزيع المهام</h3>
+                                </div>
+                                <div class="card-body">
+                                    <div class="tasks-distribution">
+                                        <div class="distribution-item">
+                                            <div class="distribution-info">
+                                                <span>عالية الأولوية</span>
+                                                <span id="high-priority-count">0</span>
+                                            </div>
+                                            <div class="distribution-bar">
+                                                <div class="distribution-fill high" id="high-priority-bar"></div>
+                                            </div>
+                                        </div>
+                                        <div class="distribution-item">
+                                            <div class="distribution-info">
+                                                <span>متوسطة الأولوية</span>
+                                                <span id="medium-priority-count">0</span>
+                                            </div>
+                                            <div class="distribution-bar">
+                                                <div class="distribution-fill medium" id="medium-priority-bar"></div>
+                                            </div>
+                                        </div>
+                                        <div class="distribution-item">
+                                            <div class="distribution-info">
+                                                <span>منخفضة الأولوية</span>
+                                                <span id="low-priority-count">0</span>
+                                            </div>
+                                            <div class="distribution-bar">
+                                                <div class="distribution-fill low" id="low-priority-bar"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- عرض المهام -->
+                <section id="tasks-view" class="view">
+                    <div class="view-header">
+                        <h1>المهام</h1>
+                        <div class="view-actions">
+                            <div class="filter-group">
+                                <select id="task-filter-project">
+                                    <option value="all">جميع المشاريع</option>
+                                </select>
+                                <select id="task-filter-status">
+                                    <option value="all">جميع الحالات</option>
+                                    <option value="pending">قيد الانتظار</option>
+                                    <option value="in-progress">قيد العمل</option>
+                                    <option value="completed">مكتمل</option>
+                                </select>
+                                <select id="task-filter-priority">
+                                    <option value="all">جميع الأولويات</option>
+                                    <option value="high">عالية</option>
+                                    <option value="medium">متوسطة</option>
+                                    <option value="low">منخفضة</option>
+                                </select>
+                            </div>
+                            <button class="btn btn-primary" id="add-task-btn">
+                                <i class="fas fa-plus"></i>
+                                <span>إضافة مهمة</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="tasks-container">
+                        <div class="tasks-header">
+                            <div class="task-checkbox"></div>
+                            <div class="task-title">عنوان المهمة</div>
+                            <div class="task-project">المشروع</div>
+                            <div class="task-priority">الأولوية</div>
+                            <div class="task-due-date">تاريخ الاستحقاق</div>
+                            <div class="task-status">الحالة</div>
+                            <div class="task-actions">الإجراءات</div>
+                        </div>
+                        <div class="tasks-list" id="tasks-list">
+                            <!-- المهام سيتم إضافتها هنا -->
+                        </div>
+                        <div class="empty-state" id="empty-tasks">
+                            <i class="fas fa-tasks"></i>
+                            <h3>لا توجد مهام حالياً</h3>
+                            <p>ابدأ بإضافة مهمتك الأولى</p>
+                            <button class="btn btn-primary" id="empty-add-task">
+                                <i class="fas fa-plus"></i>
+                                <span>إضافة مهمة</span>
+                            </button>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- عرض المشاريع -->
+                <section id="projects-view" class="view">
+                    <div class="view-header">
+                        <h1>المشاريع</h1>
+                        <div class="view-actions">
+                            <button class="btn btn-primary" id="add-project-btn">
+                                <i class="fas fa-plus"></i>
+                                <span>مشروع جديد</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="projects-grid" id="projects-grid">
+                        <!-- المشاريع سيتم إضافتها هنا -->
+                    </div>
+                    <div class="empty-state" id="empty-projects">
+                        <i class="fas fa-project-diagram"></i>
+                        <h3>لا توجد مشاريع حالياً</h3>
+                        <p>أنشئ مشروعك الأول لبدء العمل</p>
+                        <button class="btn btn-primary" id="empty-add-project">
+                            <i class="fas fa-plus"></i>
+                            <span>إنشاء مشروع</span>
+                        </button>
+                    </div>
+                </section>
+
+                <!-- عرض لوحة كانبان -->
+                <section id="kanban-view" class="view">
+                    <div class="view-header">
+                        <h1>لوحة كانبان</h1>
+                        <div class="view-actions">
+                            <select id="kanban-project-filter">
+                                <option value="all">جميع المشاريع</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="kanban-board" id="kanban-board">
+                        <div class="kanban-column" data-status="pending">
+                            <div class="column-header">
+                                <h3><i class="fas fa-clock"></i> قيد الانتظار</h3>
+                                <span class="task-count">0</span>
+                            </div>
+                            <div class="column-content" id="kanban-pending">
+                                <!-- المهام سيتم إضافتها هنا -->
+                            </div>
+                            <button class="add-task-to-column" data-status="pending">
+                                <i class="fas fa-plus"></i>
+                                <span>إضافة مهمة</span>
+                            </button>
+                        </div>
+                        <div class="kanban-column" data-status="in-progress">
+                            <div class="column-header">
+                                <h3><i class="fas fa-spinner"></i> قيد العمل</h3>
+                                <span class="task-count">0</span>
+                            </div>
+                            <div class="column-content" id="kanban-in-progress">
+                                <!-- المهام سيتم إضافتها هنا -->
+                            </div>
+                            <button class="add-task-to-column" data-status="in-progress">
+                                <i class="fas fa-plus"></i>
+                                <span>إضافة مهمة</span>
+                            </button>
+                        </div>
+                        <div class="kanban-column" data-status="completed">
+                            <div class="column-header">
+                                <h3><i class="fas fa-check-circle"></i> مكتمل</h3>
+                                <span class="task-count">0</span>
+                            </div>
+                            <div class="column-content" id="kanban-completed">
+                                <!-- المهام سيتم إضافتها هنا -->
+                            </div>
+                            <button class="add-task-to-column" data-status="completed">
+                                <i class="fas fa-plus"></i>
+                                <span>إضافة مهمة</span>
+                            </button>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- عرض التقويم -->
+                <section id="calendar-view" class="view">
+                    <div class="view-header">
+                        <h1>التقويم</h1>
+                        <div class="view-actions">
+                            <div class="calendar-nav">
+                                <button class="btn btn-icon" id="calendar-prev">
+                                    <i class="fas fa-chevron-right"></i>
+                                </button>
+                                <h3 id="current-month">يناير 2025</h3>
+                                <button class="btn btn-icon" id="calendar-next">
+                                    <i class="fas fa-chevron-left"></i>
+                                </button>
+                            </div>
+                            <button class="btn btn-secondary" id="today-btn">اليوم</button>
+                        </div>
+                    </div>
+                    <div class="calendar-container">
+                        <div class="calendar-header">
+                            <div class="day-name">السبت</div>
+                            <div class="day-name">الأحد</div>
+                            <div class="day-name">الإثنين</div>
+                            <div class="day-name">الثلاثاء</div>
+                            <div class="day-name">الأربعاء</div>
+                            <div class="day-name">الخميس</div>
+                            <div class="day-name">الجمعة</div>
+                        </div>
+                        <div class="calendar-grid" id="calendar-grid">
+                            <!-- أيام التقويم سيتم إضافتها هنا -->
+                        </div>
+                    </div>
+                    <div class="calendar-legend">
+                        <div class="legend-item">
+                            <span class="legend-dot high"></span>
+                            <span>عالية الأولوية</span>
+                        </div>
+                        <div class="legend-item">
+                            <span class="legend-dot medium"></span>
+                            <span>متوسطة الأولوية</span>
+                        </div>
+                        <div class="legend-item">
+                            <span class="legend-dot low"></span>
+                            <span>منخفضة الأولوية</span>
+                        </div>
+                        <div class="legend-item">
+                            <span class="legend-dot completed"></span>
+                            <span>مكتمل</span>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- عرض الفريق -->
+                <section id="team-view" class="view">
+                    <div class="view-header">
+                        <h1>الفريق</h1>
+                        <div class="view-actions">
+                            <button class="btn btn-primary" id="invite-member-btn">
+                                <i class="fas fa-user-plus"></i>
+                                <span>دعوة عضو</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="team-grid" id="team-grid">
+                        <!-- أعضاء الفريق سيتم إضافتهم هنا -->
+                    </div>
+                    <div class="empty-state" id="empty-team">
+                        <i class="fas fa-users"></i>
+                        <h3>لا يوجد أعضاء في الفريق</h3>
+                        <p>ابدأ بدعوة أعضاء للفريق</p>
+                        <button class="btn btn-primary" id="empty-invite">
+                            <i class="fas fa-user-plus"></i>
+                            <span>دعوة عضو</span>
+                        </button>
+                    </div>
+                </section>
+
+                <!-- عرض التحليلات -->
+                <section id="analytics-view" class="view">
+                    <div class="view-header">
+                        <h1>التحليلات</h1>
+                        <div class="view-actions">
+                            <select id="analytics-period">
+                                <option value="week">آخر أسبوع</option>
+                                <option value="month" selected>آخر شهر</option>
+                                <option value="year">آخر سنة</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="analytics-grid">
+                        <div class="analytics-card large">
+                            <div class="card-header">
+                                <h3><i class="fas fa-chart-bar"></i> أداء المهام</h3>
+                            </div>
+                            <div class="card-body">
+                                <div class="chart-container">
+                                    <canvas id="tasks-chart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="analytics-card">
+                            <div class="card-header">
+                                <h3><i class="fas fa-chart-pie"></i> توزيع الأولويات</h3>
+                            </div>
+                            <div class="card-body">
+                                <div class="chart-container">
+                                    <canvas id="priority-chart"></canvas>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="analytics-card">
+                            <div class="card-header">
+                                <h3><i class="fas fa-check-double"></i> معدل الإنجاز</h3>
+                            </div>
+                            <div class="card-body">
+                                <div class="completion-rate">
+                                    <div class="rate-circle">
+                                        <svg viewBox="0 0 100 100">
+                                            <circle class="bg" cx="50" cy="50" r="45"></circle>
+                                            <circle class="progress" cx="50" cy="50" r="45" id="completion-circle"></circle>
+                                        </svg>
+                                        <div class="rate-value">
+                                            <span id="completion-rate-value">0</span>%
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="analytics-card">
+                            <div class="card-header">
+                                <h3><i class="fas fa-trophy"></i> أعلى الأعضاء إنتاجية</h3>
+                            </div>
+                            <div class="card-body">
+                                <ul class="top-performers" id="top-performers">
+                                    <!-- سيتم إضافة أفضل الأعضاء هنا -->
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- عرض الإعدادات -->
+                <section id="settings-view" class="view">
+                    <div class="view-header">
+                        <h1>الإعدادات</h1>
+                    </div>
+                    <div class="settings-container">
+                        <div class="settings-sidebar">
+                            <ul>
+                                <li class="active" data-settings="profile">
+                                    <a href="#">
+                                        <i class="fas fa-user"></i>
+                                        <span>الملف الشخصي</span>
+                                    </a>
+                                </li>
+                                <li data-settings="notifications">
+                                    <a href="#">
+                                        <i class="fas fa-bell"></i>
+                                        <span>الإشعارات</span>
+                                    </a>
+                                </li>
+                                <li data-settings="appearance">
+                                    <a href="#">
+                                        <i class="fas fa-palette"></i>
+                                        <span>المظهر</span>
+                                    </a>
+                                </li>
+                                <li data-settings="security">
+                                    <a href="#">
+                                        <i class="fas fa-shield-alt"></i>
+                                        <span>الأمان</span>
+                                    </a>
+                                </li>
+                                <li data-settings="language">
+                                    <a href="#">
+                                        <i class="fas fa-language"></i>
+                                        <span>اللغة</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="settings-content">
+                            <!-- إعدادات الملف الشخصي -->
+                            <div class="settings-panel active" id="settings-profile">
+                                <h2>الملف الشخصي</h2>
+                                <form id="profile-form">
+                                    <div class="form-group">
+                                        <label for="settings-name">الاسم</label>
+                                        <input type="text" id="settings-name" placeholder="أدخل اسمك">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="settings-email">البريد الإلكتروني</label>
+                                        <input type="email" id="settings-email" placeholder="أدخل بريدك الإلكتروني">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="settings-phone">رقم الهاتف</label>
+                                        <input type="tel" id="settings-phone" placeholder="أدخل رقم هاتفك">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="settings-bio">نبذة عنك</label>
+                                        <textarea id="settings-bio" placeholder="اكتب نبذة قصيرة عن نفسك"></textarea>
+                                    </div>
+                                    <button type="submit" class="btn btn-primary">
+                                        <i class="fas fa-save"></i>
+                                        <span>حفظ التغييرات</span>
+                                    </button>
+                                </form>
+                            </div>
+
+                            <!-- إعدادات الإشعارات -->
+                            <div class="settings-panel" id="settings-notifications">
+                                <h2>الإشعارات</h2>
+                                <div class="settings-options">
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>إشعارات المهام الجديدة</h4>
+                                            <p>تلقي إشعارات عند إضافة مهام جديدة</p>
+                                        </div>
+                                        <label class="toggle-switch">
+                                            <input type="checkbox" id="notify-new-task" checked>
+                                            <span class="slider"></span>
+                                        </label>
+                                    </div>
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>تذكير بمواعيد الاستحقاق</h4>
+                                            <p>تلقي تذكيرات قبل انتهاء المهام</p>
+                                        </div>
+                                        <label class="toggle-switch">
+                                            <input type="checkbox" id="notify-due-date" checked>
+                                            <span class="slider"></span>
+                                        </label>
+                                    </div>
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>إشعارات التعليقات</h4>
+                                            <p>تلقي إشعارات عند إضافة تعليقات</p>
+                                        </div>
+                                        <label class="toggle-switch">
+                                            <input type="checkbox" id="notify-comments" checked>
+                                            <span class="slider"></span>
+                                        </label>
+                                    </div>
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>رسائل البريد الإلكتروني</h4>
+                                            <p>تلقي ملخصات دورية عبر البريد</p>
+                                        </div>
+                                        <label class="toggle-switch">
+                                            <input type="checkbox" id="notify-email">
+                                            <span class="slider"></span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- إعدادات المظهر -->
+                            <div class="settings-panel" id="settings-appearance">
+                                <h2>المظهر</h2>
+                                <div class="settings-options">
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>الوضع الداكن</h4>
+                                            <p>تفعيل المظهر الداكن للتطبيق</p>
+                                        </div>
+                                        <label class="toggle-switch">
+                                            <input type="checkbox" id="dark-mode-toggle">
+                                            <span class="slider"></span>
+                                        </label>
+                                    </div>
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>اللون الرئيسي</h4>
+                                            <p>اختر لون التطبيق المفضل لديك</p>
+                                        </div>
+                                        <div class="color-options">
+                                            <button class="color-option blue" data-color="blue"></button>
+                                            <button class="color-option green" data-color="green"></button>
+                                            <button class="color-option purple" data-color="purple"></button>
+                                            <button class="color-option orange" data-color="orange"></button>
+                                            <button class="color-option pink" data-color="pink"></button>
+                                        </div>
+                                    </div>
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>حجم الخط</h4>
+                                            <p>ضبط حجم الخط في التطبيق</p>
+                                        </div>
+                                        <select id="font-size">
+                                            <option value="small">صغير</option>
+                                            <option value="medium" selected>متوسط</option>
+                                            <option value="large">كبير</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- إعدادات الأمان -->
+                            <div class="settings-panel" id="settings-security">
+                                <h2>الأمان</h2>
+                                <form id="security-form">
+                                    <div class="form-group">
+                                        <label for="current-password">كلمة المرور الحالية</label>
+                                        <input type="password" id="current-password" placeholder="أدخل كلمة المرور الحالية">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="new-password">كلمة المرور الجديدة</label>
+                                        <input type="password" id="new-password" placeholder="أدخل كلمة المرور الجديدة">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="confirm-new-password">تأكيد كلمة المرور</label>
+                                        <input type="password" id="confirm-new-password" placeholder="أعد إدخال كلمة المرور">
+                                    </div>
+                                    <button type="submit" class="btn btn-primary">
+                                        <i class="fas fa-key"></i>
+                                        <span>تغيير كلمة المرور</span>
+                                    </button>
+                                </form>
+                                <div class="security-options">
+                                    <h3>خيارات إضافية</h3>
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>المصادقة الثنائية</h4>
+                                            <p>تفعيل المصادقة لحماية إضافية</p>
+                                        </div>
+                                        <label class="toggle-switch">
+                                            <input type="checkbox" id="two-factor">
+                                            <span class="slider"></span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- إعدادات اللغة -->
+                            <div class="settings-panel" id="settings-language">
+                                <h2>اللغة</h2>
+                                <div class="settings-options">
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>لغة الواجهة</h4>
+                                            <p>اختر لغة التطبيق</p>
+                                        </div>
+                                        <select id="interface-language">
+                                            <option value="ar" selected>العربية</option>
+                                            <option value="en">English</option>
+                                            <option value="tr">Türkçe</option>
+                                        </select>
+                                    </div>
+                                    <div class="setting-item">
+                                        <div class="setting-info">
+                                            <h4>اتجاه الكتابة</h4>
+                                            <p>اتجاه النص حسب اللغة</p>
+                                        </div>
+                                        <select id="text-direction">
+                                            <option value="rtl" selected>من اليمين لليسار</option>
+                                            <option value="ltr">من اليسار لليمين</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </main>
+    </div>
+
+    <!-- النماذج المنبثقة -->
+    <!-- نموذج إضافة/تعديل المهمة -->
+    <div class="modal" id="task-modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="task-modal-title">إضافة مهمة جديدة</h3>
+                <button class="modal-close" data-modal="task-modal">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <form id="task-form">
+                <input type="hidden" id="task-id">
+                <div class="form-group">
+                    <label for="task-title">عنوان المهمة *</label>
+                    <input type="text" id="task-title" placeholder="أدخل عنوان المهمة" required>
+                </div>
+                <div class="form-group">
+                    <label for="task-description">وصف المهمة</label>
+                    <textarea id="task-description" placeholder="أدخل وصفاً تفصيلياً للمهمة"></textarea>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="task-project-select">المشروع *</label>
+                        <select id="task-project-select" required>
+                            <option value="">اختر المشروع</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label for="task-priority">الأولوية *</label>
+                        <select id="task-priority" required>
+                            <option value="low">منخفضة</option>
+                            <option value="medium" selected>متوسطة</option>
+                            <option value="high">عالية</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="task-due-date">تاريخ الاستحقاق</label>
+                        <input type="date" id="task-due-date">
+                    </div>
+                    <div class="form-group">
+                        <label for="task-status">الحالة</label>
+                        <select id="task-status">
+                            <option value="pending" selected>قيد الانتظار</option>
+                            <option value="in-progress">قيد العمل</option>
+                            <option value="completed">مكتمل</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="checkbox-label">
+                        <input type="checkbox" id="task-featured">
+                        <span>مهمة مميزة</span>
+                    </label>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary modal-cancel" data-modal="task-modal">إلغاء</button>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-save"></i>
+                        <span>حفظ المهمة</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- نموذج إضافة/تعديل المشروع -->
+    <div class="modal" id="project-modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="project-modal-title">إنشاء مشروع جديد</h3>
+                <button class="modal-close" data-modal="project-modal">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <form id="project-form">
+                <input type="hidden" id="project-id">
+                <div class="form-group">
+                    <label for="project-name">اسم المشروع *</label>
+                    <input type="text" id="project-name" placeholder="أدخل اسم المشروع" required>
+                </div>
+                <div class="form-group">
+                    <label for="project-description">وصف المشروع</label>
+                    <textarea id="project-description" placeholder="أدخل وصفاً للمشروع"></textarea>
+                </div>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="project-color">لون المشروع</label>
+                        <input type="color" id="project-color" value="#4a90d9">
+                    </div>
+                    <div class="form-group">
+                        <label for="project-deadline">تاريخ الانتهاء</label>
+                        <input type="date" id="project-deadline">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary modal-cancel" data-modal="project-modal">إلغاء</button>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-save"></i>
+                        <span>حفظ المشروع</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- نموذج تفاصيل المهمة -->
+    <div class="modal" id="task-details-modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content large">
+            <div class="modal-header">
+                <h3 id="task-details-title">تفاصيل المهمة</h3>
+                <button class="modal-close" data-modal="task-details-modal">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="task-details-content" id="task-details-content">
+                <!-- تفاصيل المهمة سيتم إضافتها هنا -->
+            </div>
+        </div>
+    </div>
+
+    <!-- نموذج إضافة عضو للفريق -->
+    <div class="modal" id="invite-modal">
+        <div class="modal-overlay"></div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>دعوة عضو جديد</h3>
+                <button class="modal-close" data-modal="invite-modal">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <form id="invite-form">
+                <div class="form-group">
+                    <label for="invite-email">البريد الإلكتروني</label>
+                    <input type="email" id="invite-email" placeholder="أدخل البريد الإلكتروني للدعوة" required>
+                </div>
+                <div class="form-group">
+                    <label for="invite-role">الدور</label>
+                    <select id="invite-role">
+                        <option value="member">عضو</option>
+                        <option value="admin">مسؤول</option>
+                        <option value="viewer">مشاهد</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="invite-message">رسالة اختيارية</label>
+                    <textarea id="invite-message" placeholder="اكتب رسالة مع الدعوة"></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary modal-cancel" data-modal="invite-modal">إلغاء</button>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fas fa-paper-plane"></i>
+                        <span>إرسال الدعوة</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- إضافة سريعة للمهمة -->
+    <div class="quick-add-popup hidden" id="quick-add-popup">
+        <div class="quick-add-content">
+            <input type="text" id="quick-task-input" placeholder="أضف مهمة سريعة...">
+            <button class="btn btn-primary" id="quick-task-add">
+                <i class="fas fa-plus"></i>
+            </button>
+        </div>
+    </div>
+
+    <!-- رسائل النجاح والخطأ -->
+    <div class="toast-container" id="toast-container"></div>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,1866 @@
+/**
+ * TaskFlow Pro - Professional Task Management Application
+ * ========================================================
+ * Main JavaScript File - Complete Functionality
+ * Author: MiniMax Agent
+ * Version: 2.0
+ */
+
+// ============================================
+// التخزين المحلي وإدارة البيانات
+// ============================================
+
+const StorageManager = {
+    // حفظ البيانات في التخزين المحلي
+    save(key, data) {
+        try {
+            localStorage.setItem(`taskflow_${key}`, JSON.stringify(data));
+            return true;
+        } catch (error) {
+            console.error('خطأ في حفظ البيانات:', error);
+            return false;
+        }
+    },
+
+    // استرجاع البيانات من التخزين المحلي
+    load(key, defaultValue = null) {
+        try {
+            const data = localStorage.getItem(`taskflow_${key}`);
+            return data ? JSON.parse(data) : defaultValue;
+        } catch (error) {
+            console.error('خطأ في قراءة البيانات:', error);
+            return defaultValue;
+        }
+    },
+
+    // حذف البيانات
+    remove(key) {
+        try {
+            localStorage.removeItem(`taskflow_${key}`);
+            return true;
+        } catch (error) {
+            console.error('خطأ في حذف البيانات:', error);
+            return false;
+        }
+    },
+
+    // مسح جميع البيانات
+    clearAll() {
+        const keys = ['tasks', 'projects', 'team', 'settings', 'user'];
+        keys.forEach(key => this.remove(key));
+    }
+};
+
+// ============================================
+// إدارة الإشعارات
+// ============================================
+
+const NotificationManager = {
+    notifications: [],
+    
+    init() {
+        this.notifications = StorageManager.load('notifications', this.getDefaultNotifications());
+        this.render();
+    },
+    
+    getDefaultNotifications() {
+        return [
+            {
+                id: 1,
+                type: 'task',
+                title: 'مهمة جديدة مُضافة',
+                message: 'تم إضافة مهمة "تحديث التقرير الأسبوعي" بنجاح',
+                time: 'منذ 5 دقائق',
+                read: false
+            },
+            {
+                id: 2,
+                type: 'comment',
+                title: 'تعليق جديد',
+                message: 'أحمد علّاش على مهمة "تصميم الواجهة"',
+                time: 'منذ ساعة',
+                read: false
+            },
+            {
+                id: 3,
+                type: 'project',
+                title: 'تحديث المشروع',
+                message: 'تم تحديث حالة مشروع "تطبيق الجوال"',
+                time: 'منذ ساعتين',
+                read: false
+            }
+        ];
+    },
+    
+    add(notification) {
+        const newNotification = {
+            id: Date.now(),
+            time: 'الآن',
+            read: false,
+            ...notification
+        };
+        this.notifications.unshift(newNotification);
+        StorageManager.save('notifications', this.notifications);
+        this.render();
+        this.updateCount();
+    },
+    
+    markAsRead(id) {
+        const notification = this.notifications.find(n => n.id === id);
+        if (notification) {
+            notification.read = true;
+            StorageManager.save('notifications', this.notifications);
+            this.render();
+            this.updateCount();
+        }
+    },
+    
+    markAllAsRead() {
+        this.notifications.forEach(n => n.read = true);
+        StorageManager.save('notifications', this.notifications);
+        this.render();
+        this.updateCount();
+    },
+    
+    updateCount() {
+        const unreadCount = this.notifications.filter(n => !n.read).length;
+        const badge = document.getElementById('notification-count');
+        if (badge) {
+            badge.textContent = unreadCount;
+            badge.style.display = unreadCount > 0 ? 'flex' : 'none';
+        }
+    },
+    
+    render() {
+        const container = document.getElementById('notifications-list');
+        if (!container) return;
+        
+        container.innerHTML = this.notifications.map(notification => `
+            <div class="notification-item ${notification.read ? '' : 'unread'}" data-id="${notification.id}">
+                <div class="notification-icon ${notification.type}">
+                    <i class="fas fa-${this.getIcon(notification.type)}"></i>
+                </div>
+                <div class="notification-content">
+                    <h5>${notification.title}</h5>
+                    <p>${notification.message}</p>
+                    <span class="notification-time">${notification.time}</span>
+                </div>
+            </div>
+        `).join('');
+        
+        // إضافة مستمعي الأحداث
+        container.querySelectorAll('.notification-item').forEach(item => {
+            item.addEventListener('click', () => {
+                const id = parseInt(item.dataset.id);
+                this.markAsRead(id);
+            });
+        });
+    },
+    
+    getIcon(type) {
+        const icons = {
+            task: 'tasks',
+            comment: 'comment',
+            project: 'project-diagram',
+            user: 'user'
+        };
+        return icons[type] || 'bell';
+    }
+};
+
+// ============================================
+// إدارة المشاريع
+// ============================================
+
+const ProjectManager = {
+    projects: [],
+    
+    init() {
+        this.projects = StorageManager.load('projects', this.getSampleProjects());
+        this.renderProjectsList();
+        this.renderProjectsGrid();
+        this.renderKanbanFilter();
+    },
+    
+    getSampleProjects() {
+        return [
+            {
+                id: 1,
+                name: 'تطوير تطبيق الجوال',
+                description: 'تطوير تطبيق جوال متكامل لادارة المهام والمشاريع',
+                color: '#4a90d9',
+                deadline: '2025-03-15',
+                tasks: [
+                    { id: 1, title: 'تصميم واجهة المستخدم', status: 'completed' },
+                    { id: 2, title: 'برمجة الشاشة الرئيسية', status: 'in-progress' },
+                    { id: 3, title: 'اختبار الأداء', status: 'pending' }
+                ]
+            },
+            {
+                id: 2,
+                name: 'مشروع الموقع الإلكتروني',
+                description: 'إعادة تصميم وتطوير الموقع الإلكتروني للشركة',
+                color: '#28a745',
+                deadline: '2025-02-28',
+                tasks: [
+                    { id: 4, title: 'تحليل المتطلبات', status: 'completed' },
+                    { id: 5, title: 'تصميم الهوية البصرية', status: 'completed' }
+                ]
+            },
+            {
+                id: 3,
+                name: 'حملة التسويق الرقمي',
+                description: 'تنفيذ حملة تسويقية شاملة للمنتجات الجديدة',
+                color: '#fd7e14',
+                deadline: '2025-04-01',
+                tasks: [
+                    { id: 6, title: 'وضع الاستراتيجية', status: 'in-progress' }
+                ]
+            }
+        ];
+    },
+    
+    add(project) {
+        const newProject = {
+            id: Date.now(),
+            tasks: [],
+            ...project
+        };
+        this.projects.push(newProject);
+        StorageManager.save('projects', this.projects);
+        this.renderProjectsList();
+        this.renderProjectsGrid();
+        this.renderKanbanFilter();
+        return newProject;
+    },
+    
+    update(id, updates) {
+        const index = this.projects.findIndex(p => p.id === id);
+        if (index !== -1) {
+            this.projects[index] = { ...this.projects[index], ...updates };
+            StorageManager.save('projects', this.projects);
+            this.renderProjectsList();
+            this.renderProjectsGrid();
+            this.renderKanbanFilter();
+            return true;
+        }
+        return false;
+    },
+    
+    delete(id) {
+        this.projects = this.projects.filter(p => p.id !== id);
+        StorageManager.save('projects', this.projects);
+        this.renderProjectsList();
+        this.renderProjectsGrid();
+        this.renderKanbanFilter();
+    },
+    
+    getProject(id) {
+        return this.projects.find(p => p.id === id);
+    },
+    
+    getProjectName(id) {
+        const project = this.getProject(id);
+        return project ? project.name : 'بدون مشروع';
+    },
+    
+    renderProjectsList() {
+        const select = document.getElementById('task-filter-project');
+        const taskProjectSelect = document.getElementById('task-project-select');
+        const kanbanFilter = document.getElementById('kanban-project-filter');
+        
+        if (select) {
+            select.innerHTML = '<option value="all">جميع المشاريع</option>' +
+                this.projects.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
+        }
+        
+        if (taskProjectSelect) {
+            taskProjectSelect.innerHTML = '<option value="">اختر المشروع</option>' +
+                this.projects.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
+        }
+        
+        if (kanbanFilter) {
+            kanbanFilter.innerHTML = '<option value="all">جميع المشاريع</option>' +
+                this.projects.map(p => `<option value="${p.id}">${p.name}</option>`).join('');
+        }
+    },
+    
+    renderProjectsGrid() {
+        const grid = document.getElementById('projects-grid');
+        const empty = document.getElementById('empty-projects');
+        
+        if (!grid) return;
+        
+        if (this.projects.length === 0) {
+            grid.innerHTML = '';
+            if (empty) empty.classList.add('show');
+            return;
+        }
+        
+        if (empty) empty.classList.remove('show');
+        
+        grid.innerHTML = this.projects.map(project => {
+            const completedTasks = project.tasks.filter(t => t.status === 'completed').length;
+            const totalTasks = project.tasks.length;
+            const progress = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
+            
+            return `
+                <div class="project-card" data-id="${project.id}">
+                    <div class="project-header">
+                        <div class="project-color-bar" style="background: linear-gradient(135deg, ${project.color}, ${project.color}dd)"></div>
+                        <div class="project-actions-overlay">
+                            <button onclick="ProjectManager.editProject(${project.id})" title="تعديل">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <button onclick="ProjectManager.deleteProject(${project.id})" title="حذف">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="project-body">
+                        <h3 class="project-title">${project.name}</h3>
+                        <p class="project-description">${project.description || 'لا يوجد وصف'}</p>
+                        <div class="project-meta">
+                            <div class="project-progress">
+                                <div class="project-progress-bar">
+                                    <div class="project-progress-fill" style="width: ${progress}%"></div>
+                                </div>
+                                <span class="project-progress-text">${progress}%</span>
+                            </div>
+                            <span class="project-tasks-count">${totalTasks} مهام</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    },
+    
+    renderKanbanFilter() {
+        // تم التعامل معه في renderProjectsList
+    },
+    
+    editProject(id) {
+        const project = this.getProject(id);
+        if (!project) return;
+        
+        document.getElementById('project-id').value = id;
+        document.getElementById('project-name').value = project.name;
+        document.getElementById('project-description').value = project.description || '';
+        document.getElementById('project-color').value = project.color;
+        document.getElementById('project-deadline').value = project.deadline || '';
+        document.getElementById('project-modal-title').textContent = 'تعديل المشروع';
+        
+        ModalManager.open('project-modal');
+    },
+    
+    deleteProject(id) {
+        if (confirm('هل أنت متأكد من حذف هذا المشروع؟')) {
+            this.delete(id);
+            ToastManager.show('تم حذف المشروع بنجاح', 'success');
+        }
+    }
+};
+
+// ============================================
+// إدارة المهام
+// ============================================
+
+const TaskManager = {
+    tasks: [],
+    
+    init() {
+        this.tasks = StorageManager.load('tasks', this.getSampleTasks());
+        this.renderTasksList();
+        this.renderKanbanBoard();
+        this.renderDashboard();
+        this.renderCalendar();
+    },
+    
+    getSampleTasks() {
+        return [
+            {
+                id: 1,
+                title: 'إعداد التقرير الأسبوعي',
+                description: 'إعداد تقرير شامل عن أداء الفريق خلال الأسبوع',
+                projectId: 1,
+                priority: 'high',
+                status: 'in-progress',
+                dueDate: '2025-01-20',
+                featured: true,
+                createdAt: new Date().toISOString()
+            },
+            {
+                id: 2,
+                title: 'مراجعة التصميمات',
+                description: 'مراجعة واعتماد التصميمات الجديدة للتطبيق',
+                projectId: 1,
+                priority: 'medium',
+                status: 'pending',
+                dueDate: '2025-01-22',
+                featured: false,
+                createdAt: new Date().toISOString()
+            },
+            {
+                id: 3,
+                title: 'اختبار الوظائف',
+                description: 'اختبار جميع وظائف التطبيق والتحقق من عدم وجود أخطاء',
+                projectId: 1,
+                priority: 'high',
+                status: 'pending',
+                dueDate: '2025-01-25',
+                featured: true,
+                createdAt: new Date().toISOString()
+            },
+            {
+                id: 4,
+                title: 'تحديث الوثائق',
+                description: 'تحديث وثائق المستخدم والتطوير',
+                projectId: 2,
+                priority: 'low',
+                status: 'completed',
+                dueDate: '2025-01-18',
+                featured: false,
+                createdAt: new Date().toISOString()
+            },
+            {
+                id: 5,
+                title: 'اجتماع مع الفريق',
+                description: 'اجتماع أسبوعي لمناقشة التقدم والمشاكل',
+                projectId: 2,
+                priority: 'medium',
+                status: 'pending',
+                dueDate: '2025-01-21',
+                featured: false,
+                createdAt: new Date().toISOString()
+            },
+            {
+                id: 6,
+                title: 'إعداد الميزانية',
+                description: 'إعداد ميزانية المشروع للربع القادم',
+                projectId: 3,
+                priority: 'high',
+                status: 'in-progress',
+                dueDate: '2025-01-23',
+                featured: true,
+                createdAt: new Date().toISOString()
+            }
+        ];
+    },
+    
+    add(task) {
+        const newTask = {
+            id: Date.now(),
+            status: 'pending',
+            createdAt: new Date().toISOString(),
+            ...task
+        };
+        this.tasks.push(newTask);
+        StorageManager.save('tasks', this.tasks);
+        this.renderAll();
+        return newTask;
+    },
+    
+    update(id, updates) {
+        const index = this.tasks.findIndex(t => t.id === id);
+        if (index !== -1) {
+            this.tasks[index] = { ...this.tasks[index], ...updates, updatedAt: new Date().toISOString() };
+            StorageManager.save('tasks', this.tasks);
+            this.renderAll();
+            return true;
+        }
+        return false;
+    },
+    
+    delete(id) {
+        this.tasks = this.tasks.filter(t => t.id !== id);
+        StorageManager.save('tasks', this.tasks);
+        this.renderAll();
+    },
+    
+    toggleComplete(id) {
+        const task = this.tasks.find(t => t.id === id);
+        if (task) {
+            task.status = task.status === 'completed' ? 'pending' : 'completed';
+            StorageManager.save('tasks', this.tasks);
+            this.renderAll();
+        }
+    },
+    
+    getTask(id) {
+        return this.tasks.find(t => t.id === id);
+    },
+    
+    getFilteredTasks(filters = {}) {
+        let filtered = [...this.tasks];
+        
+        if (filters.project && filters.project !== 'all') {
+            filtered = filtered.filter(t => t.projectId == filters.project);
+        }
+        
+        if (filters.status && filters.status !== 'all') {
+            filtered = filtered.filter(t => t.status === filters.status);
+        }
+        
+        if (filters.priority && filters.priority !== 'all') {
+            filtered = filtered.filter(t => t.priority === filters.priority);
+        }
+        
+        return filtered;
+    },
+    
+    renderAll() {
+        this.renderTasksList();
+        this.renderKanbanBoard();
+        this.renderDashboard();
+        this.renderCalendar();
+    },
+    
+    renderTasksList() {
+        const container = document.getElementById('tasks-list');
+        const empty = document.getElementById('empty-tasks');
+        
+        if (!container) return;
+        
+        const projectFilter = document.getElementById('task-filter-project')?.value || 'all';
+        const statusFilter = document.getElementById('task-filter-status')?.value || 'all';
+        const priorityFilter = document.getElementById('task-filter-priority')?.value || 'all';
+        
+        const tasks = this.getFilteredTasks({
+            project: projectFilter,
+            status: statusFilter,
+            priority: priorityFilter
+        });
+        
+        if (tasks.length === 0) {
+            container.innerHTML = '';
+            if (empty) empty.classList.add('show');
+            return;
+        }
+        
+        if (empty) empty.classList.remove('show');
+        
+        container.innerHTML = tasks.map(task => `
+            <div class="task-row ${task.status}" data-id="${task.id}">
+                <div class="task-checkbox" onclick="TaskManager.toggleComplete(${task.id})">
+                    ${task.status === 'completed' ? '<i class="fas fa-check"></i>' : ''}
+                </div>
+                <div class="task-row-title">${task.title}</div>
+                <div class="task-project">${ProjectManager.getProjectName(task.projectId)}</div>
+                <div class="task-priority">
+                    <span class="task-priority-badge ${task.priority}">
+                        ${this.getPriorityLabel(task.priority)}
+                    </span>
+                </div>
+                <div class="task-due-date">${this.formatDate(task.dueDate)}</div>
+                <div class="task-status">
+                    <span class="task-priority-badge ${task.status}">
+                        ${this.getStatusLabel(task.status)}
+                    </span>
+                </div>
+                <div class="task-row-actions">
+                    <button onclick="TaskManager.viewTask(${task.id})" title="عرض">
+                        <i class="fas fa-eye"></i>
+                    </button>
+                    <button onclick="TaskManager.editTask(${task.id})" title="تعديل">
+                        <i class="fas fa-edit"></i>
+                    </button>
+                    <button class="delete" onclick="TaskManager.deleteTask(${task.id})" title="حذف">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </div>
+        `).join('');
+    },
+    
+    renderKanbanBoard() {
+        const projectFilter = document.getElementById('kanban-project-filter')?.value || 'all';
+        
+        const tasks = this.getFilteredTasks({ project: projectFilter });
+        
+        const columns = {
+            pending: document.getElementById('kanban-pending'),
+            'in-progress': document.getElementById('kanban-in-progress'),
+            completed: document.getElementById('kanban-completed')
+        };
+        
+        Object.keys(columns).forEach(status => {
+            if (!columns[status]) return;
+            
+            const statusTasks = tasks.filter(t => t.status === status);
+            
+            columns[status].innerHTML = statusTasks.map(task => `
+                <div class="kanban-card" draggable="true" data-id="${task.id}">
+                    <div class="kanban-card-title">${task.title}</div>
+                    <div class="kanban-card-meta">
+                        <span class="kanban-card-project">${ProjectManager.getProjectName(task.projectId)}</span>
+                        <span class="task-priority-badge ${task.priority}">
+                            ${this.getPriorityLabel(task.priority)}
+                        </span>
+                    </div>
+                </div>
+            `).join('');
+            
+            // تحديث عداد المهام
+            const column = columns[status].closest('.kanban-column');
+            if (column) {
+                column.querySelector('.task-count').textContent = statusTasks.length;
+            }
+        });
+        
+        this.initKanbanDragDrop();
+    },
+    
+    initKanbanDragDrop() {
+        const cards = document.querySelectorAll('.kanban-card');
+        const columns = document.querySelectorAll('.column-content');
+        
+        cards.forEach(card => {
+            card.addEventListener('dragstart', (e) => {
+                card.classList.add('dragging');
+                e.dataTransfer.setData('text/plain', card.dataset.id);
+            });
+            
+            card.addEventListener('dragend', () => {
+                card.classList.remove('dragging');
+            });
+        });
+        
+        columns.forEach(column => {
+            column.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                const afterElement = this.getDragAfterElement(column, e.clientY);
+                const draggable = document.querySelector('.dragging');
+                if (afterElement == null) {
+                    column.appendChild(draggable);
+                } else {
+                    column.insertBefore(draggable, afterElement);
+                }
+            });
+            
+            column.addEventListener('drop', (e) => {
+                e.preventDefault();
+                const taskId = parseInt(e.dataTransfer.getData('text/plain'));
+                const newStatus = column.id.replace('kanban-', '');
+                this.update(taskId, { status: newStatus });
+            });
+        });
+    },
+    
+    getDragAfterElement(container, y) {
+        const draggableElements = [...container.querySelectorAll('.kanban-card:not(.dragging)')];
+        
+        return draggableElements.reduce((closest, child) => {
+            const box = child.getBoundingClientRect();
+            const offset = y - box.top - box.height / 2;
+            
+            if (offset < 0 && offset > closest.offset) {
+                return { offset: offset, element: child };
+            } else {
+                return closest;
+            }
+        }, { offset: Number.NEGATIVE_INFINITY }).element;
+    },
+    
+    renderDashboard() {
+        // تحديث الإحصائيات
+        const totalTasks = this.tasks.length;
+        const completedTasks = this.tasks.filter(t => t.status === 'completed').length;
+        const pendingTasks = this.tasks.filter(t => t.status !== 'completed').length;
+        const totalProjects = ProjectManager.projects.length;
+        
+        const totalEl = document.getElementById('total-tasks');
+        const completedEl = document.getElementById('completed-tasks');
+        const pendingEl = document.getElementById('pending-tasks');
+        const projectsEl = document.getElementById('total-projects');
+        
+        if (totalEl) totalEl.textContent = totalTasks;
+        if (completedEl) completedEl.textContent = completedTasks;
+        if (pendingEl) pendingEl.textContent = pendingTasks;
+        if (projectsEl) projectsEl.textContent = totalProjects;
+        
+        // تحديث شريط التقدم
+        const completionPercentage = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
+        const progressFill = document.getElementById('progress-fill');
+        const completionPercent = document.getElementById('completion-percentage');
+        
+        if (progressFill) progressFill.style.width = `${completionPercentage}%`;
+        if (completionPercent) completionPercent.textContent = `${completionPercentage}%`;
+        
+        // المهام المميزة
+        const featuredTasks = this.tasks.filter(t => t.featured).slice(0, 5);
+        const featuredContainer = document.getElementById('featured-tasks');
+        
+        if (featuredContainer) {
+            featuredContainer.innerHTML = featuredTasks.map(task => `
+                <li class="task-item ${task.status}" onclick="TaskManager.viewTask(${task.id})">
+                    <div class="task-checkbox" onclick="event.stopPropagation(); TaskManager.toggleComplete(${task.id})">
+                        ${task.status === 'completed' ? '<i class="fas fa-check"></i>' : ''}
+                    </div>
+                    <span class="task-text">${task.title}</span>
+                    <span class="task-priority-badge ${task.priority}">
+                        ${this.getPriorityLabel(task.priority)}
+                    </span>
+                </li>
+            `).join('');
+        }
+        
+        // مهام اليوم
+        const today = new Date().toISOString().split('T')[0];
+        const todayTasks = this.tasks.filter(t => t.dueDate === today).slice(0, 5);
+        const todayContainer = document.getElementById('today-tasks');
+        
+        if (todayContainer) {
+            todayContainer.innerHTML = todayTasks.length > 0 ? todayTasks.map(task => `
+                <li class="task-item ${task.status}" onclick="TaskManager.viewTask(${task.id})">
+                    <div class="task-checkbox" onclick="event.stopPropagation(); TaskManager.toggleComplete(${task.id})">
+                        ${task.status === 'completed' ? '<i class="fas fa-check"></i>' : ''}
+                    </div>
+                    <span class="task-text">${task.title}</span>
+                </li>
+            `).join('') : '<li style="text-align: center; color: var(--text-muted); padding: 20px;">لا توجد مهام اليوم</li>';
+        }
+        
+        // توزيع الأولويات
+        const highCount = this.tasks.filter(t => t.priority === 'high').length;
+        const mediumCount = this.tasks.filter(t => t.priority === 'medium').length;
+        const lowCount = this.tasks.filter(t => t.priority === 'low').length;
+        const total = highCount + mediumCount + lowCount || 1;
+        
+        const highBar = document.getElementById('high-priority-bar');
+        const mediumBar = document.getElementById('medium-priority-bar');
+        const lowBar = document.getElementById('low-priority-bar');
+        
+        if (highBar) highBar.style.width = `${(highCount / total) * 100}%`;
+        if (mediumBar) mediumBar.style.width = `${(mediumCount / total) * 100}%`;
+        if (lowBar) lowBar.style.width = `${(lowCount / total) * 100}%`;
+        
+        document.getElementById('high-priority-count').textContent = highCount;
+        document.getElementById('medium-priority-count').textContent = mediumCount;
+        document.getElementById('low-priority-count').textContent = lowCount;
+    },
+    
+    renderCalendar() {
+        const grid = document.getElementById('calendar-grid');
+        if (!grid) return;
+        
+        const now = new Date();
+        const currentMonth = parseInt(window.currentMonth || now.getMonth());
+        const currentYear = parseInt(window.currentYear || now.getFullYear());
+        
+        const monthNames = ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+                          'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
+        
+        document.getElementById('current-month').textContent = `${monthNames[currentMonth]} ${currentYear}`;
+        
+        const firstDay = new Date(currentYear, currentMonth, 1).getDay();
+        const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+        const daysInPrevMonth = new Date(currentYear, currentMonth, 0).getDate();
+        
+        let html = '';
+        
+        // أيام الشهر السابق
+        for (let i = firstDay - 1; i >= 0; i--) {
+            html += `<div class="calendar-day other-month"><div class="calendar-day-number">${daysInPrevMonth - i}</div></div>`;
+        }
+        
+        // أيام الشهر الحالي
+        for (let day = 1; day <= daysInMonth; day++) {
+            const dateStr = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+            const dayTasks = this.tasks.filter(t => t.dueDate === dateStr);
+            const isToday = day === now.getDate() && currentMonth === now.getMonth() && currentYear === now.getFullYear();
+            
+            html += `
+                <div class="calendar-day ${isToday ? 'today' : ''}" data-date="${dateStr}">
+                    <div class="calendar-day-number">${day}</div>
+                    <div class="calendar-tasks">
+                        ${dayTasks.slice(0, 2).map(task => `
+                            <div class="calendar-task ${task.status} ${task.priority}" title="${task.title}">
+                                ${task.title}
+                            </div>
+                        `).join('')}
+                        ${dayTasks.length > 2 ? `<div class="calendar-task" style="background: var(--bg-tertiary);">+${dayTasks.length - 2} أخرى</div>` : ''}
+                    </div>
+                </div>
+            `;
+        }
+        
+        // أيام الشهر القادم
+        const totalCells = firstDay + daysInMonth;
+        const remainingCells = 42 - totalCells;
+        for (let i = 1; i <= remainingCells; i++) {
+            html += `<div class="calendar-day other-month"><div class="calendar-day-number">${i}</div></div>`;
+        }
+        
+        grid.innerHTML = html;
+    },
+    
+    formatDate(dateStr) {
+        if (!dateStr) return '-';
+        const date = new Date(dateStr);
+        return date.toLocaleDateString('ar-SA', { day: 'numeric', month: 'short' });
+    },
+    
+    getPriorityLabel(priority) {
+        const labels = { high: 'عالية', medium: 'متوسطة', low: 'منخفضة' };
+        return labels[priority] || priority;
+    },
+    
+    getStatusLabel(status) {
+        const labels = { pending: 'قيد الانتظار', 'in-progress': 'قيد العمل', completed: 'مكتمل' };
+        return labels[status] || status;
+    },
+    
+    editTask(id) {
+        const task = this.getTask(id);
+        if (!task) return;
+        
+        document.getElementById('task-id').value = id;
+        document.getElementById('task-title').value = task.title;
+        document.getElementById('task-description').value = task.description || '';
+        document.getElementById('task-project-select').value = task.projectId || '';
+        document.getElementById('task-priority').value = task.priority;
+        document.getElementById('task-due-date').value = task.dueDate || '';
+        document.getElementById('task-status').value = task.status;
+        document.getElementById('task-featured').checked = task.featured || false;
+        document.getElementById('task-modal-title').textContent = 'تعديل المهمة';
+        
+        ModalManager.open('task-modal');
+    },
+    
+    viewTask(id) {
+        const task = this.getTask(id);
+        if (!task) return;
+        
+        const content = document.getElementById('task-details-content');
+        content.innerHTML = `
+            <div class="task-detail-header">
+                <h2 class="task-detail-title">${task.title}</h2>
+                <span class="task-priority-badge ${task.priority}">${this.getPriorityLabel(task.priority)}</span>
+            </div>
+            <div class="task-detail-meta">
+                <span><i class="fas fa-project-diagram"></i> ${ProjectManager.getProjectName(task.projectId)}</span>
+                <span><i class="fas fa-flag"></i> ${this.getPriorityLabel(task.priority)}</span>
+                <span><i class="fas fa-calendar"></i> ${this.formatDate(task.dueDate)}</span>
+                <span class="task-priority-badge ${task.status}">${this.getStatusLabel(task.status)}</span>
+            </div>
+            <div class="task-detail-description">
+                <h4>الوصف</h4>
+                <p>${task.description || 'لا يوجد وصف لهذه المهمة'}</p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary" onclick="ModalManager.close('task-details-modal')">إغلاق</button>
+                <button class="btn btn-primary" onclick="TaskManager.editTask(${task.id}); ModalManager.close('task-details-modal');">
+                    <i class="fas fa-edit"></i>
+                    <span>تعديل</span>
+                </button>
+            </div>
+        `;
+        
+        ModalManager.open('task-details-modal');
+    },
+    
+    deleteTask(id) {
+        if (confirm('هل أنت متأكد من حذف هذه المهمة؟')) {
+            this.delete(id);
+            ToastManager.show('تم حذف المهمة بنجاح', 'success');
+        }
+    }
+};
+
+// ============================================
+// إدارة الفريق
+// ============================================
+
+const TeamManager = {
+    members: [],
+    
+    init() {
+        this.members = StorageManager.load('team', this.getSampleMembers());
+        this.renderTeamGrid();
+    },
+    
+    getSampleMembers() {
+        return [
+            {
+                id: 1,
+                name: 'أحمد محمد',
+                role: 'مطور أمامي',
+                avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Ahmed',
+                tasksCompleted: 45,
+                tasksInProgress: 5
+            },
+            {
+                id: 2,
+                name: 'سارة علي',
+                role: 'مصممة',
+                avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah',
+                tasksCompleted: 38,
+                tasksInProgress: 8
+            },
+            {
+                id: 3,
+                name: 'خالد عمر',
+                role: 'مطور خلفي',
+                avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Khalid',
+                tasksCompleted: 52,
+                tasksInProgress: 3
+            }
+        ];
+    },
+    
+    add(member) {
+        const newMember = {
+            id: Date.now(),
+            tasksCompleted: 0,
+            tasksInProgress: 1,
+            ...member
+        };
+        this.members.push(newMember);
+        StorageManager.save('team', this.members);
+        this.renderTeamGrid();
+        return newMember;
+    },
+    
+    renderTeamGrid() {
+        const grid = document.getElementById('team-grid');
+        const empty = document.getElementById('empty-team');
+        
+        if (!grid) return;
+        
+        if (this.members.length === 0) {
+            grid.innerHTML = '';
+            if (empty) empty.classList.add('show');
+            return;
+        }
+        
+        if (empty) empty.classList.remove('show');
+        
+        grid.innerHTML = this.members.map((member, index) => `
+            <div class="team-member-card">
+                <img src="${member.avatar}" alt="${member.name}" class="member-avatar">
+                <h3 class="member-name">${member.name}</h3>
+                <p class="member-role">${member.role}</p>
+                <div class="member-stats">
+                    <div class="member-stat">
+                        <div class="member-stat-value">${member.tasksCompleted}</div>
+                        <div class="member-stat-label">مهام مكتملة</div>
+                    </div>
+                    <div class="member-stat">
+                        <div class="member-stat-value">${member.tasksInProgress}</div>
+                        <div class="member-stat-label">قيد العمل</div>
+                    </div>
+                </div>
+            </div>
+        `).join('');
+        
+        // تحديث أفضل الأعضاء في التحليلات
+        this.renderTopPerformers();
+    },
+    
+    renderTopPerformers() {
+        const container = document.getElementById('top-performers');
+        if (!container) return;
+        
+        const sorted = [...this.members].sort((a, b) => b.tasksCompleted - a.tasksCompleted).slice(0, 5);
+        
+        container.innerHTML = sorted.map((member, index) => `
+            <div class="performer-item">
+                <div class="performer-rank ${index === 0 ? 'gold' : index === 1 ? 'silver' : index === 2 ? 'bronze' : ''}">
+                    ${index + 1}
+                </div>
+                <div class="performer-info">
+                    <div class="performer-name">${member.name}</div>
+                    <div class="performer-tasks">${member.tasksCompleted} مهمة مكتملة</div>
+                </div>
+            </div>
+        `).join('');
+    }
+};
+
+// ============================================
+// إدارة النماذج المنبثقة
+// ============================================
+
+const ModalManager = {
+    open(modalId) {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.add('active');
+            document.body.style.overflow = 'hidden';
+        }
+    },
+    
+    close(modalId) {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+    },
+    
+    init() {
+        // إغلاق النماذج عند النقر على Overlay
+        document.querySelectorAll('.modal-overlay').forEach(overlay => {
+            overlay.addEventListener('click', () => {
+                const modal = overlay.closest('.modal');
+                if (modal) {
+                    this.close(modal.id);
+                }
+            });
+        });
+        
+        // إغلاق النماذج عند النقر على زر الإغلاق
+        document.querySelectorAll('.modal-close, .modal-cancel').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const modalId = btn.dataset.modal;
+                if (modalId) {
+                    this.close(modalId);
+                }
+            });
+        });
+        
+        // Escape لإغلاق النماذج
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                document.querySelectorAll('.modal.active').forEach(modal => {
+                    this.close(modal.id);
+                });
+            }
+        });
+    }
+};
+
+// ============================================
+// إدارة رسائل التنبيه
+// ============================================
+
+const ToastManager = {
+    show(message, type = 'info', duration = 3000) {
+        const container = document.getElementById('toast-container');
+        if (!container) return;
+        
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        
+        const icons = {
+            success: 'check-circle',
+            error: 'times-circle',
+            warning: 'exclamation-triangle',
+            info: 'info-circle'
+        };
+        
+        toast.innerHTML = `
+            <i class="fas fa-${icons[type]} toast-icon"></i>
+            <span class="toast-message">${message}</span>
+        `;
+        
+        container.appendChild(toast);
+        
+        setTimeout(() => {
+            toast.style.animation = 'toastSlideIn 0.3s ease reverse';
+            setTimeout(() => toast.remove(), 300);
+        }, duration);
+    }
+};
+
+// ============================================
+// إدارة الإعدادات
+// ============================================
+
+const SettingsManager = {
+    settings: {},
+    
+    init() {
+        this.settings = StorageManager.load('settings', {
+            darkMode: false,
+            primaryColor: 'blue',
+            fontSize: 'medium',
+            language: 'ar',
+            notifications: {
+                newTask: true,
+                dueDate: true,
+                comments: true,
+                email: false
+            }
+        });
+        
+        this.applySettings();
+        this.setupEventListeners();
+    },
+    
+    save() {
+        StorageManager.save('settings', this.settings);
+    },
+    
+    applySettings() {
+        // الوضع الداكن
+        if (this.settings.darkMode) {
+            document.body.setAttribute('data-theme', 'dark');
+            document.getElementById('dark-mode-toggle').checked = true;
+        } else {
+            document.body.removeAttribute('data-theme');
+            document.getElementById('dark-mode-toggle').checked = false;
+        }
+        
+        // اللون الرئيسي
+        document.body.setAttribute('data-color', this.settings.primaryColor);
+        document.querySelectorAll('.color-option').forEach(btn => {
+            btn.classList.toggle('active', btn.dataset.color === this.settings.primaryColor);
+        });
+        
+        // حجم الخط
+        document.body.setAttribute('data-font-size', this.settings.fontSize);
+        document.getElementById('font-size').value = this.settings.fontSize;
+        
+        // اللغة
+        document.getElementById('interface-language').value = this.settings.language;
+        document.getElementById('text-direction').value = this.settings.language === 'ar' ? 'rtl' : 'ltr';
+        
+        // الإشعارات
+        if (document.getElementById('notify-new-task')) {
+            document.getElementById('notify-new-task').checked = this.settings.notifications.newTask;
+        }
+        if (document.getElementById('notify-due-date')) {
+            document.getElementById('notify-due-date').checked = this.settings.notifications.dueDate;
+        }
+        if (document.getElementById('notify-comments')) {
+            document.getElementById('notify-comments').checked = this.settings.notifications.comments;
+        }
+        if (document.getElementById('notify-email')) {
+            document.getElementById('notify-email').checked = this.settings.notifications.email;
+        }
+        
+        // بيانات المستخدم
+        const user = StorageManager.load('user', {});
+        if (user.name) {
+            document.getElementById('settings-name').value = user.name;
+            document.getElementById('user-name').textContent = user.name;
+        }
+        if (user.email) {
+            document.getElementById('settings-email').value = user.email;
+        }
+    },
+    
+    setupEventListeners() {
+        // الوضع الداكن
+        document.getElementById('dark-mode-toggle')?.addEventListener('change', (e) => {
+            this.settings.darkMode = e.target.checked;
+            this.applySettings();
+            this.save();
+        });
+        
+        // الألوان
+        document.querySelectorAll('.color-option').forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.settings.primaryColor = btn.dataset.color;
+                this.applySettings();
+                this.save();
+                ToastManager.show('تم تغيير اللون بنجاح', 'success');
+            });
+        });
+        
+        // حجم الخط
+        document.getElementById('font-size')?.addEventListener('change', (e) => {
+            this.settings.fontSize = e.target.value;
+            this.applySettings();
+            this.save();
+        });
+        
+        // اللغة
+        document.getElementById('interface-language')?.addEventListener('change', (e) => {
+            this.settings.language = e.target.value;
+            this.applySettings();
+            this.save();
+            ToastManager.show('يرجى إعادة تحميل الصفحة لتطبيق التغييرات', 'info');
+        });
+        
+        // الإشعارات
+        document.getElementById('notify-new-task')?.addEventListener('change', (e) => {
+            this.settings.notifications.newTask = e.target.checked;
+            this.save();
+        });
+        
+        document.getElementById('notify-due-date')?.addEventListener('change', (e) => {
+            this.settings.notifications.dueDate = e.target.checked;
+            this.save();
+        });
+        
+        document.getElementById('notify-comments')?.addEventListener('change', (e) => {
+            this.settings.notifications.comments = e.target.checked;
+            this.save();
+        });
+        
+        document.getElementById('notify-email')?.addEventListener('change', (e) => {
+            this.settings.notifications.email = e.target.checked;
+            this.save();
+        });
+        
+        // نموذج الملف الشخصي
+        document.getElementById('profile-form')?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const user = {
+                name: document.getElementById('settings-name').value,
+                email: document.getElementById('settings-email').value,
+                phone: document.getElementById('settings-phone').value,
+                bio: document.getElementById('settings-bio').value
+            };
+            StorageManager.save('user', user);
+            document.getElementById('user-name').textContent = user.name || 'مستخدم جديد';
+            ToastManager.show('تم حفظ التغييرات بنجاح', 'success');
+        });
+        
+        // نموذج كلمة المرور
+        document.getElementById('security-form')?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const current = document.getElementById('current-password').value;
+            const newPass = document.getElementById('new-password').value;
+            const confirm = document.getElementById('confirm-new-password').value;
+            
+            if (!current) {
+                ToastManager.show('الرجاء إدخال كلمة المرور الحالية', 'error');
+                return;
+            }
+            
+            if (newPass !== confirm) {
+                ToastManager.show('كلمتا المرور غير متطابقتين', 'error');
+                return;
+            }
+            
+            if (newPass.length < 6) {
+                ToastManager.show('كلمة المرور يجب أن تكون 6 أحرف على الأقل', 'error');
+                return;
+            }
+            
+            ToastManager.show('تم تغيير كلمة المرور بنجاح', 'success');
+            e.target.reset();
+        });
+        
+        // قوائم الإعدادات
+        document.querySelectorAll('.settings-sidebar li').forEach(item => {
+            item.addEventListener('click', () => {
+                const settingsId = item.dataset.settings;
+                
+                document.querySelectorAll('.settings-sidebar li').forEach(li => li.classList.remove('active'));
+                document.querySelectorAll('.settings-panel').forEach(panel => panel.classList.remove('active'));
+                
+                item.classList.add('active');
+                document.getElementById(`settings-${settingsId}`)?.classList.add('active');
+            });
+        });
+    }
+};
+
+// ============================================
+// إدارة المصادقة
+// ============================================
+
+const AuthManager = {
+    user: null,
+    
+    init() {
+        this.user = StorageManager.load('currentUser', null);
+        
+        if (this.user) {
+            this.showMainApp();
+        } else {
+            this.showLoginPage();
+        }
+        
+        this.setupEventListeners();
+    },
+    
+    login(email, password) {
+        // محاكاة تسجيل الدخول
+        if (email && password.length >= 6) {
+            this.user = {
+                email: email,
+                name: email.split('@')[0],
+                avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${email}`
+            };
+            StorageManager.save('currentUser', this.user);
+            this.showMainApp();
+            ToastManager.show('مرحباً بعودتك!', 'success');
+            return true;
+        }
+        ToastManager.show('البريد الإلكتروني أو كلمة المرور غير صحيحة', 'error');
+        return false;
+    },
+    
+    register(name, email, password) {
+        if (name && email && password.length >= 6) {
+            this.user = {
+                name: name,
+                email: email,
+                avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`
+            };
+            StorageManager.save('currentUser', this.user);
+            this.showMainApp();
+            ToastManager.show('تم إنشاء حسابك بنجاح!', 'success');
+            return true;
+        }
+        ToastManager.show('الرجاء تعبئة جميع الحقول بشكل صحيح', 'error');
+        return false;
+    },
+    
+    logout() {
+        this.user = null;
+        StorageManager.remove('currentUser');
+        this.showLoginPage();
+        ToastManager.show('تم تسجيل الخروج بنجاح', 'info');
+    },
+    
+    showLoginPage() {
+        document.getElementById('login-page').classList.remove('hidden');
+        document.getElementById('main-app').classList.add('hidden');
+        document.getElementById('loading-screen').classList.add('hidden');
+    },
+    
+    showMainApp() {
+        document.getElementById('login-page').classList.add('hidden');
+        document.getElementById('main-app').classList.remove('hidden');
+        document.getElementById('loading-screen').classList.add('hidden');
+        
+        if (this.user) {
+            document.getElementById('user-name').textContent = this.user.name || 'مستخدم جديد';
+        }
+    },
+    
+    setupEventListeners() {
+        // نموذج تسجيل الدخول
+        document.getElementById('login-form')?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const email = document.getElementById('login-email').value;
+            const password = document.getElementById('login-password').value;
+            this.login(email, password);
+        });
+        
+        // نموذج التسجيل
+        document.getElementById('register-form')?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const name = document.getElementById('register-name').value;
+            const email = document.getElementById('register-email').value;
+            const password = document.getElementById('register-password').value;
+            const confirm = document.getElementById('register-confirm').value;
+            
+            if (password !== confirm) {
+                ToastManager.show('كلمتا المرور غير متطابقتين', 'error');
+                return;
+            }
+            
+            this.register(name, email, password);
+        });
+        
+        // التبديل بين تسجيل الدخول والتسجيل
+        document.getElementById('show-register')?.addEventListener('click', (e) => {
+            e.preventDefault();
+            document.getElementById('login-form').classList.add('hidden');
+            document.getElementById('register-form').classList.remove('hidden');
+        });
+        
+        document.getElementById('show-login')?.addEventListener('click', (e) => {
+            e.preventDefault();
+            document.getElementById('register-form').classList.add('hidden');
+            document.getElementById('login-form').classList.remove('hidden');
+        });
+        
+        // تسجيل الخروج
+        document.getElementById('logout-btn')?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.logout();
+        });
+        
+        // تسجيل الخروج من قائمة المستخدم
+        document.querySelectorAll('[data-action="logout"]').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.logout();
+            });
+        });
+        
+        // الانتقال إلى الإعدادات من قائمة المستخدم
+        document.querySelector('[data-action="settings"]')?.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.switchView('settings');
+        });
+    },
+    
+    switchView(viewName) {
+        document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+        document.querySelectorAll('.sidebar-nav li').forEach(l => l.classList.remove('active'));
+        
+        const view = document.getElementById(`${viewName}-view`);
+        const navItem = document.querySelector(`.sidebar-nav li[data-view="${viewName}"]`);
+        
+        if (view) view.classList.add('active');
+        if (navItem) navItem.classList.add('active');
+        
+        // إغلاق القائمة المنسدلة
+        document.getElementById('user-menu')?.classList.remove('active');
+    }
+};
+
+// ============================================
+// إدارة التنقل وال��رض
+// ============================================
+
+const NavigationManager = {
+    init() {
+        // التنقل في الشريط الجانبي
+        document.querySelectorAll('.sidebar-nav li, .sidebar-footer li').forEach(item => {
+            item.addEventListener('click', (e) => {
+                e.preventDefault();
+                const viewName = item.dataset.view;
+                if (viewName) {
+                    this.switchView(viewName);
+                }
+            });
+        });
+        
+        // قائمة المستخدم
+        document.getElementById('user-btn')?.addEventListener('click', () => {
+            document.getElementById('user-menu')?.classList.toggle('active');
+        });
+        
+        // قائمة الإشعارات
+        document.getElementById('notifications-btn')?.addEventListener('click', () => {
+            document.getElementById('notifications-menu')?.classList.toggle('active');
+        });
+        
+        // تعليم جميع الإشعارات كمقروءة
+        document.querySelector('.mark-all-read')?.addEventListener('click', () => {
+            NotificationManager.markAllAsRead();
+            ToastManager.show('تم تعليم جميع الإشعارات كمقروءة', 'success');
+        });
+        
+        // تبديل الشريط الجانبي
+        document.getElementById('sidebar-toggle')?.addEventListener('click', () => {
+            document.getElementById('sidebar').classList.toggle('collapsed');
+            document.body.classList.toggle('sidebar-collapsed');
+        });
+        
+        // قائمة الجوال
+        document.getElementById('menu-toggle')?.addEventListener('click', () => {
+            document.getElementById('sidebar').classList.toggle('active');
+        });
+        
+        // إغلاق القوائم عند النقر خارجها
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.user-dropdown')) {
+                document.getElementById('user-menu')?.classList.remove('active');
+            }
+            if (!e.target.closest('.notifications-dropdown')) {
+                document.getElementById('notifications-menu')?.classList.remove('active');
+            }
+            if (!e.target.closest('.sidebar') && !e.target.closest('.menu-toggle')) {
+                document.getElementById('sidebar')?.classList.remove('active');
+            }
+        });
+        
+        // فلاتر المهام
+        document.getElementById('task-filter-project')?.addEventListener('change', () => {
+            TaskManager.renderTasksList();
+        });
+        
+        document.getElementById('task-filter-status')?.addEventListener('change', () => {
+            TaskManager.renderTasksList();
+        });
+        
+        document.getElementById('task-filter-priority')?.addEventListener('change', () => {
+            TaskManager.renderTasksList();
+        });
+        
+        // فلتر كانبان
+        document.getElementById('kanban-project-filter')?.addEventListener('change', () => {
+            TaskManager.renderKanbanBoard();
+        });
+        
+        // أزرار "عرض الكل"
+        document.querySelectorAll('.view-all').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.preventDefault();
+                const view = btn.dataset.view;
+                if (view) {
+                    this.switchView(view);
+                }
+            });
+        });
+    },
+    
+    switchView(viewName) {
+        document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+        document.querySelectorAll('.sidebar-nav li').forEach(l => l.classList.remove('active'));
+        
+        const view = document.getElementById(`${viewName}-view`);
+        const navItem = document.querySelector(`.sidebar-nav li[data-view="${viewName}"]`);
+        
+        if (view) {
+            view.classList.add('active');
+            this.updateViewTitle(viewName);
+        }
+        
+        if (navItem) navItem.classList.add('active');
+        
+        // تهيئة التقويم إذا تم عرضه
+        if (viewName === 'calendar') {
+            TaskManager.renderCalendar();
+        }
+    },
+    
+    updateViewTitle(viewName) {
+        const titles = {
+            dashboard: 'لوحة التحكم',
+            tasks: 'المهام',
+            projects: 'المشاريع',
+            kanban: 'لوحة كانبان',
+            calendar: 'التقويم',
+            team: 'الفريق',
+            analytics: 'التحليلات',
+            settings: 'الإعدادات'
+        };
+        
+        const viewHeader = document.querySelector('#dashboard-view.active .view-header h1');
+        if (viewHeader && titles[viewName]) {
+            viewHeader.textContent = titles[viewName];
+        }
+    }
+};
+
+// ============================================
+// إدارة النماذج
+// ============================================
+
+const FormManager = {
+    init() {
+        // نموذج المهمة
+        document.getElementById('task-form')?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            
+            const taskData = {
+                title: document.getElementById('task-title').value,
+                description: document.getElementById('task-description').value,
+                projectId: parseInt(document.getElementById('task-project-select').value) || null,
+                priority: document.getElementById('task-priority').value,
+                dueDate: document.getElementById('task-due-date').value,
+                status: document.getElementById('task-status').value,
+                featured: document.getElementById('task-featured').checked
+            };
+            
+            const taskId = document.getElementById('task-id').value;
+            
+            if (taskId) {
+                TaskManager.update(parseInt(taskId), taskData);
+                ToastManager.show('تم تحديث المهمة بنجاح', 'success');
+            } else {
+                TaskManager.add(taskData);
+                ToastManager.show('تم إضافة المهمة بنجاح', 'success');
+            }
+            
+            ModalManager.close('task-modal');
+            e.target.reset();
+        });
+        
+        // نموذج المشروع
+        document.getElementById('project-form')?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            
+            const projectData = {
+                name: document.getElementById('project-name').value,
+                description: document.getElementById('project-description').value,
+                color: document.getElementById('project-color').value,
+                deadline: document.getElementById('project-deadline').value
+            };
+            
+            const projectId = document.getElementById('project-id').value;
+            
+            if (projectId) {
+                ProjectManager.update(parseInt(projectId), projectData);
+                ToastManager.show('تم تحديث المشروع بنجاح', 'success');
+            } else {
+                ProjectManager.add(projectData);
+                ToastManager.show('تم إنشاء المشروع بنجاح', 'success');
+            }
+            
+            ModalManager.close('project-modal');
+            e.target.reset();
+        });
+        
+        // نموذج دعوة عضو
+        document.getElementById('invite-form')?.addEventListener('submit', (e) => {
+            e.preventDefault();
+            
+            const inviteData = {
+                email: document.getElementById('invite-email').value,
+                role: document.getElementById('invite-role').value
+            };
+            
+            // محاكاة إرسال الدعوة
+            ToastManager.show(`تم إرسال الدعوة إلى ${inviteData.email}`, 'success');
+            ModalManager.close('invite-modal');
+            e.target.reset();
+        });
+    }
+};
+
+// ============================================
+// إدارة الأزرار والإجراءات
+// ============================================
+
+const ActionManager = {
+    init() {
+        // إضافة مهمة جديدة
+        document.getElementById('new-task-btn')?.addEventListener('click', () => this.openTaskModal());
+        document.getElementById('add-task-btn')?.addEventListener('click', () => this.openTaskModal());
+        document.getElementById('empty-add-task')?.addEventListener('click', () => this.openTaskModal());
+        document.getElementById('quick-add')?.addEventListener('click', () => this.toggleQuickAdd());
+        
+        // إضافة مهمة سريعة
+        document.getElementById('quick-task-add')?.addEventListener('click', () => this.addQuickTask());
+        document.getElementById('quick-task-input')?.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.addQuickTask();
+        });
+        
+        // إضافة مشروع جديد
+        document.getElementById('add-project-btn')?.addEventListener('click', () => this.openProjectModal());
+        document.getElementById('empty-add-project')?.addEventListener('click', () => this.openProjectModal());
+        
+        // دعوة عضو للفريق
+        document.getElementById('invite-member-btn')?.addEventListener('click', () => {
+            ModalManager.open('invite-modal');
+        });
+        document.getElementById('empty-invite')?.addEventListener('click', () => {
+            ModalManager.open('invite-modal');
+        });
+        
+        // إضافة مهمة لعمود كانبان
+        document.querySelectorAll('.add-task-to-column').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const status = btn.dataset.status;
+                document.getElementById('task-status').value = status;
+                this.openTaskModal();
+            });
+        });
+        
+        // التنقل في التقويم
+        document.getElementById('calendar-prev')?.addEventListener('click', () => this.navigateCalendar(-1));
+        document.getElementById('calendar-next')?.addEventListener('click', () => this.navigateCalendar(1));
+        document.getElementById('today-btn')?.addEventListener('click', () => {
+            window.currentMonth = new Date().getMonth();
+            window.currentYear = new Date().getFullYear();
+            TaskManager.renderCalendar();
+        });
+        
+        // ملء بيانات الاختبار
+        document.getElementById('google-login')?.addEventListener('click', () => {
+            AuthManager.login('demo@gmail.com', '123456');
+        });
+        
+        document.getElementById('github-login')?.addEventListener('click', () => {
+            AuthManager.login('demo@github.com', '123456');
+        });
+    },
+    
+    openTaskModal() {
+        document.getElementById('task-id').value = '';
+        document.getElementById('task-form').reset();
+        document.getElementById('task-modal-title').textContent = 'إضافة مهمة جديدة';
+        ModalManager.open('task-modal');
+    },
+    
+    openProjectModal() {
+        document.getElementById('project-id').value = '';
+        document.getElementById('project-form').reset();
+        document.getElementById('project-modal-title').textContent = 'إنشاء مشروع جديد';
+        ModalManager.open('project-modal');
+    },
+    
+    toggleQuickAdd() {
+        const popup = document.getElementById('quick-add-popup');
+        popup?.classList.toggle('hidden');
+        if (!popup?.classList.contains('hidden')) {
+            document.getElementById('quick-task-input')?.focus();
+        }
+    },
+    
+    addQuickTask() {
+        const input = document.getElementById('quick-task-input');
+        const title = input.value.trim();
+        
+        if (title) {
+            TaskManager.add({
+                title: title,
+                priority: 'medium',
+                projectId: ProjectManager.projects[0]?.id || null
+            });
+            ToastManager.show('تم إضافة المهمة', 'success');
+            input.value = '';
+        }
+    },
+    
+    navigateCalendar(direction) {
+        const now = new Date();
+        const currentMonth = parseInt(window.currentMonth || now.getMonth());
+        const currentYear = parseInt(window.currentYear || now.getFullYear());
+        
+        let newMonth = currentMonth + direction;
+        let newYear = currentYear;
+        
+        if (newMonth > 11) {
+            newMonth = 0;
+            newYear++;
+        } else if (newMonth < 0) {
+            newMonth = 11;
+            newYear--;
+        }
+        
+        window.currentMonth = newMonth;
+        window.currentYear = newYear;
+        TaskManager.renderCalendar();
+    }
+};
+
+// ============================================
+// إدارة الرسوم البيانية
+// ============================================
+
+const ChartManager = {
+    charts: {},
+    
+    init() {
+        this.renderTasksChart();
+        this.renderPriorityChart();
+    },
+    
+    renderTasksChart() {
+        const ctx = document.getElementById('tasks-chart');
+        if (!ctx) return;
+        
+        const tasks = TaskManager.tasks;
+        const completed = tasks.filter(t => t.status === 'completed').length;
+        const inProgress = tasks.filter(t => t.status === 'in-progress').length;
+        const pending = tasks.filter(t => t.status === 'pending').length;
+        
+        if (this.charts.tasks) {
+            this.charts.tasks.destroy();
+        }
+        
+        this.charts.tasks = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['مكتمل', 'قيد العمل', 'قيد الانتظار'],
+                datasets: [{
+                    label: 'عدد المهام',
+                    data: [completed, inProgress, pending],
+                    backgroundColor: ['#28a745', '#4a90d9', '#ffc107'],
+                    borderRadius: 8
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            stepSize: 1
+                        }
+                    }
+                }
+            }
+        });
+    },
+    
+    renderPriorityChart() {
+        const ctx = document.getElementById('priority-chart');
+        if (!ctx) return;
+        
+        const tasks = TaskManager.tasks;
+        const high = tasks.filter(t => t.priority === 'high').length;
+        const medium = tasks.filter(t => t.priority === 'medium').length;
+        const low = tasks.filter(t => t.priority === 'low').length;
+        
+        if (this.charts.priority) {
+            this.charts.priority.destroy();
+        }
+        
+        this.charts.priority = new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                labels: ['عالية', 'متوسطة', 'منخفضة'],
+                datasets: [{
+                    data: [high, medium, low],
+                    backgroundColor: ['#dc3545', '#ffc107', '#28a745'],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }
+        });
+        
+        // تحديث معدل الإنجاز
+        const total = tasks.length || 1;
+        const completed = tasks.filter(t => t.status === 'completed').length;
+        const rate = Math.round((completed / total) * 100);
+        
+        const completionCircle = document.getElementById('completion-circle');
+        const completionValue = document.getElementById('completion-rate-value');
+        
+        if (completionCircle) {
+            const circumference = 283;
+            const offset = circumference - (rate / 100) * circumference;
+            completionCircle.style.strokeDashoffset = offset;
+        }
+        
+        if (completionValue) {
+            completionValue.textContent = rate;
+        }
+    }
+};
+
+// ============================================
+// التهيئة الرئيسية
+// ============================================
+
+document.addEventListener('DOMContentLoaded', () => {
+    // إظهار شاشة التحميل قليلاً ثم إخفاؤها
+    setTimeout(() => {
+        document.getElementById('loading-screen').classList.add('hidden');
+    }, 1500);
+    
+    // تهيئة جميع المديرين
+    AuthManager.init();
+    ProjectManager.init();
+    TaskManager.init();
+    TeamManager.init();
+    NotificationManager.init();
+    SettingsManager.init();
+    ModalManager.init();
+    NavigationManager.init();
+    FormManager.init();
+    ActionManager.init();
+    ChartManager.init();
+    
+    // تهيئة التقويم
+    window.currentMonth = new Date().getMonth();
+    window.currentYear = new Date().getFullYear();
+    
+    console.log('✅ تم تهيئة TaskFlow Pro بنجاح');
+});
+
+// تصدير الدوال العالمية للاستخدام في HTML
+window.ProjectManager = ProjectManager;
+window.TaskManager = TaskManager;
+window.ModalManager = ModalManager;
+window.ToastManager = ToastManager;
+window.AuthManager = AuthManager;

styles.css

@@ -0,0 +1,2778 @@
+/* 
+  TaskFlow Pro - Professional Task Management Application
+  ========================================================
+  Stylesheet - Professional Arabic Design (RTL)
+  Author: MiniMax Agent
+  Version: 2.0
+*/
+
+/* ============================================
+   المتغيرات الأساسية والثيمات
+   ============================================ */
+
+:root {
+    /* الألوان الرئيسية */
+    --primary-color: #4a90d9;
+    --primary-hover: #3a7bc8;
+    --primary-light: #e8f2fc;
+    
+    /* ألوان الحالة */
+    --success-color: #28a745;
+    --success-light: #d4edda;
+    --warning-color: #ffc107;
+    --warning-light: #fff3cd;
+    --danger-color: #dc3545;
+    --danger-light: #f8d7da;
+    --info-color: #17a2b8;
+    --info-light: #d1ecf1;
+    
+    /* ألوان الأولوية */
+    --high-priority: #dc3545;
+    --medium-priority: #ffc107;
+    --low-priority: #28a745;
+    
+    /* ألوان الخلفية */
+    --bg-primary: #f8f9fa;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #e9ecef;
+    --bg-dark: #343a40;
+    
+    /* ألوان النص */
+    --text-primary: #212529;
+    --text-secondary: #6c757d;
+    --text-muted: #adb5bd;
+    --text-light: #ffffff;
+    
+    /* الحدود والظلال */
+    --border-color: #dee2e6;
+    --border-radius: 8px;
+    --border-radius-lg: 12px;
+    --border-radius-sm: 4px;
+    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    --box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
+    
+    /* الانتقالات */
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.25s ease;
+    --transition-slow: 0.4s ease;
+    
+    /* المسافات */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    
+    /* أحجام الخطوط */
+    --font-size-xs: 12px;
+    --font-size-sm: 14px;
+    --font-size-md: 16px;
+    --font-size-lg: 18px;
+    --font-size-xl: 24px;
+    --font-size-xxl: 32px;
+    
+    /* عرض الشريط الجانبي */
+    --sidebar-width: 260px;
+    --sidebar-collapsed: 70px;
+    
+    /* ارتفاع الرأس العلوي */
+    --header-height: 70px;
+}
+
+/* الوضع الداكن */
+[data-theme="dark"] {
+    --bg-primary: #1a1d21;
+    --bg-secondary: #222629;
+    --bg-tertiary: #2d3238;
+    --bg-dark: #16191c;
+    
+    --text-primary: #e9ecef;
+    --text-secondary: #adb5bd;
+    --text-muted: #6c757d;
+    
+    --border-color: #3d4248;
+    
+    --primary-light: #1e3a5f;
+    --success-light: #1e3d2f;
+    --warning-light: #3d3a1f;
+    --danger-light: #3d1e22;
+    --info-light: #1e3d3f;
+}
+
+/* ألوان مخصصة حسب اختيار المستخدم */
+[data-color="green"] {
+    --primary-color: #28a745;
+    --primary-hover: #218838;
+    --primary-light: #d4edda;
+}
+
+[data-color="purple"] {
+    --primary-color: #6f42c1;
+    --primary-hover: #5a32a3;
+    --primary-light: #e2d9f3;
+}
+
+[data-color="orange"] {
+    --primary-color: #fd7e14;
+    --primary-hover: #e66a02;
+    --primary-light: #ffe5d0;
+}
+
+[data-color="pink"] {
+    --primary-color: #e83e8c;
+    --primary-hover: #d62c7a;
+    --primary-light: #f5d6e8;
+}
+
+/* ============================================
+   الإعدادات الأساسية
+   ============================================ */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+    direction: rtl;
+    transition: background-color var(--transition-normal), color var(--transition-normal);
+}
+
+/* أحجام الخطوط */
+body[data-font-size="small"] {
+    font-size: 14px;
+}
+
+body[data-font-size="large"] {
+    font-size: 18px;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+ul {
+    list-style: none;
+}
+
+button {
+    font-family: inherit;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    background: none;
+}
+
+input, select, textarea {
+    font-family: inherit;
+    font-size: inherit;
+    outline: none;
+    border: none;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* ============================================
+   شاشة التحميل
+   ============================================ */
+
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, var(--primary-color), #2d6cb5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    transition: opacity 0.5s ease, visibility 0.5s ease;
+}
+
+.loading-screen.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.loading-content {
+    text-align: center;
+    color: white;
+}
+
+.loading-spinner {
+    width: 60px;
+    height: 60px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    margin: 0 auto 20px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading-content h2 {
+    font-size: var(--font-size-xl);
+    margin-bottom: 10px;
+}
+
+.loading-content p {
+    opacity: 0.9;
+}
+
+/* ============================================
+   صفحة تسجيل الدخول
+   ============================================ */
+
+.login-page {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, var(--primary-color) 0%, #2d6cb5 100%);
+    padding: 20px;
+}
+
+.login-page.hidden {
+    display: none;
+}
+
+.login-container {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow-lg);
+    width: 100%;
+    max-width: 420px;
+    padding: 40px;
+    animation: slideUp 0.5s ease;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.login-header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.login-header .logo {
+    width: 80px;
+    height: 80px;
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 15px;
+    font-size: 36px;
+    color: white;
+    box-shadow: 0 8px 20px rgba(74, 144, 217, 0.3);
+}
+
+.login-header h1 {
+    font-size: var(--font-size-xl);
+    color: var(--text-primary);
+    margin-bottom: 5px;
+}
+
+.login-header p {
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+}
+
+.login-form {
+    animation: fadeIn 0.3s ease;
+}
+
+.login-form.hidden {
+    display: none;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.form-group {
+    margin-bottom: 20px;
+    position: relative;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: var(--text-primary);
+    font-size: var(--font-size-sm);
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 14px 16px;
+    padding-left: 45px;
+    border: 2px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: var(--font-size-md);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.form-group textarea {
+    min-height: 120px;
+    resize: vertical;
+    padding-left: 16px;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px var(--primary-light);
+}
+
+.form-group input::placeholder {
+    color: var(--text-muted);
+}
+
+.form-group > i {
+    position: absolute;
+    right: 16px;
+    bottom: 14px;
+    color: var(--text-muted);
+    font-size: var(--font-size-md);
+}
+
+.form-group input:focus + i,
+.form-group:has(input:focus) > i {
+    color: var(--primary-color);
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+/* الأزرار */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 24px;
+    border-radius: var(--border-radius);
+    font-weight: 600;
+    font-size: var(--font-size-md);
+    transition: all var(--transition-fast);
+    cursor: pointer;
+    border: none;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
+    color: white;
+    box-shadow: 0 4px 12px rgba(74, 144, 217, 0.3);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(74, 144, 217, 0.4);
+}
+
+.btn-secondary {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+    background: var(--border-color);
+}
+
+.btn-block {
+    width: 100%;
+}
+
+.btn-icon {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border-radius: var(--border-radius);
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+}
+
+.btn-icon:hover {
+    background: var(--border-color);
+}
+
+.btn-social {
+    width: 100%;
+    margin-bottom: 12px;
+    padding: 14px;
+    border-radius: var(--border-radius);
+    font-weight: 500;
+}
+
+.btn-google {
+    background: #db4437;
+    color: white;
+}
+
+.btn-github {
+    background: #24292e;
+    color: white;
+}
+
+.login-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 20px 0;
+    font-size: var(--font-size-sm);
+}
+
+.remember-me {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.remember-me input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    accent-color: var(--primary-color);
+}
+
+.forgot-password {
+    color: var(--primary-color);
+    transition: color var(--transition-fast);
+}
+
+.forgot-password:hover {
+    color: var(--primary-hover);
+}
+
+.divider {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+}
+
+.divider::before,
+.divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--border-color);
+}
+
+.divider span {
+    padding: 0 15px;
+    color: var(--text-muted);
+    font-size: var(--font-size-sm);
+}
+
+.signup-link {
+    text-align: center;
+    margin-top: 20px;
+    color: var(--text-secondary);
+}
+
+.signup-link a {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+/* ============================================
+   التطبيق الرئيسي
+   ============================================ */
+
+.main-app {
+    display: flex;
+    min-height: 100vh;
+}
+
+.main-app.hidden {
+    display: none;
+}
+
+/* الشريط الجانبي */
+.sidebar {
+    width: var(--sidebar-width);
+    background: var(--bg-secondary);
+    border-left: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    transition: width var(--transition-normal);
+    box-shadow: var(--box-shadow);
+}
+
+.sidebar.collapsed {
+    width: var(--sidebar-collapsed);
+}
+
+.sidebar.collapsed .logo span,
+.sidebar.collapsed nav span,
+.sidebar.collapsed .sidebar-footer span {
+    display: none;
+}
+
+.sidebar-header {
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar .logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: var(--font-size-lg);
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+.sidebar .logo i {
+    font-size: 28px;
+}
+
+.sidebar-toggle {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+}
+
+.sidebar-toggle:hover {
+    background: var(--primary-color);
+    color: white;
+}
+
+.sidebar-nav {
+    flex: 1;
+    padding: 20px 0;
+    overflow-y: auto;
+}
+
+.sidebar-nav ul {
+    padding: 0 12px;
+}
+
+.sidebar-nav li {
+    margin-bottom: 4px;
+}
+
+.sidebar-nav a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: var(--border-radius);
+    color: var(--text-secondary);
+    font-weight: 500;
+    transition: all var(--transition-fast);
+}
+
+.sidebar-nav a i {
+    width: 24px;
+    text-align: center;
+    font-size: var(--font-size-md);
+}
+
+.sidebar-nav li.active a,
+.sidebar-nav a:hover {
+    background: var(--primary-light);
+    color: var(--primary-color);
+}
+
+.sidebar-footer {
+    padding: 20px 0;
+    border-top: 1px solid var(--border-color);
+}
+
+.sidebar-footer ul {
+    padding: 0 12px;
+}
+
+.sidebar-footer li {
+    margin-bottom: 4px;
+}
+
+/* المحتوى الرئيسي */
+.main-content {
+    flex: 1;
+    margin-right: var(--sidebar-width);
+    transition: margin-right var(--transition-normal);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+body.sidebar-collapsed .main-content {
+    margin-right: var(--sidebar-collapsed);
+}
+
+/* الرأس العلوي */
+.main-header {
+    height: var(--header-height);
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.menu-toggle {
+    display: none;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--border-radius);
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    font-size: var(--font-size-lg);
+}
+
+.search-box {
+    position: relative;
+}
+
+.search-box i {
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+}
+
+.search-box input {
+    width: 300px;
+    padding: 10px 16px;
+    padding-right: 45px;
+    border: 1px solid var(--border-color);
+    border-radius: 25px;
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    transition: all var(--transition-fast);
+}
+
+.search-box input:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px var(--primary-light);
+    width: 350px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.action-btn {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: all var(--transition-fast);
+}
+
+.action-btn:hover {
+    background: var(--primary-light);
+    color: var(--primary-color);
+}
+
+.action-btn .badge {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    width: 20px;
+    height: 20px;
+    background: var(--danger-color);
+    color: white;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.user-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 12px 6px 20px;
+    border-radius: 25px;
+    background: var(--bg-tertiary);
+    transition: all var(--transition-fast);
+}
+
+.user-btn:hover {
+    background: var(--border-color);
+}
+
+.user-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.user-name {
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.user-btn i {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+/* القوائم المنسدلة */
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow-lg);
+    min-width: 200px;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: all var(--transition-fast);
+    z-index: 1000;
+}
+
+.dropdown-menu.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(5px);
+}
+
+.notifications-menu {
+    left: auto;
+    right: 0;
+    width: 350px;
+    max-height: 400px;
+    overflow: hidden;
+}
+
+.dropdown-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.dropdown-header h4 {
+    font-size: var(--font-size-md);
+    color: var(--text-primary);
+}
+
+.mark-all-read {
+    font-size: var(--font-size-sm);
+    color: var(--primary-color);
+    cursor: pointer;
+}
+
+.notifications-list {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.notification-item {
+    padding: 12px 15px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    gap: 12px;
+    cursor: pointer;
+    transition: background var(--transition-fast);
+}
+
+.notification-item:hover {
+    background: var(--bg-tertiary);
+}
+
+.notification-item.unread {
+    background: var(--primary-light);
+}
+
+.notification-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.notification-icon.task {
+    background: var(--primary-light);
+    color: var(--primary-color);
+}
+
+.notification-icon.comment {
+    background: var(--info-light);
+    color: var(--info-color);
+}
+
+.notification-icon.project {
+    background: var(--success-light);
+    color: var(--success-color);
+}
+
+.notification-content h5 {
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.notification-content p {
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    margin-bottom: 4px;
+}
+
+.notification-time {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+.user-menu {
+    left: auto;
+    right: 0;
+    min-width: 180px;
+    padding: 8px 0;
+}
+
+.user-menu a {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 15px;
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+}
+
+.user-menu a:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.user-menu a i {
+    width: 20px;
+    text-align: center;
+}
+
+.user-menu .divider {
+    margin: 8px 15px;
+    height: 1px;
+    background: var(--border-color);
+}
+
+/* منطقة المحتوى */
+.content-area {
+    flex: 1;
+    padding: 24px;
+    overflow-y: auto;
+}
+
+/* العروض */
+.view {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+.view.active {
+    display: block;
+}
+
+.view-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+}
+
+.view-header h1 {
+    font-size: var(--font-size-xxl);
+    color: var(--text-primary);
+}
+
+.view-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.filter-group {
+    display: flex;
+    gap: 10px;
+}
+
+.filter-group select {
+    padding: 10px 15px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    cursor: pointer;
+    min-width: 150px;
+}
+
+/* ============================================
+   لوحة التحكم
+   ============================================ */
+
+.dashboard-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
+}
+
+.stat-card {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    padding: 24px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    box-shadow: var(--box-shadow);
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.stat-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--box-shadow-lg);
+}
+
+.stat-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+}
+
+.stat-icon.blue {
+    background: var(--primary-light);
+    color: var(--primary-color);
+}
+
+.stat-icon.green {
+    background: var(--success-light);
+    color: var(--success-color);
+}
+
+.stat-icon.orange {
+    background: var(--warning-light);
+    color: #d39e00;
+}
+
+.stat-icon.purple {
+    background: #f3e8ff;
+    color: #9333ea;
+}
+
+.stat-info h3 {
+    font-size: var(--font-size-xxl);
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.stat-info p {
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+}
+
+.dashboard-content {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 24px;
+}
+
+.dashboard-main {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.dashboard-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+/* البطاقات */
+.card {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.card-header h3 {
+    font-size: var(--font-size-lg);
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.card-header h3 i {
+    color: var(--primary-color);
+}
+
+.view-all {
+    color: var(--primary-color);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    transition: color var(--transition-fast);
+}
+
+.view-all:hover {
+    color: var(--primary-hover);
+}
+
+.card-body {
+    padding: 20px;
+}
+
+/* شريط التقدم */
+.progress-chart {
+    padding: 10px 0;
+}
+
+.progress-bar-container {
+    margin-bottom: 20px;
+}
+
+.progress-label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.progress-bar {
+    height: 12px;
+    background: var(--bg-tertiary);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
+    border-radius: 6px;
+    width: 0%;
+    transition: width 1s ease;
+}
+
+.chart-legend {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+.legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.legend-color.completed {
+    background: var(--success-color);
+}
+
+.legend-color.in-progress {
+    background: var(--primary-color);
+}
+
+.legend-color.pending {
+    background: var(--warning-color);
+}
+
+/* قوائم المهام */
+.featured-tasks,
+.today-tasks {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.task-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: var(--bg-primary);
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.task-item:hover {
+    background: var(--bg-tertiary);
+}
+
+.task-item.completed .task-text {
+    text-decoration: line-through;
+    color: var(--text-muted);
+}
+
+.task-checkbox {
+    width: 22px;
+    height: 22px;
+    border: 2px solid var(--border-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+}
+
+.task-checkbox:hover {
+    border-color: var(--primary-color);
+}
+
+.task-item.completed .task-checkbox {
+    background: var(--success-color);
+    border-color: var(--success-color);
+    color: white;
+}
+
+.task-text {
+    flex: 1;
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.task-priority-badge {
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+}
+
+.task-priority-badge.high {
+    background: var(--danger-light);
+    color: var(--danger-color);
+}
+
+.task-priority-badge.medium {
+    background: var(--warning-light);
+    color: #856404;
+}
+
+.task-priority-badge.low {
+    background: var(--success-light);
+    color: var(--success-color);
+}
+
+/* توزيع المهام */
+.tasks-distribution {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.distribution-item {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.distribution-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+.distribution-bar {
+    height: 8px;
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.distribution-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 1s ease;
+}
+
+.distribution-fill.high {
+    background: var(--high-priority);
+}
+
+.distribution-fill.medium {
+    background: var(--medium-priority);
+}
+
+.distribution-fill.low {
+    background: var(--low-priority);
+}
+
+/* ============================================
+   عرض المهام
+   ============================================ */
+
+.tasks-container {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+}
+
+.tasks-header {
+    display: grid;
+    grid-template-columns: 40px 2fr 1fr 100px 120px 120px 100px;
+    gap: 16px;
+    padding: 16px 20px;
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-color);
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+}
+
+.tasks-list {
+    min-height: 400px;
+}
+
+.task-row {
+    display: grid;
+    grid-template-columns: 40px 2fr 1fr 100px 120px 120px 100px;
+    gap: 16px;
+    padding: 16px 20px;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    transition: background var(--transition-fast);
+}
+
+.task-row:hover {
+    background: var(--bg-tertiary);
+}
+
+.task-row.completed .task-row-title {
+    text-decoration: line-through;
+    color: var(--text-muted);
+}
+
+.task-row-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.task-row-actions button {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+}
+
+.task-row-actions button:hover {
+    background: var(--primary-light);
+    color: var(--primary-color);
+}
+
+.task-row-actions button.delete:hover {
+    background: var(--danger-light);
+    color: var(--danger-color);
+}
+
+/* حالة فارغة */
+.empty-state {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    text-align: center;
+}
+
+.empty-state.show {
+    display: flex;
+}
+
+.empty-state i {
+    font-size: 64px;
+    color: var(--text-muted);
+    margin-bottom: 20px;
+}
+
+.empty-state h3 {
+    font-size: var(--font-size-xl);
+    color: var(--text-primary);
+    margin-bottom: 8px;
+}
+
+.empty-state p {
+    color: var(--text-secondary);
+    margin-bottom: 24px;
+}
+
+/* ============================================
+   عرض المشاريع
+   ============================================ */
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 24px;
+}
+
+.project-card {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--box-shadow-lg);
+}
+
+.project-header {
+    height: 120px;
+    position: relative;
+}
+
+.project-color-bar {
+    height: 100%;
+    width: 100%;
+}
+
+.project-actions-overlay {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    display: flex;
+    gap: 8px;
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+}
+
+.project-card:hover .project-actions-overlay {
+    opacity: 1;
+}
+
+.project-actions-overlay button {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: white;
+    color: var(--text-secondary);
+    box-shadow: var(--box-shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+}
+
+.project-actions-overlay button:hover {
+    background: var(--primary-color);
+    color: white;
+}
+
+.project-body {
+    padding: 20px;
+}
+
+.project-title {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+}
+
+.project-description {
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+    margin-bottom: 16px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.project-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
+}
+
+.project-progress {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.project-progress-bar {
+    width: 100px;
+    height: 6px;
+    background: var(--bg-tertiary);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.project-progress-fill {
+    height: 100%;
+    background: var(--primary-color);
+    border-radius: 3px;
+}
+
+.project-progress-text {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+.project-tasks-count {
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+/* ============================================
+   لوحة كانبان
+   ============================================ */
+
+.kanban-board {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    min-height: 500px;
+}
+
+.kanban-column {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow);
+    display: flex;
+    flex-direction: column;
+}
+
+.column-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.column-header h3 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: var(--font-size-md);
+    color: var(--text-primary);
+}
+
+.column-header .task-count {
+    background: var(--bg-tertiary);
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+.column-content {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    min-height: 200px;
+}
+
+.kanban-card {
+    background: var(--bg-primary);
+    border-radius: var(--border-radius);
+    padding: 16px;
+    margin-bottom: 12px;
+    cursor: grab;
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+    border: 1px solid transparent;
+}
+
+.kanban-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--box-shadow);
+    border-color: var(--primary-color);
+}
+
+.kanban-card.dragging {
+    opacity: 0.5;
+    cursor: grabbing;
+}
+
+.kanban-card-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+}
+
+.kanban-card-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+.kanban-card-project {
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: var(--primary-light);
+    color: var(--primary-color);
+    font-weight: 500;
+}
+
+.add-task-to-column {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px;
+    margin: 12px;
+    border: 2px dashed var(--border-color);
+    border-radius: var(--border-radius);
+    color: var(--text-muted);
+    font-weight: 500;
+    transition: all var(--transition-fast);
+}
+
+.add-task-to-column:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    background: var(--primary-light);
+}
+
+/* ============================================
+   التقويم
+   ============================================ */
+
+.calendar-nav {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.calendar-nav h3 {
+    min-width: 180px;
+    text-align: center;
+}
+
+.calendar-container {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow);
+    padding: 20px;
+}
+
+.calendar-header {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 8px;
+    margin-bottom: 10px;
+}
+
+.day-name {
+    text-align: center;
+    font-weight: 600;
+    color: var(--text-secondary);
+    padding: 10px;
+}
+
+.calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 8px;
+}
+
+.calendar-day {
+    aspect-ratio: 1;
+    min-height: 100px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: 8px;
+    background: var(--bg-primary);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.calendar-day:hover {
+    border-color: var(--primary-color);
+}
+
+.calendar-day.other-month {
+    opacity: 0.4;
+}
+
+.calendar-day.today {
+    border-color: var(--primary-color);
+    background: var(--primary-light);
+}
+
+.calendar-day-number {
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.calendar-tasks {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.calendar-task {
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+
+.calendar-task.high {
+    background: var(--danger-light);
+    color: var(--danger-color);
+}
+
+.calendar-task.medium {
+    background: var(--warning-light);
+    color: #856404;
+}
+
+.calendar-task.low {
+    background: var(--success-light);
+    color: var(--success-color);
+}
+
+.calendar-task.completed {
+    background: var(--bg-tertiary);
+    color: var(--text-muted);
+    text-decoration: line-through;
+}
+
+.calendar-legend {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.legend-dot.high {
+    background: var(--high-priority);
+}
+
+.legend-dot.medium {
+    background: var(--medium-priority);
+}
+
+.legend-dot.low {
+    background: var(--low-priority);
+}
+
+.legend-dot.completed {
+    background: var(--text-muted);
+}
+
+/* ============================================
+   عرض الفريق
+   ============================================ */
+
+.team-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 24px;
+}
+
+.team-member-card {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow);
+    padding: 24px;
+    text-align: center;
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.team-member-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--box-shadow-lg);
+}
+
+.member-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 16px;
+    border: 4px solid var(--primary-light);
+}
+
+.member-name {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.member-role {
+    color: var(--primary-color);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    margin-bottom: 16px;
+}
+
+.member-stats {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    padding-top: 16px;
+    border-top: 1px solid var(--border-color);
+}
+
+.member-stat {
+    text-align: center;
+}
+
+.member-stat-value {
+    font-size: var(--font-size-xl);
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.member-stat-label {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+}
+
+/* ============================================
+   التحليلات
+   ============================================ */
+
+.analytics-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+}
+
+.analytics-card {
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow);
+}
+
+.analytics-card.large {
+    grid-column: span 2;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.card-header h3 {
+    font-size: var(--font-size-lg);
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.card-header h3 i {
+    color: var(--primary-color);
+}
+
+.chart-container {
+    padding: 20px;
+    height: 300px;
+}
+
+/* معدل الإنجاز */
+.completion-rate {
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+}
+
+.rate-circle {
+    position: relative;
+    width: 180px;
+    height: 180px;
+}
+
+.rate-circle svg {
+    transform: rotate(-90deg);
+    width: 100%;
+    height: 100%;
+}
+
+.rate-circle circle {
+    fill: none;
+    stroke-width: 8;
+}
+
+.rate-circle .bg {
+    stroke: var(--bg-tertiary);
+}
+
+.rate-circle .progress {
+    stroke: var(--primary-color);
+    stroke-linecap: round;
+    stroke-dasharray: 283;
+    stroke-dashoffset: 283;
+    transition: stroke-dashoffset 1.5s ease;
+}
+
+.rate-value {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: var(--font-size-xxl);
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+/* أفضل الأعضاء */
+.top-performers {
+    padding: 10px 0;
+}
+
+.performer-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.performer-item:last-child {
+    border-bottom: none;
+}
+
+.performer-rank {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: var(--font-size-sm);
+}
+
+.performer-rank.gold {
+    background: linear-gradient(135deg, #ffd700, #ffb700);
+    color: #5c4100;
+}
+
+.performer-rank.silver {
+    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
+    color: #333;
+}
+
+.performer-rank.bronze {
+    background: linear-gradient(135deg, #cd7f32, #a66928);
+    color: white;
+}
+
+.performer-info {
+    flex: 1;
+}
+
+.performer-name {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.performer-tasks {
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+/* ============================================
+   الإعدادات
+   ============================================ */
+
+.settings-container {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    gap: 24px;
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow);
+    overflow: hidden;
+}
+
+.settings-sidebar {
+    background: var(--bg-tertiary);
+    padding: 20px 0;
+}
+
+.settings-sidebar ul li {
+    margin-bottom: 4px;
+}
+
+.settings-sidebar a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 20px;
+    color: var(--text-secondary);
+    font-weight: 500;
+    transition: all var(--transition-fast);
+}
+
+.settings-sidebar a i {
+    width: 20px;
+    text-align: center;
+}
+
+.settings-sidebar li.active a,
+.settings-sidebar a:hover {
+    background: var(--bg-secondary);
+    color: var(--primary-color);
+}
+
+.settings-content {
+    padding: 30px;
+}
+
+.settings-panel {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+.settings-panel.active {
+    display: block;
+}
+
+.settings-panel h2 {
+    font-size: var(--font-size-xl);
+    color: var(--text-primary);
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.settings-options {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.setting-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px;
+    background: var(--bg-primary);
+    border-radius: var(--border-radius);
+}
+
+.setting-info h4 {
+    font-size: var(--font-size-md);
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.setting-info p {
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+/* مفتاح التبديل */
+.toggle-switch {
+    position: relative;
+    width: 52px;
+    height: 28px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-switch .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--bg-tertiary);
+    border-radius: 28px;
+    transition: var(--transition-fast);
+}
+
+.toggle-switch .slider::before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    right: 3px;
+    bottom: 3px;
+    background-color: white;
+    border-radius: 50%;
+    transition: var(--transition-fast);
+    box-shadow: var(--box-shadow);
+}
+
+.toggle-switch input:checked + .slider {
+    background-color: var(--primary-color);
+}
+
+.toggle-switch input:checked + .slider::before {
+    transform: translateX(-24px);
+}
+
+/* خيارات الألوان */
+.color-options {
+    display: flex;
+    gap: 10px;
+}
+
+.color-option {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    cursor: pointer;
+    transition: transform var(--transition-fast), border-color var(--transition-fast);
+}
+
+.color-option:hover {
+    transform: scale(1.1);
+}
+
+.color-option.blue {
+    background: #4a90d9;
+}
+
+.color-option.green {
+    background: #28a745;
+}
+
+.color-option.purple {
+    background: #6f42c1;
+}
+
+.color-option.orange {
+    background: #fd7e14;
+}
+
+.color-option.pink {
+    background: #e83e8c;
+}
+
+.color-option.active {
+    border-color: var(--text-primary);
+}
+
+/* ============================================
+   النوافذ المنبثقة (Modals)
+   ============================================ */
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+
+.modal.active {
+    display: flex;
+}
+
+.modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    position: relative;
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow-lg);
+    width: 100%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    animation: modalSlideIn 0.3s ease;
+}
+
+.modal-content.large {
+    max-width: 700px;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-30px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h3 {
+    font-size: var(--font-size-lg);
+    color: var(--text-primary);
+}
+
+.modal-close {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-fast);
+}
+
+.modal-close:hover {
+    background: var(--danger-light);
+    color: var(--danger-color);
+}
+
+.modal form {
+    padding: 20px;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding-top: 20px;
+    border-top: 1px solid var(--border-color);
+    margin-top: 20px;
+}
+
+/* مربع اختيار */
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    cursor: pointer;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.checkbox-label input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    accent-color: var(--primary-color);
+}
+
+/* تفاصيل المهمة */
+.task-details-content {
+    padding: 20px;
+}
+
+.task-detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 20px;
+}
+
+.task-detail-title {
+    font-size: var(--font-size-xl);
+    color: var(--text-primary);
+}
+
+.task-detail-meta {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+}
+
+.task-detail-meta span {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: var(--bg-tertiary);
+    border-radius: var(--border-radius);
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+
+.task-detail-meta span i {
+    color: var(--primary-color);
+}
+
+.task-detail-description {
+    padding: 16px;
+    background: var(--bg-primary);
+    border-radius: var(--border-radius);
+    margin-bottom: 20px;
+}
+
+.task-detail-description h4 {
+    font-size: var(--font-size-md);
+    color: var(--text-primary);
+    margin-bottom: 8px;
+}
+
+.task-detail-description p {
+    color: var(--text-secondary);
+    line-height: 1.8;
+}
+
+/* ============================================
+   الإضافة السريعة
+   ============================================ */
+
+.quick-add-popup {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 500;
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--box-shadow-lg);
+    padding: 12px 16px;
+    animation: slideUp 0.3s ease;
+}
+
+.quick-add-popup.hidden {
+    display: none;
+}
+
+.quick-add-content {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.quick-add-content input {
+    width: 300px;
+    padding: 12px 16px;
+    border: 2px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: var(--font-size-md);
+}
+
+.quick-add-content input:focus {
+    border-color: var(--primary-color);
+}
+
+/* ============================================
+   رسائل التنبيه (Toasts)
+   ============================================ */
+
+.toast-container {
+    position: fixed;
+    top: 90px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2000;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 20px;
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow-lg);
+    animation: toastSlideIn 0.3s ease;
+    min-width: 300px;
+}
+
+@keyframes toastSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.toast.success {
+    border-right: 4px solid var(--success-color);
+}
+
+.toast.error {
+    border-right: 4px solid var(--danger-color);
+}
+
+.toast.warning {
+    border-right: 4px solid var(--warning-color);
+}
+
+.toast.info {
+    border-right: 4px solid var(--info-color);
+}
+
+.toast-icon {
+    font-size: var(--font-size-lg);
+}
+
+.toast.success .toast-icon {
+    color: var(--success-color);
+}
+
+.toast.error .toast-icon {
+    color: var(--danger-color);
+}
+
+.toast.warning .toast-icon {
+    color: var(--warning-color);
+}
+
+.toast.info .toast-icon {
+    color: var(--info-color);
+}
+
+.toast-message {
+    flex: 1;
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+/* ============================================
+   استجابة الشاشات الصغيرة
+   ============================================ */
+
+@media (max-width: 1200px) {
+    .dashboard-content {
+        grid-template-columns: 1fr;
+    }
+    
+    .analytics-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .analytics-card.large {
+        grid-column: span 1;
+    }
+}
+
+@media (max-width: 992px) {
+    .sidebar {
+        transform: translateX(100%);
+    }
+    
+    .sidebar.active {
+        transform: translateX(0);
+    }
+    
+    .main-content {
+        margin-right: 0;
+    }
+    
+    .menu-toggle {
+        display: flex;
+    }
+    
+    .search-box input {
+        width: 200px;
+    }
+    
+    .search-box input:focus {
+        width: 250px;
+    }
+    
+    .kanban-board {
+        grid-template-columns: 1fr;
+        overflow-x: auto;
+    }
+    
+    .tasks-header,
+    .task-row {
+        grid-template-columns: 40px 1fr 80px;
+    }
+    
+    .task-project,
+    .task-due-date {
+        display: none;
+    }
+    
+    .settings-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .settings-sidebar {
+        display: flex;
+        overflow-x: auto;
+        padding: 10px;
+    }
+    
+    .settings-sidebar ul {
+        display: flex;
+        gap: 8px;
+    }
+    
+    .settings-sidebar li {
+        flex-shrink: 0;
+    }
+}
+
+@media (max-width: 768px) {
+    .header-right {
+        flex: 1;
+    }
+    
+    .search-box {
+        display: none;
+    }
+    
+    .user-name {
+        display: none;
+    }
+    
+    .view-header {
+        flex-direction: column;
+        gap: 16px;
+        align-items: flex-start;
+    }
+    
+    .view-actions {
+        width: 100%;
+        flex-wrap: wrap;
+    }
+    
+    .filter-group {
+        width: 100%;
+        flex-wrap: wrap;
+    }
+    
+    .filter-group select {
+        flex: 1;
+        min-width: 120px;
+    }
+    
+    .dashboard-stats {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .stat-card {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .calendar-header {
+        display: none;
+    }
+    
+    .calendar-grid {
+        grid-template-columns: repeat(7, 1fr);
+    }
+    
+    .calendar-day {
+        min-height: 60px;
+    }
+    
+    .calendar-tasks {
+        display: none;
+    }
+    
+    .modal-content {
+        margin: 10px;
+        max-height: calc(100vh - 20px);
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 480px) {
+    .content-area {
+        padding: 16px;
+    }
+    
+    .dashboard-stats {
+        grid-template-columns: 1fr;
+    }
+    
+    .stat-card {
+        flex-direction: row;
+        text-align: right;
+    }
+    
+    .projects-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .team-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .tasks-header {
+        display: none;
+    }
+    
+    .task-row {
+        grid-template-columns: 1fr;
+        gap: 8px;
+    }
+    
+    .task-checkbox {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+    }
+    
+    .task-row {
+        position: relative;
+        padding-left: 50px;
+    }
+    
+    .user-btn {
+        padding: 6px;
+    }
+    
+    .user-btn img {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .quick-add-content input {
+        width: 200px;
+    }
+}
+
+/* ============================================
+   تحسينات إضافية
+   ============================================ */
+
+/* شريط التمرير المخصص */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-tertiary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--text-muted);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}
+
+/* تحديد النص */
+::selection {
+    background: var(--primary-color);
+    color: white;
+}
+
+/* التركيز */
+:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* تلميحات الأدوات */
+[data-tooltip] {
+    position: relative;
+}
+
+[data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 6px 12px;
+    background: var(--bg-dark);
+    color: white;
+    font-size: var(--font-size-xs);
+    border-radius: var(--border-radius-sm);
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: all var(--transition-fast);
+    pointer-events: none;
+    z-index: 100;
+}
+
+[data-tooltip]:hover::after {
+    opacity: 1;
+    visibility: visible;
+    bottom: calc(100% + 8px);
+}
+
+/* تأثيرات إضافية */
+.pulse {
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(74, 144, 217, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(74, 144, 217, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(74, 144, 217, 0);
+    }
+}
+
+.shake {
+    animation: shake 0.5s ease;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+    20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+/* نهاية ملف التنسيقات */