/* ============================================================ نهج المجازات — الوضع "المتوسط" الدافئ (بديل الوضع الليلي القديم) يُفعَّل بإضافة كلاس "dark" على عنصر (نفس آلية التبديل القديمة، الاسم الداخلي فقط لسه "dark" عشان مانلمسش الجافاسكريبت) الفلسفة: مش أبيض ناصع زي النهاري، ومش رمادي/كحلي غامق زي الوضع القديم — درجة بيج/كريمي مغمّق من نفس عيلة اللون الذهبي الأساسية للموقع (نفس الـ hue تقريبًا بتاع gold-400/ivory بس بإضاءة أقل). النصوص الغامقة (forest / gray) فضلت زي ما هي بالظبط من غير أي تغيير، لأنها أصلاً بتدي تباين ممتاز على خلفية فاتحة زي دي — يعني مفيش قفزة لنص أبيض ولا سطح غامق زي الوضع القديم، بس درجة الخلفية والبطاقات والحدود هي اللي بتتغير. ============================================================ */ html.dark { color-scheme: light; /* لسه palette فاتحة أساسًا (نص غامق على خلفية بيج) */ /* الطبقة الأساسية */ --md-bg: #e3d5ba; /* خلفية الصفحة */ --md-bg-alt: #d9c8a6; /* الأقسام المتبادلة (كانت bg-ivory-100 كاملة العرض) */ /* الأسطح المرتفعة (بطاقات، فورم) — أفتح من الخلفية عشان تبان "طالعة" فوقها، بنفس فلسفة الموقع الأصلية (بطاقة بيضاء فوق قسم كريمي) */ --md-surface: #f2ead9; --md-surface-hover: #ece1ca; /* حدود مرئية (بدل ivory-300 الفاتحة جدًا اللي كانت هتختفي فوق الخلفية الجديدة) */ --md-border: #d6c19c; --md-border-strong: #c9a868; /* نفس اللون الذهبي gold-400 الأصلي، لخطوط الجدول */ /* درجات نصوص محتاجة تظليل بسيط بس عشان تفضل واضحة فوق الخلفية الجديدة (النصوص التانية زي forest و gray-600/700 ماتلمستهاش خالص) */ --md-gray-subtle: #6f7580; /* بديل text-gray-400 */ --md-gray-mid: #4b5563; /* بديل text-gray-500 */ --md-red: #a82418; /* بديل text-red-600 */ } .dark body { background-color: var(--md-bg); } /* ---------- شرائط الأقسام المتبادلة ---------- */ .dark .py-20.bg-ivory-100 { background-color: var(--md-bg-alt); } /* ============================================================ نصوص محتاجة تظليل بسيط فقط (باقي النصوص زي forest/gray-600/700 ماتلمستش لأن تباينها ممتاز أصلاً فوق الخلفية البيج الجديدة) ============================================================ */ .dark .text-gray-400 { color: var(--md-gray-subtle); } .dark .text-gray-500 { color: var(--md-gray-mid); } .dark .text-red-600 { color: var(--md-red); } .dark .border-forest-500, .dark .border-ivory-300 { border-color: var(--md-border); } /* ============================================================ البطاقات/الصناديق: بقت سطح كريمي أفتح شوية من خلفية الصفحة بدل الأبيض الناصع — نفس فكرة "بطاقة أفتح من القسم اللي فيها" ============================================================ */ .dark .bg-white.rounded-xl, .dark .bg-white.rounded-2xl, .dark .bg-ivory-100.rounded-xl, .dark .bg-ivory-100.rounded-2xl, .dark .bg-ivory-200, .dark .quote-card, .dark .tab-content.bg-ivory-100, .dark .bg-ivory-50.rounded-xl { background-color: var(--md-surface); border-color: var(--md-border); } .dark .hover\:bg-ivory-200:hover, .dark .hover\:bg-forest-50:hover { background-color: var(--md-surface-hover); } /* شارات الأيقونات الصغيرة الدائرية — لمسة لونية خفيفة شفافة من نفس لون الأيقونة اللي جواها عشان تحتفظ بشخصيتها */ .dark .bg-forest-50 { background-color: rgba(44, 81, 109, .08); } .dark .bg-gold-100 { background-color: rgba(171, 134, 70, .16); } /* ---------- الفورم (حقول الإدخال) ---------- */ /* بتاخد نفس لون البطاقات + حدود مرئية عن طريق قاعدة border-ivory-300 فوق */ /* ---------- جدول الجدول الأسبوعي (schedule-table) ---------- ملحوظة: مكنش ليها أي تظليل في نسخة الوضع الليلي القديمة، فكانت بتفضل بيضاء وسط خلفية غامقة. اتضافت هنا عشان تندمج مع الوضع الجديد. */ .dark .schedule-note { background: var(--md-surface); border-right-color: var(--md-border-strong); color: var(--md-gray-mid); } .dark .schedule-scroll { border-color: var(--md-border); } .dark .schedule-table { background: var(--md-surface); } .dark .schedule-table th, .dark .schedule-table td { border-color: var(--md-border); } .dark .schedule-table thead tr:last-child th { background: var(--md-bg-alt); } .dark .schedule-table tbody td.day-cell { background: var(--md-bg-alt); } .dark .schedule-table tbody td.empty-cell { color: #a89880; } .dark .schedule-table tbody tr:nth-child(even) { background: var(--md-surface-hover); } .dark .schedule-table tbody tr.holiday-row td { background: #d3c19a; color: #8c7d5f; } /* ---------- الأسئلة الشائعة ---------- */ .dark .faq-item { border-bottom-color: var(--md-border); } /* ---------- شريط التنقّل العلوي (الشفاف اللاصق) ---------- */ .dark .nav-glass { background: hsla(40, 42%, 88%, .92); border-bottom: 1px solid rgba(171, 134, 70, .18); } /* ---------- زر تبديل الوضع ---------- */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 38px; height: 38px; flex-shrink: 0; border-radius: 9999px; border: 1px solid rgba(171, 134, 70, .35); background: transparent; color: #183144; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .15s ease, border-color .2s ease; padding: 0; } .theme-toggle-btn:hover { background-color: rgba(171, 134, 70, .12); transform: scale(1.06); } .theme-toggle-btn svg { width: 18px; height: 18px; } .dark .theme-toggle-btn { color: #6b4f26; border-color: rgba(171, 134, 70, .45); } .dark .theme-toggle-btn:hover { background-color: rgba(171, 134, 70, .18); } /* نسخة الموبايل: صف كامل العرض بنفس أسلوب باقي روابط القائمة */ .theme-toggle-btn.theme-toggle-mobile { width: 100%; height: auto; border: none; border-bottom: 1px solid #ede6da; border-radius: 0; justify-content: flex-start; padding: .75rem 0; font-size: .875rem; font-weight: 500; } .theme-toggle-btn.theme-toggle-mobile:hover { background-color: transparent; transform: none; } .dark .theme-toggle-btn.theme-toggle-mobile { border-bottom-color: var(--md-border); } /* ---------- خارطة تقدّم المستوى + بطاقات الإحصائيات (لوحتا الطالبة والإدارة) ---------- */ .dark .roadmap-line, .dark .roadmap-marker, .dark .roadmap-progress-track { background-color: var(--md-bg-alt); } .dark .roadmap-step.completed .roadmap-line, .dark .roadmap-step.completed .roadmap-marker { background-color: #2c516d; } .dark .stat-card { background-color: var(--md-surface); border: 1px solid var(--md-border); box-shadow: none; } .dark .role-card { background-color: var(--md-surface); border-color: var(--md-border); } .dark .role-card:hover { background-color: var(--md-bg-alt); border-color: #c9a868; } .dark .auto-approved-badge { background-color: var(--md-bg-alt); } /* ---------- ملخّص التقدّم البصري + تفعيل تيليجرام (لوحة الطالبة) ---------- */ .dark .progress-ring-track { stroke: var(--md-bg-alt); } .dark .telegram-notify-box { background-color: var(--md-bg-alt); } .dark .telegram-notify-box.is-linked { background-color: var(--md-bg-alt); }