بـ
ما لم يكن ملفوفاً أصلاً. وغلاف app.css يحمل --radius-lg (18px) وظلّاً، بينما
جدول Fluent نصف قطره --f-r-l (6px) بلا ظلّ. وقاعدة .table-scroll > table
تخصيصها (0,1,1) فتغلب .f-table (0,1,0) وتنزع إطار الجدول ونصف قطره.
فالنتيجة: **كل f-table في النظام مؤطَّرٌ بإطار app.css لا بإطار Fluent.**
مقيسٌ بالأنماط المحسوبة: wrapper_radius = 18px · table_radius = 0px.
اللون وحده متّفق (--f-stroke: var(--border-color))، والخلاف في نصف القطر
والظلّ. كان يُحيَّد يدوياً في news_management وsettings وstudent_calendar
وscreen_management وpayments — خمس نسخ من القاعدة نفسها. يُوحَّد هنا مرّة.
:has() تخصيصها تخصيصُ أثقل وسيطٍ فيها، فـ(0,2,0) تغلب .table-scroll (0,1,0).
ومتصفّحٌ لا يفهم :has() يُسقط هذه القاعدة وحدها فيعود إلى السلوك القائم. */
.table-scroll:has(> .f-table) {
border: 1px solid var(--f-stroke);
border-radius: var(--f-r-l);
box-shadow: none;
background: var(--f-surface);
}
/* والجدول داخله بلا إطارٍ ثانٍ — (0,2,0) تغلب .table-scroll > table (0,1,1) */
.table-scroll > .f-table { border: 0; border-radius: 0; }
/* ── ازدواج الحدّ على الورق ──
app.css:1138 يضع border: 1px solid #ccc !important على table و.table-scroll
**معاً**، والـ!important يغلب نزعَ الإطار أعلاه، فيُرسم خطّان متلاصقان.
مقيس: wrapper_border = 1px وtable_border = 1px في آنٍ واحد.
يُنزع إطار الجدول الداخليّ ويبقى إطار الغلاف — بـ!important اضطراراً.
ملاحظة مقيسة: overflow: hidden في .f-table **لا** يمنع كسر الصفحات على
Chromium 152 — ١٢٠ صفّاً تُطبع كاملة على خمس صفحات، داخل .f-card و.f-shell
أيضاً، ورأس الجدول يتكرّر تلقائياً. فلا تُضَف له معالجةٌ بلا قياس. */
@media print {
.table-scroll > .f-table { border: 0 !important; }
}
/* ============ Spinner / Progress / Avatar ============ */
.f-spinner { inline-size: 28px; block-size: 28px; border-radius: var(--f-r-c); border: 3px solid var(--f-stroke);
border-block-start-color: var(--f-brand); animation: f-spin .8s linear infinite; }
.f-spinner--lg { inline-size: 44px; block-size: 44px; border-width: 4px; }
@keyframes f-spin { to { transform: rotate(360deg); } }
.f-progress { block-size: 4px; background: var(--f-surface-alt); border-radius: var(--f-r-c); overflow: hidden; }
.f-progress > i { display: block; block-size: 100%; background: var(--f-brand); border-radius: var(--f-r-c); }
.f-avatar { inline-size: 36px; block-size: 36px; border-radius: var(--f-r-c); display: grid; place-items: center;
font-weight: 700; font-size: .85rem; color: var(--f-on-brand); background: var(--f-brand); }
.f-avatar--sq { border-radius: var(--f-r-l); }
/* ============ Chip / Tooltip / Divider / Accordion ============ */
.f-chip { display: inline-flex; align-items: center; gap: 6px; block-size: 28px; padding-inline: 10px; border-radius: var(--f-r-c);
background: var(--f-surface-alt); border: 1px solid var(--f-stroke); font-size: .8rem; color: var(--f-fg); }
.f-chip .x { cursor: pointer; color: var(--f-fg-2); }
/* ── --action: شريحةُ ترشيحٍ تُضغط ──
.f-chip وحدها ساكنة: وسمٌ يُعرض ولا يُنقر. ومرشّحاتُ data_gaps.php و
applications.php شرائحُ **تُختار** — كانتا مرسومتين بيدٍ باسمَي .dg-tab
و.ap-tab بالشكل نفسه وأرقامٍ تفترق قليلاً (14px مقابل 13px و.84rem
مقابل .82rem). 32px لا 28px: الشريحةُ الساكنة وسمٌ يُقرأ، وهذه هدفُ
إصبعٍ في صفٍّ من الأهداف. */
.f-chip--action { block-size: 32px; padding-inline: 14px; gap: 7px;
background: var(--f-surface); border-color: var(--f-stroke-2);
cursor: pointer; text-decoration: none;
transition: background .1s, border-color .1s, color .1s; }
.f-chip--action:hover:not(.is-on) { background: var(--f-surface-hover); }
.f-chip--action.is-on, .f-chip--action.is-on:hover {
background: var(--f-brand); border-color: var(--f-brand); color: var(--f-on-brand); font-weight: 600; }
/* عدّادُ الشريحة **باهتٌ لا حبّة** — بخلاف .f-seg-n. الشرائحُ تُصطفّ عشراً
في سطر (مرشّحات حالة الاستمارات)، فحبّةٌ داخل كلٍّ منها تصنع صفّاً من
الحلقات يسرق النظر من الاختيار نفسه. */
.f-chip-n { font-variant-numeric: tabular-nums; opacity: .8; font-size: .78rem; }
.f-divider { display: flex; align-items: center; gap: 10px; color: var(--f-fg-2); font-size: .76rem; margin-block: 4px; }
.f-divider::before, .f-divider::after { content: ''; flex: 1; block-size: 1px; background: var(--f-stroke); }
.f-tip { position: relative; display: inline-flex; }
.f-tip .tip-body { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(50%) scale(.96);
background: var(--f-fg); color: var(--f-surface); font-size: .74rem; padding-block: 5px; padding-inline: 9px; border-radius: var(--f-r-m);
white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; box-shadow: var(--f-sh-8); }
[dir="ltr"] .f-tip .tip-body { transform: translateX(-50%) scale(.96); }
.f-tip:hover .tip-body { opacity: 1; transform: translateX(50%) scale(1); }
[dir="ltr"] .f-tip:hover .tip-body { transform: translateX(-50%) scale(1); }
.f-accordion { border: 1px solid var(--f-stroke); border-radius: var(--f-r-l); overflow: hidden; background: var(--f-surface); }
.f-acc-item + .f-acc-item { border-block-start: 1px solid var(--f-stroke); }
.f-acc-head { inline-size: 100%; display: flex; align-items: center; gap: 10px; padding-block: 12px; padding-inline: 14px;
border: 0; background: transparent; color: var(--f-fg); font: 600 .9rem var(--f-font); cursor: pointer; text-align: start; }
.f-acc-head:hover { background: var(--f-surface-hover); }
.f-acc-head .chev { transition: transform .15s; color: var(--f-fg-2); }
.f-acc-item.is-open .f-acc-head .chev { transform: rotate(90deg); }
.f-acc-panel { display: none; padding-block: 0 14px; padding-inline: 14px 40px; font-size: .86rem; color: var(--f-fg-2); }
.f-acc-item.is-open .f-acc-panel { display: block; }
/* ── حاويات صفحة شائعة (رأس/جسم/بطاقة صفحة) ── */
/* ⚠ min(860px, 100%) لا 860px وحدها: السقفُ يمنع التمدّد فوق ٨٦٠ ولا
يُجبر الانكماشَ دونه. و.f-page عنصرٌ في حاوية flex عمودية (.main-content)،
وسطرُ flex العموديّ يأخذ عرضَ أكبر عناصره فيتجاوز حاويته بلا رادع —
فجدولٌ عريض يمدّ المستندَ كلَّه، وتخرج القائمةُ الجانبية من مخبئها على
الجوال ويُزاح المحتوى (قِيس على app_security: f-page ٦٤٦ بكسل في شاشة
٥٠٠، وscrollWidth ٦٦٦).
وmin-inline-size: 0 تُكمل الحيلة: بدونها لا تنكمش أبناؤها كذلك. */
.f-page { max-inline-size: min(860px, 100%); min-inline-size: 0;
margin-block: 24px; margin-inline: auto; padding-inline: 12px; font-family: var(--f-font); }
.f-shell { background: var(--f-surface); border: 1px solid var(--f-stroke); border-radius: var(--f-r-xl); box-shadow: var(--f-sh-16); overflow: hidden; }
.f-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 16px; padding-inline: 20px;
border-block-end: 1px solid var(--f-stroke); background: var(--f-surface); }
.f-header h1 { margin: 0; font: 700 1.25rem var(--f-font); color: var(--f-fg); display: flex; align-items: center; gap: 10px; }
.f-header-icon { display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: var(--f-r-l);
background: var(--f-brand-tint); color: var(--f-brand-ink); font-size: 1rem; }
.f-body { padding-block: 22px 26px; padding-inline: 22px; }
/* ═══════════════════════════════════════════════════════════════════════
العملة — الجديدة بارزة والقديمة تحتها للتنويه (١٢ أيلول ٢٠٢٦)
السطر القديم يختفي من كلّ الموقع بمفتاح LMS_SHOW_OLD_CURRENCY في
includes/money.php — لا حاجة إلى لمس هذه القواعد عند إلغائه.
═══════════════════════════════════════════════════════════════════════ */
.lms-money { display: inline-flex; flex-direction: column; align-items: flex-start;
line-height: 1.25; vertical-align: middle; }
.lms-money.is-inline { flex-direction: row; align-items: baseline; gap: 6px; }
.lms-money .m-cur { font-size: .92em; opacity: .8; }
/* القديمة: أصغر وأخفت — تُقرأ عند الحاجة ولا تزاحم الرقم الحقيقيّ */
.lms-money .m-old { font-size: .72em; opacity: .58; white-space: nowrap; font-weight: 400; }
/* في الطباعة تبقى: الوصل الورقيّ هو أكثر ما يحتاج فيه القارئ المقارنة */
@media print { .lms-money .m-old { opacity: .7; } }
/* ═══════════════════════════════════════════════════════════════════════
منعُ سحبِ الصور — الشعارُ والخاتم وثيقتان لا زينة
-----------------------------------------------------------------------
سحبُ صورةٍ بالفأرة إلى سطح المكتب ينسخها بضغطةٍ واحدة بلا قائمةٍ ولا
قرار. والخاتمُ الرسميّ وشعارُ المجموعة يظهران في صفحة التحقّق العامّة —
وهي مفتوحةٌ لكلّ من يحمل رقم وثيقة.
⚠ هذا **رفعُ عتبةٍ لا حماية**: من أراد الصورة نالها من «حفظ الصورة» أو
من مصدر الصفحة أو بلقطة شاشة. الحمايةُ الحقيقية هي أنّ الورقة لا تُصدَّق
بخاتمها بل برقمها على /cert — ولذلك لا نُثقل الصفحة بمنع القائمة اليمنى
ولا بطبقةٍ شفّافة فوق الصور: كلاهما يُزعج الصادقين ولا يوقف غيرهم.
وFirefox لا يعرف -webkit-user-drag، فيتولّاه حارسُ dragstart في
assets/js/app.js (وفي صفحة التحقّق نسخةٌ منه لأنها لا تحمّل الملفّ).
═══════════════════════════════════════════════════════════════════════ */
img, svg, .f-avatar, .contact-avatar {
-webkit-user-drag: none;
user-drag: none;
}
/* ==================== شريط رموز المعادلات (EqBar) ====================
يُبنى من assets/js/eqbar.js فوق أيّ حقلٍ يحمل data-eqbar.
لماذا في النظام لا في الصفحة: الحاجة نفسها في التسميعات وبنك أسئلة
«اختبر نفسي» واختبارات التصحيح التلقائي — ثلاث نسخٍ تفترق عند أوّل
رمزٍ يُضاف. */
/* ── خطُّ حقول المعادلات ──
بلاغ المالك (٢٦ أيلول ٢٠٢٦): «الشعاع فوق الصفر كسر».
السببُ أنّ F⃗ حرفٌ يتبعه محرفٌ مركَّب، وموضعُ المركَّب فوق الحرف مكتوبٌ
في جدول GPOS **داخل الخطّ الواحد**. فحين يأتي الحرفُ من Segoe UI
والسهمُ من خطٍّ رياضيٍّ احتياطيّ، لا يجد المتصفّحُ ربطاً بينهما فيضعه
على ارتفاعٍ افتراضيّ — يصحّ فوق v ويقطع 0 وF وd.
فالعلاجُ أن يأتي **الحرفُ والسهمُ من خطٍّ واحد**: خطٌّ رياضيٌّ في رأس
السلسلة لا في ذيلها. والعربيةُ بعده مباشرةً — الخطوطُ الرياضية لا تحمل
عربيةً، فتنزل إليها وحدها ولا يتغيّر شكلُ حرفٍ عربيّ.
ويُقصر هذا على الحقول التي فوقها شريطُ المعادلات: هي وحدها التي تُكتب
فيها الرموز، وتغييرُ خطّ الواجهة كلِّها ثمنٌ لا داعي له. */
/* وأزرارُ الشريط نفسها: زرُّ x⃗ يعرض الحرفَ ومحرفَه المركَّب معاً،
فيصيبه العطبُ نفسه إن جاءا من خطّين. */
.eqbar-field, .eqbar-b {
font-family: 'Cambria Math', 'STIX Two Math', 'Segoe UI', 'Tajawal',
'Noto Sans Math', 'DejaVu Sans', sans-serif !important;
}
.eqbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
padding: 5px 6px; margin-block-end: 6px;
background: var(--f-surface-alt); border: 1px solid var(--f-stroke);
border-radius: var(--f-r-m); }
.eqbar-lab { font-size: .68rem; color: var(--f-fg-3); margin-inline-end: 2px;
user-select: none; white-space: nowrap; }
.eqbar-sep { inline-size: 1px; block-size: 16px; background: var(--f-stroke-2);
margin-inline: 4px; flex-shrink: 0; }
/* min-inline-size لا inline-size: رموزٌ كـ∛ و⅔ أعرض من ₂، وتثبيت
العرض يقصّها. والخطّ 1rem: المنخفضاتُ صغيرةٌ بطبعها فتصير غير مقروءة
بحجم الواجهة المعتاد. */
.eqbar-b { min-inline-size: 28px; block-size: 28px; padding-inline: 5px;
display: inline-grid; place-items: center;
border: 1px solid transparent; border-radius: var(--f-r-s);
background: var(--f-surface); color: var(--f-fg);
font-size: 1rem; line-height: 1; cursor: pointer;
transition: background .1s, border-color .1s; }
.eqbar-b:hover { background: var(--f-brand-tint); border-color: var(--f-brand); }
.eqbar-b:active { background: var(--f-brand); color: var(--f-on-brand); }
@media (max-width: 560px) {
.eqbar { gap: 2px; padding: 4px; }
.eqbar-b { min-inline-size: 26px; block-size: 26px; font-size: .95rem; }
.eqbar-lab { display: none; } /* على الجوّال الرموزُ أولى بالمساحة */
}
/* زرّ التحويل: أعرضُ من زرّ الرمز لأنّه يحمل نصّاً، ومميَّزٌ بلون العلامة
لأنّه الفعل الرئيسيّ في الشريط لا رمزاً من سبعةٍ وستّين. */
.eqbar-conv { min-inline-size: auto; padding-inline: 10px; gap: 4px;
font: 600 .74rem var(--f-font);
background: var(--f-brand-tint); border-color: var(--f-brand);
color: var(--f-brand-ink); }
.eqbar-conv:hover { background: var(--f-brand); color: var(--f-on-brand); }