١ — طبقات الخلفية

ثلاثة مستويات من العمق — الأعمق للصفحة، الأفتح للسطوح والكروت

#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);

      }