/* ============================================================ platform.css — ما يضيفه التطبيق فوق نظام التصميم ============================================================ الملفات الأربعة قبله (tailwind · fonts · design-system · lms · app) تُتبنّى من نموذج lms-platform **كما هي** ولا تُعدَّل، لتبقى قابلة للتحديث بنسخ مباشر حين يصدر النموذج نسخة جديدة (القرار 6). فكل ما يحتاجه التطبيق ولا يوفّره النموذج يُكتب هنا وحده، بلغته البصرية نفسها ومتغيّراته نفسها — لا بألوان أو مقاسات جديدة. يُحمَّل **أخيراً** في layouts/app.blade.php. ============================================================ */ /* ------------------------------------------------------------- 1) رابط تخطّي المحتوى — معيار قبول «تنقّل بلوحة المفاتيح» (§35) ------------------------------------------------------------- ⚠️ `.skip-link` مستعملة في القالب الجذر منذ م0 ولا تعريف لها في أي ملف من ملفات النموذج (فُحصت الخمسة). أثرُ ذلك أن الرابط كان يُعرض نصاً ظاهراً فوق كل شاشة بدل أن يكون مخفياً حتى يصله التركيز. الإخفاء هنا بالإزاحة لا بـ`display:none`: العنصر المخفي بـnone لا يستقبل التركيز أصلاً، فيضيع الغرض كله. ------------------------------------------------------------- */ .skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: var(--r-lg, 12px); background: var(--grad-brand, linear-gradient(135deg, #0EA5E9, #0284C7)); color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 8px 24px rgba(2, 132, 199, .35); transition: top .18s var(--ease-out, cubic-bezier(.22, 1, .36, 1)); } .skip-link:focus, .skip-link:focus-visible { top: 12px; outline: 3px solid #fff; outline-offset: 2px; } /* ------------------------------------------------------------- 2) العنصر غير المنفَّذ — النمط الإلزامي الأول (CLAUDE.md) ------------------------------------------------------------- `.nav-leaf.is-soon` معرَّفة في النموذج لعناصر القائمة الجانبية وحدها. أما الأزرار والروابط داخل الشاشات — «نسيت كلمة المرور» في AUTH-01 مثلاً — فتحتاج التعميم نفسه: شفافية 62% ومؤشّر يقول إن هذا ليس إجراءً متاحاً، لا رابطاً يبدو عاملاً ثم يعتذر بعد الضغط. ------------------------------------------------------------- */ button.is-soon, span.is-soon:not(.nav-leaf), a.is-soon:not(.nav-leaf) { opacity: .62; cursor: help; } button.is-soon:hover, span.is-soon:not(.nav-leaf):hover, a.is-soon:not(.nav-leaf):hover { opacity: .82; } /* ------------------------------------------------------------- 3) حقل `.fld` معطَّل ------------------------------------------------------------- تبويب «رمز لمرة واحدة» يعرض حقله معطَّلاً لأن إرساله يحتاج مزوّد رسائل متعاقَداً عليه (§36). بلا هذا التمييز يبدو الحقل صالحاً للكتابة فيه، فيحاول المستخدم ثم لا يحدث شيء. ------------------------------------------------------------- */ .fld > input:disabled, .fld > select:disabled, .fld > textarea:disabled { background: var(--slate-50, #F8FAFC); color: var(--slate-400, #94A3B8); cursor: not-allowed; } .fld > input:disabled + label { color: var(--slate-300, #CBD5E1); } /* ------------------------------------------------------------- 4) الإدخال الأصلي المخفي — `.field-hidden` ------------------------------------------------------------- ⚠️ مستعملة في `` و`` و`` منذ م0 **ولا تعريف لها في أي ملف من ملفات النموذج الخمسة** — فُحصت جميعاً. أثرُ ذلك أن المربّع الأصلي كان يظهر بجوار المربّع المصمَّم، فيرى المستخدم مربّعين لخيار واحد. الإخفاء بالاقتصاص لا بـ`display:none` ولا `visibility:hidden`: العنصر المخفي بأيٍّ منهما يخرج من ترتيب التركيز فلا يصله السهم ولا المسافة، ويسقط معه معيار «تنقّل بلوحة المفاتيح» (§35) — والحقل المطلوب المخفي بذلك لا يُبلّغ المتصفحُ عن سبب رفضه أصلاً. ------------------------------------------------------------- */ .field-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- 5) حالة الاختيار من الإدخال الأصلي لا من صنف يضيفه JS ------------------------------------------------------------- النموذج التصميمي يلوّن الاختيار بصنف يضيفه JS: `.radio-card.on` و`.sup-check.checked` (lms.css:116 · design-system.css:562). أما مكوّنات هذا المشروع فتقود الشكل بـ`:checked` من الإدخال الأصلي عمداً (خطة-البناء.md، مكوّن النموذج) — فتعمل بلا JavaScript. لكن قواعد `:checked` المقابلة **لم تُكتب قط**، فكان المكوّنان يُعرضان بلا أثر للاختيار إطلاقاً: يضغط المستخدم فلا يتغيّر شيء. هذه هي القواعد المقابلة، بقيم النموذج نفسها لا بقيم جديدة. `:has()` للحاوية لأن الإدخال ابنٌ لها لا شقيق؛ والعلامة الداخلية بالشقيق المباشر فتعمل حتى بلا دعم `:has()`. ------------------------------------------------------------- */ .radio-card:has(input:checked) { border-color: var(--sky-500, #0EA5E9); background: var(--sky-50, #F0F9FF); box-shadow: 0 0 0 3px rgba(14, 165, 233, .1); } .radio-card input:checked ~ .dot { border-color: var(--sky-500, #0EA5E9); } .radio-card input:checked ~ .dot::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sky-500, #0EA5E9); } .sup-check:has(input:checked) { border-color: var(--sky-500, #0EA5E9); background: var(--sky-50, #F0F9FF); box-shadow: 0 0 0 3px rgba(14, 165, 233, .1); } .sup-check input:checked ~ .cbx { background: var(--sky-500, #0EA5E9); border-color: var(--sky-500, #0EA5E9); } .sup-check input:checked ~ .cbx::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translateY(-1px); } /* * حلقة التركيز: الإدخال مقتصَص فلا تُرى حلقته، فتُنقل إلى الحاوية. * بدونها لا يعرف المتنقّل بلوحة المفاتيح أين هو (§35 «تنقّل بلوحة * المفاتيح + تباين مناسب»). */ .radio-card:has(input:focus-visible), .sup-check:has(input:focus-visible) { outline: 3px solid var(--sky-400, #38BDF8); outline-offset: 2px; } /* ------------------------------------------------------------- 6) خطّ الهوية ومقاسه — طلب العروض §6 البند 1 (الفجوة RFP-6-03) ------------------------------------------------------------- ألوان الهوية تسري وحدها: النموذج يقرأ لون العلامة من `var()` في 83 موضعاً، فيكفي إعادة تعريف المتغيّرات (يفعله ThemeService في القالب الجذر). أما الخطّ فمكتوب في `fonts.css` عائلةً ثابتة لا متغيّراً، فيحتاج هاتين القاعدتين لتصله قيمة `--brand-font`. القاعدتان بلا أثر حين لا تخصيص: `var(--brand-font, inherit)` تسقط إلى الموروث، و`--brand-font-scale` إلى 1 — فتبقى الشاشة على Tajawal بمقاسه كما بناها النموذج، ولا يُبَثّ المتغيّران أصلاً. ------------------------------------------------------------- */ :root { --brand-font-scale: 1; } body { font-family: var(--brand-font, inherit); } /* * المقاس على `html` لا على `body`: مقاسات النموذج بوحدة `rem` تُقاس من * جذر المستند، فضربُها كلها معاً يحفظ تناسبها. تغييرُ `body` وحده يحرّك * ما بُني بـ`em` ويترك ما بُني بـ`rem` — فينكسر التناسب بدل أن يتغيّر. */ html { font-size: calc(16px * var(--brand-font-scale, 1)); } /* ------------------------------------------------------------- 7) شريط البيئة — طلب العروض §7 محور «الاستضافة» (الفجوة RFP-7-03) ------------------------------------------------------------- البند يطلب «بيان البيئات المتاحة». والبيان مكانه الشاشة نفسها لا ملف عرض: الخلط الذي وُضع البند لمنعه يقع أثناء الاستعمال — أحدهم يفتح بيئة الاعتماد فيرى أرقاماً معقولة فيبني عليها قراراً. لماذا تعريفان لموضع واحد؟ لأن للمنصة إطارَي تخطيط مختلفَين: body.app-shell البوابات الداخلية — الصفحة نفسها لا تتمرّر (height:100vh; overflow:hidden)، والسايدبار والهيدر مثبَّتان بإزاحات مطلقة. فالشريط مثبَّت مثلها، وما تحته يُزاح بارتفاعه. و`position:sticky` لا تعمل هنا أصلاً: لا حاوٍ متمرّر تحت الجسم. غيرها البوابة العامة والشاشات المجرّدة — الصفحة تتمرّر طبيعياً، فالشريط لاصق يبقى في الأعلى. وهيدر البوابة العامة `.portal-header` لاصقٌ عند 0 كذلك، فيُزاح إلى ما تحت الشريط وإلا تراكبا. الارتفاع في متغيّر واحد: تغييره يحرّك السايدبار والهيدر والمحتوى معاً. ------------------------------------------------------------- */ body.has-env-bar { --env-bar-h: 34px; } .env-bar { display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--env-bar-h, 34px); padding-inline: 14px; font-size: 12px; font-weight: 700; line-height: 1; /* لا يلتفّ ولا يمدّ الجسم أفقياً: الالتفاف يضاعف الارتفاع فيخرج الشريط عن الإزاحة المحسوبة، والفيض الأفقي إخفاقٌ في الفحص البصري. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .env-bar .env-bar-note { font-weight: 500; opacity: .92; overflow: hidden; text-overflow: ellipsis; } /* الجوال: الجملة الشارحة تُطوى ويبقى اسم البيئة — وهو الجزء الذي يمنع الخلط. طيّ الاسم وإبقاء الشرح يقلب الأولوية. */ @media (max-width: 640px) { .env-bar .env-bar-note { display: none; } } /* الألوان قيمٌ صريحة لا أصناف Tailwind: البند من معايير القبول التسعة («تباين ≥ 4.5:1»)، وكل زوج هنا فوق 9:1 محسوباً. وسلالم Tailwind المبنية لا تضمن أن يبقى الزوج مقترناً إن أُعيد بناء الورقة. */ .env-bar--warning { background: #fef3c7; color: #78350f; border-bottom: 1px solid #fcd34d; } .env-bar--info { background: #e0e7ff; color: #312e81; border-bottom: 1px solid #a5b4fc; } .env-bar--neutral { background: #e2e8f0; color: #1e293b; border-bottom: 1px solid #cbd5e1; } .env-bar--danger { background: #fee2e2; color: #7f1d1d; border-bottom: 1px solid #fca5a5; } /* --- البوابات الداخلية: مثبَّت، وما تحته يُزاح --- */ body.app-shell.has-env-bar .env-bar { position: fixed; top: 0; right: 0; left: 0; /* فوق السايدبار (30) والهيدر (25) ودون النافذة المنبثقة (90) ولوحة الأوامر (120): الشريط بيانٌ دائم لا طبقةٌ تحجب حواراً. */ z-index: 45; } body.app-shell.has-env-bar .sidebar, body.app-shell.has-env-bar .app-header { top: var(--env-bar-h); } body.app-shell.has-env-bar .main-area { top: calc(var(--header-h) + var(--env-bar-h)); } /* --- البوابة العامة والشاشات المجرّدة: لاصق في تدفّق الصفحة --- */ body:not(.app-shell).has-env-bar .env-bar { position: sticky; top: 0; z-index: 45; } body:not(.app-shell).has-env-bar .portal-header { top: var(--env-bar-h); } /* ------------------------------------------------------------- 8) حبر الملاحظات الحالية — معايير القبول §35 (تباين ≥ 4.5:1) ------------------------------------------------------------- الملاحظات الصغيرة تحت خلايا الجداول («تجاوزت مهلتها» · «أُصلحت وتنتظر التحقق» · «مرّ موعده ولم يؤكّده أحد») **من شاشاتنا نحن** لا من النموذج التصميمي: لا نظير لها في أيٍّ من ملفاته. فتصحيح لونها ليس انحرافاً عن «تُنفَّذ بحذافيرها» بل تطبيقٌ للمعيار على ما أضفناه. والدرجة السادسة في سلّم Tailwind تسقط دون الحدّ على أبيض: amber-600 #d97706 → 3.19:1 ✗ emerald-600 #059669 → 3.77:1 ✗ والسابعة تجتازه بفارق مريح: amber-700 #b45309 → 5.05:1 ✓ emerald-700 #047857 → 5.55:1 ✓ قيمٌ سداسية صريحة لا أصناف Tailwind: الصنف الجديد يحتاج إعادة بناء الورقة، وطبقةُ المشروع تُصلح النقص بلا خطوة بناء (والقيمة المكتوبة هنا لا تنكسر إن أُعيد توليد Tailwind بقائمة بيضاء أضيق). ⚠️ ما يبقى دون الحدّ هو أصناف **النموذج** وحدها (`text-slate-400` و`text-slate-500` وسطر `sky-600` في شاشة الدخول) — قرارٌ معروض على المالك في docs/حالة-التسليم.md، ولا يُتخذ من طرف المنفّذ. ------------------------------------------------------------- */ .note-ink-warning { color: #b45309; } .note-ink-success { color: #047857; } /* ============================================================= 9) قوائم الهيدر الثلاث — اللغة · الإشعارات · الحساب ============================================================= في `platform.css` لا في `design-system.css`: القوائم الثلاث من بناء المشروع لا من النموذج التصميمي (النموذج يعرف قائمة حساب بسطرين وشريطَ نشاطٍ تجريبي، ولا يعرف قائمة لغة ولا إشعاراً من قاعدة بيانات). والطبقة الأخيرة في ترتيب الأوراق، فتتجاوز ما قبلها بلا `!important`. ⚠️ ولا صنف Tailwind جديداً في أيٍّ من قواعدها: كل صنف جديد يحتاج إعادة بناء الورقة، وطبقةُ المشروع تعمل بلا خطوة بناء. ما استُعمل من Tailwind في shell.js مبنيٌّ أصلاً ومستعمَل في القشرة نفسها. ============================================================= */ /* ---------- مشترك بين القوائم الثلاث ---------- */ /* عنوان قسمٍ داخل القائمة — يفصل «بوابات أخرى» عمّا قبلها. */ .acct-cap{ padding:9px 13px 5px;font-size:10px;font-weight:800;color:var(--slate-400); text-transform:uppercase;letter-spacing:.06em; } .acct-cap-sep{border-top:1px solid var(--slate-100);margin-top:4px;} .acct-sep{height:1px;background:var(--slate-100);margin:5px 7px;} /* `.acct-item` في design-system.css ``/``؛ وهنا صار بعضها `