HR Pro — Design System
dashboard.html → خطة الألوان الشاملة للتعميم على كل الصفحات
١ — طبقات الخلفية
ثلاثة مستويات من العمق — الأعمق للصفحة، الأفتح للسطوح والكروت
#08101f
Base background
--bg
خلفية الصفحة الرئيسية. body background
#0e1a2e
Surface
--surface
الكروت، sidebar، login card، modal
#142035
Surface 2
--surface2
thead الجداول، toast، حقول مع عمق إضافي
#1a2a43
Surface 3
--surface3
skeleton loading gradient — أفتح طبقة
٢ — لون الأكسنت الرئيسي (Amber)
العائلة الكاملة للون العنبر — من المصمت للشفاف
#f59e0b
Accent
--accent
الأزرار الأساسية، الشعار، stat values، QR timer
#d97706
Accent dark
--accent2
hover state على الأزرار الأساسية فقط
rgba(245,158,11,0.15)
Accent light
--accentL
active nav item، logo mark bg، tab active bg
rgba(245,158,11,0.08)
Accent ghost
--accentG
ghost buttons bg، nav hover، focus ring، tr:hover
٣ — طبقات النص
#e8edf5
Text primary
--text
كل النصوص الأساسية والعناوين
#8899b4
Text muted
--textM
الوصف، labels، placeholder، nav items غير active
#4a607e
Text dim
--textD
group labels، no-img placeholder، أخف نص ممكن
٤ — ألوان الحالات الدلالية
ثابتة لكل المشاريع — لا تُعدَّل ولا تُستبدَل
✓
Success
--success
#10b981
✕
Danger
--danger
#ef4444
⚠
Warning
--warning
#f59e0b
!
Orange
--orange
#fb923c
i
Info
--info
#38bdf8
٥ — الحدود والفواصل
Accent border
--border → rgba(245,158,11,0.12)
login card، modal، sidebar logo icon، nav badge bg
Neutral border
--border2 → rgba(255,255,255,0.06)
cards، inputs، sidebar، tables، user chip، dividers
Table row divider
rgba(255,255,255,0.03)
فاصل صفوف الجداول داخلياً فقط
٦ — Badges — معايير الألوان الداخلية
كل badge = خلفية 10% شفافية + border 20% شفافية + نص اللون الكامل
✓ موافق ✕ مرفوض ⏳ معلق ⚠ تنبيه ↑ دخول ↓ خروج نشط موقوف 🔒 مرتبط
٧ — الأزرار
btn-primary
btn-ghost
btn-danger
btn-success
btn-warn
أزرار مصغّرة داخل صفوف الجداول (admin.html — `.btn-icon-sm`): مربع 28×28 تقريباً، زاوية 8px، خلفية شفافة بلون الدلالة، وtitle / aria-label لكل زر لأن المعنى يظهر عند التمرير فقط.
مثال إجراءات صف: ✎ ⏸ ✓ 💬 ⚙ 🗑
تنسيق الصف
استخدم `.actions-flex` + `flex-wrap` وحد أقصى عرض ~280px لعمود الإجراءات حتى لا ترتفع الصفوف؛ على الجوال تبقى نفس الأزرار ضمن بطاقة الصف مع حدود ذهبية خفيفة كما في admin.
٨ — Border Radius
--r-sm
8px
--r-md
12px
--r-lg
16px
--r-xl
22px
٩ — الظلال
shadow
--shadow
0 4px 24px rgba(0,0,0,0.4)
الكروت العادية، toast
shadow-lg
--shadow-lg
0 12px 48px rgba(0,0,0,0.5)
login card، modal
qr glow
hardcoded
0 0 32px rgba(245,158,11,.15)
QR white bg فقط
١٠ — Typography
عنوان رئيسي IBM Plex Sans Arabic / 700 / 24px
عنوان كرت IBM Plex Sans Arabic / 600 / 15px
نص عادي في الجداول والوصف IBM Plex Sans Arabic / 400 / 13-14px
LABEL UPPERCASE IBM Plex Sans Arabic / 600 / 11px / uppercase
01234 A3F8D2 JetBrains Mono / 400-500 / أرقام وأكواد
١١ — أنماط خاصة متكررة
Grid Background — خلفية الشبكة
تُطبَّق على body::before في كل صفحة
background-image: linear-gradient(rgba(245,158,11,.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(245,158,11,.03) 1px, transparent 1px);
background-size: 48px 48px;
Stat Card Top Line — الخط الذهبي العلوي
كل stat card فيها ::before بهذا الشكل
content:''; position:absolute; top:0; right:0; left:0; height:2px;
background: linear-gradient(90deg, var(--accent), transparent);
Alert Row — صف التنبيه البرتقالي
الصفوف الخارجة عن النطاق في الجداول
.tr-alert td { background: rgba(251,146,60,.04) !important; }
.tr-alert:hover td { background: rgba(251,146,60,.07) !important; }
Login Radial Gradient
خلفية شاشة تسجيل الدخول
background: radial-gradient(ellipse at 50% 0%, #122040 0%, #08101f 70%);
Modal Backdrop
خلفية المودال الشفافة مع blur
background: rgba(8,16,31,.88); backdrop-filter: blur(6px);
١٢ — ملف :root الكامل للنسخ
:root {
--bg: #08101f;
--surface: #0e1a2e;
--surface2: #142035;
--surface3: #1a2a43;
--border: rgba(245,158,11,0.12);
--border2: rgba(255,255,255,0.06);
--accent: #f59e0b;
--accent2: #d97706;
--accentL: rgba(245,158,11,0.15);
--accentG: rgba(245,158,11,0.08);
--text: #e8edf5;
--textM: #8899b4;
--textD: #4a607e;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--orange: #fb923c;
--info: #38bdf8;
--font: 'IBM Plex Sans Arabic', sans-serif;
--mono: 'JetBrains Mono', monospace;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 22px;
--shadow: 0 4px 24px rgba(0,0,0,0.4);
--shadow-lg: 0 12px 48px rgba(0,0,0,0.5);
}