# عقد اعتماد نظام التصميم النهائي

## المصدر الوحيد للتحكم

### صفحة القالب
`template_page.php`

هي المكان الوحيد الذي يعدل قيم التصميم العامة:

- لون الخلفية العامة.
- لون الأسطح والكروت.
- لون الأشرطة.
- لون السايدبار.
- لون الحقول والنص داخلها.
- ألوان الجداول.
- ألوان القوائم والنوافذ.
- ألوان رسائل الحماية والتنبيه.
- أحجام خطوط العناوين والأشرطة والحقول والجداول والقوائم والنوافذ.

### الهيدر
`header.php`

وظيفته الوحيدة في التصميم:

- قراءة القيم المحفوظة.
- توليد متغيرات CSS داخل `:root`.

يمنع مستقبلاً تحويل `header.php` إلى ملف CSS كبير أو وضع قواعد صفحات ثابتة داخله.

### CSS المركزي
القواعد الثابتة يجب أن تبقى داخل ملفات CSS المركزية، خصوصاً:

- `assets/css/ua_program_unified.css`
- `assets/css/ua_extracted_pages.css`
- `assets/css/ua_design_system.css`
- `assets/css/ua_design_components.css`
- `assets/css/ua_subscribers_modal.css` لنافذة المشتركين.
- `assets/css/ua_theme_studio.css` لصفحة القالب نفسها.

## قواعد ممنوعة بعد هذه المرحلة

يمنع إضافة:

- `<style>` داخل صفحات PHP عادية.
- `style="..."` داخل HTML إلا لضرورة Runtime غير قابلة للكلاس.
- `createElement('style')` داخل JavaScript.
- ألوان ثابتة داخل JavaScript مثل `element.style.color = '#...'`.
- نسخ ستايل نافذة أو جدول داخل صفحة منفردة بدل استخدام الكلاسات المركزية.

## الاستثناءات المقبولة

يسمح فقط بـ Runtime values عندما تكون قيماً حسابية وليست ألواناً ثابتة، مثل:

- زاوية دائرة إحصاء.
- عرض شريط تقدم.
- إظهار/إخفاء مودال.
- قياس طباعة حي يغيره المستخدم.

حتى هذه الحالات يجب أن تستخدم data attributes أو CSS variables قدر الإمكان.

## خريطة العناصر

- الألوان العامة: متغيرات `--ua-theme-*` و `--ua-*`.
- الأزرار: عبر `.btn`, `.ua-icon-action`, `.ua-modal-icon-btn`.
- الجداول: عبر قواعد الجدول المركزية ولا يتم تلوين جدول من الصفحة.
- النوافذ: عبر `.modal-content`, `.ua-global-dialog-*`, `.se-mt-confirm-*`, وملف `ua_subscribers_modal.css`.
- القوائم: عبر `.dropdown-menu`, `.ua-head-menu`, `.ua-menu`.
- رسائل الحماية: عبر `.ua-alert`, `.ua-security-*`, `.ua-global-dialog-*`.

## قاعدة تعديل مستقبلية

أي صفحة تحتاج شكلاً جديداً يجب أن تضيف كلاس دلالي للعنصر فقط، ثم يتم تعريف شكله في CSS المركزي وربطه بمتغيرات القالب.

لا يتم إعطاء الصفحة لوناً خاصاً بها من داخل HTML أو JavaScript.
