# دليل تنظيم ملفات CSS

## ⚠️ ملاحظة مهمة

ملف `public/build/assets/app-Dzxj88f9.css` هو ملف **مُجمّع (compiled/minified)** يتم إنشاؤه تلقائياً من Vite عند البناء.

**لا تقم بتعديل هذا الملف مباشرة** لأنه سيتم إعادة إنشائه عند تشغيل:
```bash
npm run build
# أو
npm run dev
```

## 📁 هيكل الملفات

### الملفات المصدرية (Source Files)
```
resources/sass/
├── app.scss              # الملف الرئيسي
├── _variables.scss      # المتغيرات
├── _layout.scss         # التخطيط
├── _custom.scss         # الأنماط المخصصة
└── _sidebar-custom.scss # أنماط Sidebar المخصصة
```

### الملفات المُجمّعة (Compiled Files)
```
public/build/assets/
└── app-Dzxj88f9.css     # ملف مُجمّع (لا تعدله!)
```

### الملف المرجعي (Reference File)
```
resources/css/
└── app-organized-reference.css  # نسخة منظمة للقراءة فقط
```

## 🔧 كيفية التعديل

### 1. تعديل المتغيرات
عدّل الملف: `resources/sass/_variables.scss`

### 2. إضافة أنماط مخصصة
عدّل الملف: `resources/sass/_custom.scss`

### 3. تعديل أنماط Sidebar
عدّل الملف: `resources/sass/_sidebar-custom.scss`

### 4. إعادة البناء
بعد التعديل، قم بإعادة بناء الأصول:
```bash
npm run build
```

## 📖 الملف المرجعي

تم إنشاء ملف `resources/css/app-organized-reference.css` كنسخة منظمة للقراءة والمراجعة فقط.

**لا تستخدم هذا الملف في الإنتاج** - إنه للقراءة فقط!

## 🎯 أفضل الممارسات

1. ✅ استخدم الملفات في `resources/sass/` للتعديل
2. ✅ نظّم الكود في ملفات SCSS منفصلة
3. ✅ استخدم المتغيرات CSS للمحافظة على الاتساق
4. ❌ لا تعدّل الملفات في `public/build/` مباشرة
5. ❌ لا تعدّل الملف المرجعي `app-organized-reference.css`

## 📝 مثال على التعديل

إذا أردت تغيير لون Sidebar:

1. افتح `resources/sass/_sidebar-custom.scss`
2. غيّر قيمة `--cui-sidebar-bg`
3. شغّل `npm run build`
4. سيتم تحديث `app-Dzxj88f9.css` تلقائياً









