@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Aref+Ruqaa:wght@400;700&display=swap'); :root { /* هوية مسار: كحلي واثق + فيروزي للتقدّم/الإنجاز */ --navy-900: #0B1B30; --navy-800: #10233F; --navy-700: #1B3A5C; --teal-600: #0E8C7F; --teal-500: #17B8A6; --teal-100: #DFF6F2; --gold-700: #9A6E13; --gold-500: #D4A72C; --gold-300: #F3D67D; --primary: #0E8C7F; --primary-dark: #10233F; --primary-light: #DFF6F2; --accent: #1B3A5C; --danger: #dc2626; --danger-light: #fde8e8; --warning: #d97706; --warning-light: #fef3e0; --success: #16a34a; --success-light: #e7f7ed; --ink: #1E293B; --muted: #64748B; --border: #DCE3EB; --bg: #F1F5F9; --card: #ffffff; --radius: 10px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Arial", "DejaVu Sans", sans-serif; font-size: 15px; line-height: 1.6; } body { direction: rtl; } a { color: inherit; text-decoration: none; } /* الشريط الجانبي والمحتوى الرئيسي منطقتا تمرير مستقلتان بارتفاع الشاشة بالضبط (بدل ترك المستند/الصفحة كلها هي منطقة التمرير الوحيدة الفعلية) — قبل هذا الإصلاح كان الشريط الجانبي "sticky" فقط، فإن لم يفض محتواه عمليًا عن ارتفاع الشاشة (أو عند تمرير عجلة الفأرة فوقه بعد وصوله لحده) كانت أحداث العجلة تُمرَّر (chaining) لمستند الصفحة نفسه فتُحرِّك المحتوى الأوسط بدل الشريط الجانبي المعروض تحت المؤشر فعليًا — وهذا بالضبط ما كان يُلاحَظ. overscroll-behavior: contain يمنع "تسرّب" التمرير من صندوق لآخر، وبقاء html/body بلا overflow خاص بهما يجعل حاسوب اتجاه شريط تمرير كل صندوق (RTL) يعتمد فقط على direction الموروث لكل صندوق بمفرده، فتظهر أشرطة التمرير في مكانها الصحيح: شريط تمرير المحتوى الأوسط في أقصى يسار الشاشة (حافة الصفحة)، وشريط تمرير الشريط الجانبي ملاصقًا للحد الفاصل بينه وبين المحتوى — عكس الترتيب الخاطئ السابق تمامًا. */ /* overflow:hidden على .app-shell نفسه لا على html/body — يقصر الأثر على صفحات لوحة التحكم (التي تستخدم هذا الهيكل) فقط، ولا يمس صفحات الطباعة أو صفحة الدخول أو بوابة ولي الأمر (تستخدم style.css نفسه لكن بلا .app-shell)، فتبقى تلك الصفحات تمرِّر المستند بشكل طبيعي كما كانت دومًا. */ .app-shell { display: flex; height: 100vh; overflow: hidden; } /* الشريط الجانبي */ .sidebar { width: 250px; flex-shrink: 0; background: linear-gradient(180deg, var(--primary-dark), var(--primary)); color: #fff; padding: 18px 14px; height: 100%; overflow-y: auto; overscroll-behavior: contain; transition: width .18s ease, padding .18s ease, opacity .18s ease; } /* إخفاء الشريط الجانبي (v38) — الكلاس يُضاف على (لا .app-shell) لأنه يُطبَّق من سكربت مباشر في أول قبل رسم الصفحة (راجع base.html)؛ عنصر متاح فورًا في تلك اللحظة بخلاف عناصر لم تُرسَم بعد. يُخفى الشريط بعرض 0 (لا display:none حتى يبقى قابلاً للانتقال السلس)، ويتمدد المحتوى ليملأ المساحة. */ html.sidebar-collapsed .sidebar { width: 0; padding-left: 0; padding-right: 0; opacity: 0; overflow: hidden; pointer-events: none; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--navy-800); cursor: pointer; transition: background .12s ease, border-color .12s ease; } .icon-btn:hover { background: var(--teal-100); border-color: var(--teal-500); } .topbar-start { display: flex; align-items: center; gap: 12px; min-width: 0; } .sidebar .brand { font-size: 20px; font-weight: 700; padding: 8px 10px 20px; display: flex; align-items: center; gap: 8px; } .sidebar .brand small { display:block; font-size: 11px; font-weight: 400; opacity: .85; } .brand-icon { flex-shrink: 0; } /* line-height معقول + overflow: visible ضروريان هنا: خط "Aref Ruqaa" خط زخرفي (رقعة) بزوائد/تعرجات تمتد فوق وتحت خط الأساس أكثر من الخطوط العادية، فإن كان ارتفاع السطر ضيقًا جدًا (line-height: 1 كما كان سابقًا) مع vertical-align سالب لدفع النص للأسفل، تُقصّ أطراف بعض الحروف (خصوصًا الميم والياء) خارج مربع السطر فتصبح غير مرئية. الحل: مساحة رأسية كافية بدل الاعتماد على إزاحة سالبة. كذلك word-spacing إضافي ضروري لفصل "مازن" عن "السحيمي" بصريًا: خط Ruqaa المتصل (الرقعة) يجعل تعرجات نهاية الكلمة الأولى تتداخل بصريًا مع بداية الكلمة الثانية عند التلاصق المعتاد، فيصبح الاسم غير واضح للقراءة — التباعد الإضافي يفصلهما بوضوح دون كسر الطابع الخطي المتصل داخل كل كلمة. */ .dev-credit { font-size: 11px; color: var(--muted); text-align: center; line-height: 2.2; overflow: visible; } .sidebar .dev-credit { padding: 10px 10px 18px; } .dev-credit .signature-name { font-family: "Aref Ruqaa", "IBM Plex Sans Arabic", serif; font-weight: 700; font-size: 27px; line-height: 2.2; /* لون ذهبي بارز (بدل التدرج الفيروزي/الكحلي السابق الذي كان يذوب داخل خلفية الشريط الجانبي الداكنة نفسها تقريبًا) — يظهر بوضوح على الخلفية الداكنة (الشريط الجانبي) والفاتحة (بطاقة صفحة الدخول) معًا. */ background: linear-gradient(90deg, var(--gold-700), var(--gold-300)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 1px rgba(0, 0, 0, .18); display: inline-block; margin-inline-start: 5px; word-spacing: 6px; letter-spacing: .3px; padding: 4px 2px; overflow: visible; white-space: nowrap; } .sidebar .dev-credit .signature-name { font-size: 21px; word-spacing: 4px; } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,.9); font-size: 14px; margin-bottom: 3px; transition: background .15s; } .sidebar nav a:hover { background: rgba(255,255,255,.12); } .sidebar nav a.active { background: rgba(255,255,255,.22); font-weight: 600; } /* عناوين أقسام الشريط الجانبي: كانت شبه مخفية (لون باهت جدًا opacity:.6 وخط صغير 11px بلا أي حدود تميّزها عن روابط الأقسام)، فيصعب تمييز بداية كل قسم بصريًا أثناء التمرير السريع. الآن: خط أوضح حجمًا ووزنًا، لون ذهبي هوية العلامة (يبرز على خلفية الشريط الداكنة كما في توقيع المطوّر)، وإطار خفيف مع خلفية شبه شفافة يفصل بصريًا كل قسم كصندوق عنوان قائم بذاته بدل نص باهت يذوب بين الروابط. */ .sidebar .section-label { font-size: 12.5px; font-weight: 700; color: var(--gold-300); opacity: 1; margin: 18px 6px 8px; padding: 6px 10px; letter-spacing: .02em; border: 1px solid rgba(255,255,255,.28); border-radius: 7px; background: rgba(255,255,255,.07); display: block; } .sidebar .section-label:first-child { margin-top: 4px; } /* عنوان فرعي داخل قسم رئيسي (مثال: "استيراد جدول جاهز" و"بناء الجدول يدويًا" داخل قسم "الجدول المدرسي") — أخف وزنًا من عنوان القسم الرئيسي (بلا صندوق/إطار كامل) لكنه لا يزال واضحًا ومائلاً قليلاً للداخل (شريط تمييز رفيع على الحافة اليمنى في RTL) لإظهار التبعية البصرية للقسم الرئيسي فوقه. */ .sidebar .section-sublabel { font-size: 11.5px; font-weight: 600; color: var(--teal-100); opacity: .92; margin: 12px 6px 6px 10px; padding-right: 8px; border-right: 2px solid rgba(255,255,255,.35); letter-spacing: .02em; } .sidebar .duty-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-inline-start: 6px; border-radius: 999px; background: var(--gold-500); color: var(--navy-900); font-size: 11px; font-weight: 700; text-align: center; line-height: 1.6; } .sidebar .icon { width: 18px; text-align: center; display: inline-flex; align-items: center; justify-content: center; } /* مجموعة أيقونات SVG المضمَّنة الموحّدة (البند 7) — تستبدل كل الرموز التعبيرية (emoji) القديمة عبر النظام. كل أيقونة `