/* ============================================ Cairo - خط عربي محلي (SIL Open Font License) ============================================ */ @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cairo-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cairo-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/cairo-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cairo-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cairo-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/cairo-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ============================================================ قلم أحمر - نظام التصميم الموحّد (Design System) الهوية: أحمر | ستايل: مميز وجريء ملف واحد شامل لكل الصفحات ============================================================ */ /* ---------- 0. الانتقال بين الصفحات (View Transitions) ---------- */ /* المشروع MPA — كل ضغطة على لينك بتعمل تحميل صفحة حقيقي، واللي بيسيب وميضة بيضا بين الصفحتين. الـ at-rule دي بتخلّي المتصفح يعمل تلاشي ناعم بين الاتنين لوحده من غير أي جافاسكريبت. شرطها إن الصفحتين (اللي رايح منها واللي رايح ليها) يكونوا مفعّلينها — وده متحقق لأن كل صفحات المشروع بتحمّل main.css. المتصفحات اللي لسه مش دعماها بتتجاهل البلوك كله من غير أي أثر. */ @view-transition { navigation: auto; } /* لو المستخدم مفعّل "تقليل الحركة" في نظامه، بننقل من غير أنيميشن */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---------- 1. المتغيرات (Design Tokens) ---------- */ :root { /* الألوان الأساسية */ --primary: #c0392b; --primary-dark: #a5281b; --primary-light: #fcebeb; --primary-lighter: #fdf5f4; /* ألوان مساعدة (للكروت الملونة والحالات) */ --blue: #2980b9; --blue-light: #eaf4fb; --green: #27ae60; --green-light: #e9f9f0; --orange: #e67e22; --orange-light: #fdf1e7; --purple: #8e44ad; --purple-light: #f5eefa; /* ألوان محايدة */ --bg: #f4f5f7; --bg-subtle: #f7f7f8; --surface: #ffffff; --text: #1f2733; --text-muted: #6b7280; --text-light: #9ca3af; --border: #e5e7eb; /* لون النص فوق الخلفيات الملوّنة (الأزرار الأساسية، رقم السؤال، حروف الاختيارات، الشارات، الأفاتار). في الوضع الداكن الألوان المساعدة بتفتح عشان تبان على خلفية غامقة، فلو سيبنا النص أبيض فوقها بيبقى شبه مقروء — فبنقلبه لحبر غامق هناك. ⚠️ كروت الإحصائيات (.stat-card) مستثناة بالقصد وسايبة نصها أبيض */ --on-accent: #ffffff; /* أسماء بديلة للأسطح. كانت مستخدمة في 6 صفحات بـ var(--card-bg, #fff) من غير ما تتعرّف أصلاً، فكانت بترجع دايمًا للـ #fff الثابت: كارت أبيض مع نص var(--text) فاتح في الوضع الداكن = نص مش باين خالص. ⚠️ لازم تفضل معرّفة هنا. لاحظ إنها بتشاور على متغيّرات تانية بـ var()، والمتصفح بيحلّها وقت الاستخدام — يعني بتتبع الثيم تلقائيًا من غير ما نكرّرها في :root[data-theme="dark"] */ --card-bg: var(--surface); --input-bg: var(--surface); --bg-hover: var(--bg-subtle); /* بيخلّي المتصفح يرسم عناصر الفورم الأصلية (قايمة الـ select المنسدلة، شريط التمرير، منتقي التاريخ) بالوضع الصح — مش فاتح دايمًا */ color-scheme: light; /* حالات */ --error: #c0392b; --success: #27ae60; /* قياسات */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10); --sidebar-width: 250px; /* الخط */ --font: 'Cairo', 'Segoe UI', Tahoma, 'Helvetica Neue', Arial, sans-serif; } :root[data-theme="dark"] { --primary: #e0574a; --primary-dark: #ec6b5e; --primary-light: #3a2220; --primary-lighter: #2e1a18; --blue: #5dade2; --blue-light: #1c2b38; --green: #4cd787; --green-light: #16301f; --orange: #f0985a; --orange-light: #3a2a16; --purple: #b980d1; --purple-light: #2c1f33; --bg: #14161a; --bg-subtle: #23262c; --surface: #1e2126; --text: #eef0f3; --text-muted: #a4acb8; --text-light: #737b87; --border: #33373f; --error: #e0574a; --success: #4cd787; /* حبر غامق فوق الألوان الملوّنة الفاتحة بتاعة الوضع الداكن. الأبيض فوق var(--green) الفاتح نسبة تباينه 1.85:1 بس (مش مقروء)، والحبر الغامق ده بيوصّلها 7:1 وأكتر على كل الألوان الأربعة */ --on-accent: #14161a; --shadow: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* ---------- 2. إعادة تعيين (Reset) ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; transition: background-color .2s ease, color .2s ease; animation: qa-page-in .2s ease-out; } @keyframes qa-page-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; } /* ---------- إمكانية الوصول: حلقة تركيز واضحة لمستخدمي الكيبورد بس ------- (focus-visible مش focus، عشان الضغط بالماوس يفضل زي ما هو من غير حلقة) */ .btn:focus-visible, .tab-btn:focus-visible, .exam-card:focus-visible, .entity-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* الشريط الجانبي خلفيته primary نفسها، فحلقة primary مش هتبان فوقه — محتاجين حلقة بيضاء بدل كده */ .nav-item:focus-visible, .sidebar-logout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ---------- 3. الأزرار ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; transition: all 0.2s ease; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .btn:active { transform: scale(0.97); } } .btn-primary { background: var(--primary); color: var(--on-accent); } .btn-primary:hover { background: var(--primary-dark); } /* الزرار المعطّل: بنستخدم opacity مش لون ثابت، عشان اللون الثابت (#d1a7a2) كان بيطلع زرار بمبي فاتح وسط واجهة غامقة في الوضع الداكن */ .btn-primary:disabled { opacity: .45; cursor: not-allowed; } .btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--on-accent); } .btn-outline:disabled { opacity: 0.5; cursor: not-allowed; } .btn-block { width: 100%; } /* ---------- 4. البطاقات (Cards) ---------- */ .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } /* ---------- 5. حاوية توسيط (للدخول/التسجيل) ---------- */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .auth-card { background: var(--surface); width: 100%; max-width: 400px; padding: 36px 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center; } .auth-logo { font-size: 30px; color: var(--primary); margin-bottom: 8px; font-weight: 700; } .auth-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 26px; } /* ---------- 6. الفورمات ---------- */ .form { display: flex; flex-direction: column; gap: 14px; text-align: start; } .form input { width: 100%; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 15px; outline: none; transition: all 0.2s ease; background: var(--bg-subtle); color: var(--text); } .form input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1); } /* حقل كلمة المرور + زرار العين */ .password-field { position: relative; display: flex; align-items: center; } /* الاتنين منطقيين دلوقتي: زرار العين بيقعد في نهاية الحقل (شمال في العربي، يمين في الإنجليزي) والمساحة الفاضية بتتحجز في نفس الناحية. قبل كده كانوا left/padding-left ثابتين، فالزرار كان بيفضل شمال حتى في الإنجليزي وفوق أول النص. */ .password-field input { flex: 1; padding-inline-end: 44px; } .toggle-password { position: absolute; inset-inline-end: 8px; background: none; border: none; font-size: 18px; padding: 6px; line-height: 1; } /* ---------- 7. التابات (مدرس/طالب) ---------- */ .role-tabs { display: flex; gap: 8px; margin-bottom: 22px; } .tab { flex: 1; padding: 11px; border: 1.5px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text-muted); transition: all 0.2s ease; } .tab.active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); } /* ---------- 8. روابط ورسائل مساعدة ---------- */ .form-link { font-size: 13px; color: var(--primary); font-weight: 600; align-self: flex-start; } .form-link:hover { text-decoration: underline; } .auth-footer { margin-top: 22px; font-size: 14px; color: var(--text-muted); } .auth-footer a { color: var(--primary); font-weight: 600; } .auth-footer a:hover { text-decoration: underline; } .message { font-size: 13px; min-height: 18px; margin-top: 4px; } .message.error { color: var(--error); } .message.success { color: var(--success); } /* ---------- 9. أدوات مساعدة ---------- */ .hidden { display: none !important; } /* ============================================================ لوحة تحكم المدرس (Dashboard + Sidebar) ============================================================ */ /* ---------- التخطيط العام ---------- */ .dashboard-layout { display: flex; min-height: 100vh; } /* ---------- القائمة الجانبية (Sidebar) ---------- */ .sidebar { width: var(--sidebar-width); background: var(--primary); color: #fff; display: flex; flex-direction: column; padding: 22px 16px; position: fixed; top: 0; inset-inline-start: 0; /* ⚠️ 100vh لوحدها بتكسر الشريط على الموبايل: على iOS Safari الـ vh محسوبة على الشاشة **من غير** شريط المتصفح، فآخر عناصر الشريط (صف الثيم/اللغة وزرار تسجيل الخروج) بيقعوا تحت شريط المتصفح ومفيش أي طريقة توصلهم — المستخدم مش قادر يسجّل خروج من التليفون خالص. 100dvh بتتغير مع ظهور/اختفاء شريط المتصفح، و100vh فوقها fallback للمتصفحات القديمة. */ height: 100vh; height: 100dvh; /* وشبكة أمان تانية: لو المحتوى أطول من الشريط أصلاً (شاشة قصيرة، أو خط أكبر، أو وضع أفقي) يتمرّر بدل ما يتقص. */ overflow-y: auto; /* مساحة آمنة تحت (شريط الـ Home indicator في أيفون من غير زرار) */ padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 100; transition: transform 0.3s ease; } .sidebar-brand { font-size: 22px; font-weight: 700; color: #fff; padding: 6px 10px 22px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 18px; } .sidebar-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); color: rgba(255,255,255,0.85); font-size: 15px; font-weight: 500; background: none; border: none; width: 100%; text-align: start; transition: all 0.2s ease; } .nav-item:hover { background: rgba(255,255,255,0.15); color: #fff; } .nav-item.active { background: #fff; color: var(--primary); font-weight: 600; } .nav-icon { font-size: 18px; } .sidebar-logout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); color: #fff; font-size: 15px; font-weight: 500; background: rgba(255,255,255,0.12); border: none; width: 100%; text-align: start; transition: all 0.2s ease; } .sidebar-logout:hover { background: rgba(255,255,255,0.25); } .sidebar-logout:disabled { opacity: 0.6; cursor: not-allowed; } /* ---------- المحتوى الرئيسي ---------- */ .dashboard-content { flex: 1; min-width: 0; /* من غير كده الـ flex item بيرفض ينكمش تحت عرض محتواه (تابات/جداول) وبيطلع برّه الشاشة على الموبايل */ margin-inline-start: var(--sidebar-width); padding: 24px 30px; } /* ---------- الشريط العلوي ---------- */ .dashboard-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; } /* flex item الافتراضي min-width بتاعه auto، يعني مبيقدرش ينكمش تحت عرض محتواه. عنوان طويل من غير مسافات (اسم مجموعة مثلًا — والمدرس هو اللي بيكتبه) كان بيوسّع التوب بار لـ 880px على شاشة 390px. نفس عيلة إصلاح .dashboard-content في بند 4 و.exam-card h3 في بند 5. */ .dashboard-topbar > * { min-width: 0; } .topbar-greeting h1 { font-size: 22px; color: var(--text); overflow-wrap: anywhere; word-break: break-word; } .topbar-greeting p { font-size: 14px; color: var(--text-muted); } .topbar-profile { display: flex; align-items: center; gap: 12px; } .profile-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; } .profile-info strong { font-size: 14px; display: block; } .profile-info span { font-size: 12px; color: var(--text-muted); } /* ---------- زرار القائمة للموبايل ---------- */ .menu-toggle { display: none; background: var(--primary); color: var(--on-accent); border: none; font-size: 22px; width: 44px; height: 44px; border-radius: var(--radius-sm); /* الزرار flex item جوه التوب بار، والـ flex-shrink الافتراضي (1) كان بيخلي عنوان صفحة طويل يضغطه لحد 22px على الموبايل — يعني نص مساحة اللمس. flex: 0 0 auto بيمنع الانكماش، وmin-* شبكة أمان تانية عشان المساحة تفضل مضمونة (نفس نمط .entity-delete). 44×44 هي أقل مساحة لمس مريحة. */ flex: 0 0 auto; min-width: 44px; min-height: 44px; } /* ---------- كروت الإحصائيات ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { border-radius: var(--radius); padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow); } .stat-card.red { background: var(--primary); color: #fff; } .stat-card.blue { background: var(--blue); color: #fff; } .stat-card.green { background: var(--green); color: #fff; } .stat-card.orange { background: var(--orange); color: #fff; } /* بلاطة الإحصائيات ممكن تبقى (زي طلبات تعديل البيانات اللي بتودّي لصفحة "طلابي") — من غير الرول ده بتيجي بخط تحتها ولون اللينك */ a.stat-card { text-decoration: none; color: #fff; transition: opacity .15s; } a.stat-card:hover { opacity: .9; } .stat-icon { font-size: 28px; opacity: 0.9; } .stat-info strong { font-size: 26px; font-weight: 700; display: block; line-height: 1.2; } .stat-info p { font-size: 13px; opacity: 0.9; } /* ---------- الأقسام والكروت ---------- */ .dashboard-section { margin-bottom: 28px; } .section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .section-header h2 { font-size: 18px; color: var(--text); } .exams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .exam-card { background: var(--surface); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border-top: 4px solid var(--primary); transition: all 0.2s ease; } .exam-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } /* ⚠️ نفس سبب .entity-card h3 فوق: عنوان امتحان طويل من غير مسافات كان بيكسّر لوحة المدرس والطباعة. maxlength="120" في create-exam.html بيمنع الحالة من الأساس، والسطرين دول شبكة الأمان لامتحانات قديمة. */ .exam-card h3 { font-size: 16px; margin-bottom: 10px; overflow-wrap: anywhere; word-break: break-word; /* أزرار الكارت overlay مطلق في الركن، فالعنوان لازم يسيبلهم مكانهم — من غير كده عنوان طويل بيعدّي تحتيهم والنص يتلغبط مع الأيقونات. كارت المسودة فيه زرار حذف واحد بس: 44 (عرض الزرار) + 10 (الحافة). */ padding-inline-end: 60px; } /* الكارت المنشور فيه 3 أزرار (درجات + طباعة + حذف): 44×3 + 4×2 (الفواصل) + 10 (الحافة) = 150، وبنزوّد شوية هامش. */ .exam-card:has(.exam-grades-btn) h3 { padding-inline-end: 156px; } .exam-badges { display: flex; gap: 8px; flex-wrap: wrap; } .badge { font-size: 12px; padding: 4px 12px; border-radius: 20px; font-weight: 600; } .badge-type { background: var(--primary-light); color: var(--primary); } .badge-status.draft { background: var(--bg-subtle); color: var(--text-muted); } .badge-status.published { background: var(--green-light); color: var(--green); } .badge-status.closed { background: var(--primary-light); color: var(--primary); } /* ---------- الحالة الفارغة ---------- */ .empty-state { background: var(--surface); border-radius: var(--radius); padding: 50px 20px; text-align: center; box-shadow: var(--shadow); } .empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; } .empty-state h3 { font-size: 18px; margin-bottom: 8px; } .empty-state p { color: var(--text-muted); margin-bottom: 20px; } .empty-state .btn { display: inline-flex; } .loading-text { color: var(--text-light); font-size: 14px; padding: 20px; } /* ---------- خلفية القائمة للموبايل ---------- */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; } /* ---------- تجاوب الموبايل ---------- */ @media (max-width: 768px) { .menu-toggle { display: flex; align-items: center; justify-content: center; } .sidebar { transform: translateX(100%); } html[dir="ltr"] .sidebar { transform: translateX(-100%); } .sidebar.open, html[dir="ltr"] .sidebar.open { transform: translateX(0); } .dashboard-content { margin-inline-start: 0; padding: 18px; } .sidebar-backdrop.show { display: block; } } /* ============================================================ الشاشة المنبثقة (Modal) - اختيار ID المدرس ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-box { background: var(--surface); width: 100%; max-width: 420px; padding: 32px 28px; border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); text-align: center; animation: modalPop 0.25s ease; } @keyframes modalPop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .modal-title { font-size: 22px; color: var(--text); margin-bottom: 16px; } .modal-warning { background: var(--primary-light); color: var(--primary-dark); font-size: 14px; line-height: 1.7; padding: 14px 16px; border-radius: var(--radius-sm); border-inline-start: 4px solid var(--primary); margin-bottom: 22px; /* start بدل right: في الإنجليزي كان بيفضل مرصوص يمين غصب */ text-align: start; font-weight: 600; } /* ============================================================ صفحة الفصول (السنوات والمجموعات) ============================================================ */ /* ---------- شريط التنقل (Breadcrumb) ---------- */ .breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 14px; flex-wrap: wrap; } .breadcrumb-item { color: var(--text-muted); cursor: pointer; transition: color 0.2s ease; } .breadcrumb-item:hover { color: var(--primary); } .breadcrumb-item.active { color: var(--primary); font-weight: 600; cursor: default; } .breadcrumb-separator { color: var(--text-light); } /* ---------- شبكة الكروت ---------- */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } /* ---------- كارت السنة / المجموعة ---------- */ .entity-card { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); cursor: pointer; transition: all 0.2s ease; /* border-inline-start بدل border-right: بيقلب لوحده مع dir، فالشريط الملوّن بيفضل على ناحية بداية القراءة في العربي وفي الإنجليزي */ border-inline-start: 4px solid var(--primary); position: relative; } .entity-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .entity-card-icon { font-size: 28px; margin-bottom: 12px; } /* ⚠️ overflow-wrap مش رفاهية هنا: اسم سنة أو مجموعة طويل من غير مسافات (لصقة غلط، أو 500 حرف بالغلط) كان بيمدّ الكارت لبرّه الشاشة ويوسّع الصفحة كلها — قِسناها 8082px على موبايل عرضه 390px، وساعتها مفيش أي حاجة في الصفحة بتتضغط أصلاً. الحد الأقصى في classes.js بيمنع الحالة من الأساس، والسطرين دول شبكة الأمان لأي بيانات قديمة موجودة بالفعل. */ .entity-card h3 { font-size: 17px; margin-bottom: 6px; color: var(--text); overflow-wrap: anywhere; word-break: break-word; } .entity-card p { font-size: 13px; color: var(--text-muted); /* زرار الحذف overlay مطلق في الركن المقابل، فالنص لازم يسيبله مكانه — من غير كده سطر طويل (زي "20 طالب • 3 طلبات معلقة") بيعدّي تحت الأيقونة. 44 (عرض الزرار) + 10 (الحافة) = 54، وبنزوّد شوية هامش. */ padding-inline-end: 60px; /* الزرار ارتفاعه 44px، فلو النص سطر واحد الكارت بيبقى أقصر من الزرار ويطلع بره حدود الكارت. السطر ده بيضمن إن الكارت يستوعبه. */ min-height: 24px; } /* شارة عدد الطلبات المعلقة على كارت المجموعة */ .pending-badge { position: absolute; top: 14px; left: 14px; background: var(--primary); color: var(--on-accent); font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; } /* ---------- زرار حذف صغير على الكارت ---------- */ /* ⚠️ الزرار ظاهر افتراضيًا عن قصد. كان opacity:0 وبيبان بـ :hover بس — وده معناه إنه على الموبايل (مفيش hover في اللمس) مقاسه 0x0 ومستحيل يتضغط، يعني المدرس مش قادر يحذف سنة ولا مجموعة من التليفون خالص. الإخفاء بقى داخل @media (hover: hover) عشان يفضل نضيف على الديسكتوب من غير ما يكسر اللمس. */ /* ⚠️ inset-inline-end مش start: ناحية الـ start هي اللي النص بيبدأ منها (يمين في العربي، شمال في الإنجليزي)، فالزرار كان قاعد فوق أول كلمة في سطر الوصف ومش باين إنه زرار أصلاً. الركن المقابل فاضي في الحالتين. */ .entity-delete { position: absolute; bottom: 10px; inset-inline-end: 10px; background: none; border: none; border-radius: 50%; cursor: pointer; color: var(--text-light); font-size: 16px; /* 44x44 هي أقل مساحة لمس مريحة على الموبايل. بنستخدم min-* مع flex بدل padding لوحده عشان المساحة تبقى مضمونة مهما كان حجم الأيقونة. */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; opacity: 1; transition: opacity 0.2s ease, background 0.2s ease; } @media (hover: hover) { .entity-delete { opacity: 0; } .entity-card:hover .entity-delete { opacity: 1; } } .entity-delete:hover { color: var(--primary); background: var(--bg-subtle); } /* رجع بصري للّمس: على الموبايل مفيش hover، فالضغطة نفسها هي اللي بتوضّح إن الزرار اتضغط فعلاً قبل ما تظهر رسالة التأكيد. */ .entity-delete:active { background: var(--bg-subtle); transform: scale(0.92); } /* الوصول بلوحة المفاتيح: من غيرها الزرار بيفضل مخفي وإنت واقف عليه بالـ Tab */ .entity-delete:focus-visible { opacity: 1; outline: 2px solid var(--primary); } /* ============================================================ رحلة الطالب (الانضمام لمدرس) ============================================================ */ .welcome-banner { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--on-accent); padding: 22px 26px; border-radius: var(--radius); margin-bottom: 24px; font-size: 18px; font-weight: 600; box-shadow: var(--shadow); } /* حالة الطالب داخل المجموعة (منضم / بانتظار / يقدر ينضم) */ .join-status { display: inline-block; font-size: 12px; padding: 4px 12px; border-radius: 20px; font-weight: 600; margin-top: 8px; } .join-status.member { background: var(--green-light); color: var(--green); } .join-status.pending { background: var(--orange-light); color: var(--orange); } .join-status.available { background: var(--primary-light); color: var(--primary); } /* ============================================ شاشة تفاصيل المجموعة (طلبات + طلاب) ============================================ */ .gd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; z-index: 1000; overflow-y: auto; } .gd-overlay.hidden { display: none; } .gd-modal { background: var(--surface); width: 100%; max-width: 560px; border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: gdFadeIn .2s ease; } @keyframes gdFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .gd-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .gd-header h2 { margin: 0; font-size: 1.15rem; color: var(--primary); } .gd-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--text-light); line-height: 1; padding: 4px 8px; border-radius: 8px; } .gd-close:hover { background: var(--bg-subtle); color: var(--text); } .gd-message { display: none; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: .9rem; } .gd-message.info { background: var(--blue-light); color: var(--text); } .gd-message.success { background: var(--green-light); color: var(--green); } .gd-message.error { background: var(--primary-light); color: var(--primary); } .gd-search { width: 100%; padding: 10px 12px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 8px; font-size: .95rem; font-family: inherit; background: var(--surface); color: var(--text); } .gd-search:focus { outline: none; border-color: var(--primary); } .gd-section { margin-bottom: 18px; } .gd-section-head { margin-bottom: 8px; } .gd-section-head h3 { margin: 0; font-size: 1rem; color: var(--text); } .gd-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--primary-lighter); border: 1px dashed var(--primary-light); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; } .gd-bulk.hidden { display: none; } .gd-select-all { display: flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; margin-inline-end: auto; } .gd-list { display: flex; flex-direction: column; gap: 8px; } .gd-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); } .gd-row-check { display: flex; align-items: center; } .gd-row-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .gd-row-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-row-code { font-size: .8rem; color: var(--text-light); } .gd-row-parent { display: block; font-size: 12.5px; color: var(--text-light); margin-top: 4px; } .gd-row-parent a { color: var(--primary); text-decoration: none; margin-inline-start: 6px; } .gd-row-parent a:hover { text-decoration: underline; } .gd-row-actions { display: flex; gap: 6px; flex-shrink: 0; } .gd-empty { text-align: center; color: var(--text-light); padding: 14px; font-size: .9rem; } /* 🆕 التنقل بين الصفحات جوّه مودال تفاصيل المجموعة — نفس شكل .att-pagination في attendance.html، بس هنا في main.css لأن المودال نفسه مبني من classes.js */ .gd-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; } .gd-pagination .btn { padding: 8px 18px; font-size: .85rem; } .gd-pagination .btn:disabled { opacity: .5; cursor: not-allowed; } .gd-page-info { font-size: .85rem; font-weight: 600; color: var(--text-light); } .gd-btn { border: none; border-radius: 8px; padding: 7px 12px; font-size: .85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity .15s; } .gd-btn:disabled { opacity: .5; cursor: not-allowed; } .gd-btn:hover:not(:disabled) { opacity: .88; } .gd-btn-accept { background: var(--green); color: var(--on-accent); } .gd-btn-primary { background: var(--primary); color: var(--on-accent); } .gd-btn-reject { background: var(--surface); color: var(--primary); border: 1px solid var(--primary-light); } @media (max-width: 480px) { .gd-row { flex-wrap: wrap; } .gd-row-actions { width: 100%; justify-content: flex-end; } } /* ============================================ الملف الشخصي للمدرس ============================================ */ .profile-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; box-shadow: 0 2px 10px rgba(0,0,0,.04); } .profile-head { display: flex; align-items: center; gap: 14px; } .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; flex-shrink: 0; } /* نفس علاج .sp-header-text (student-profile.html) — اسم مدرس طويل من غير مسافات (حسابات قديمة قبل حد التسجيل) كان بيمدّ الصفحة. */ .profile-head-text { flex: 1; min-width: 0; } .profile-divider { height: 1px; background: var(--border); } .profile-row-item { display: flex; flex-direction: column; gap: 6px; } .profile-label { font-size: .82rem; color: var(--text-light); overflow-wrap: anywhere; word-break: break-word; } .profile-value { font-size: 1rem; color: var(--text); font-weight: 600; overflow-wrap: anywhere; word-break: break-word; } .profile-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .profile-code strong { font-size: 1.15rem; color: var(--primary); background: var(--primary-lighter); padding: 4px 12px; border-radius: 8px; letter-spacing: .5px; } /* ============================================ إنشاء الامتحان (Wizard + الأسئلة) ============================================ */ .exam-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .exam-step { display: flex; align-items: center; gap: 8px; color: var(--text-light); font-size: .9rem; font-weight: 600; } .exam-step.active { color: var(--primary); } .exam-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-size: .8rem; } .exam-step.active .exam-step-num { background: var(--primary); color: var(--on-accent); } .exam-step-line { width: 40px; height: 2px; background: var(--border); } .form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: .88rem; font-weight: 600; color: var(--text-muted); } /* ⚠️ الـ checkbox/radio مستثنيين عن قصد: width:100% + padding كانوا بيتطبقوا عليهم كمان، فمربع الاختيار بياخد عرض السطر كله ويخنق النص اللي جنبه (ظهرت في #groupsChecklist — اسم المجموعة بقى بيتكتب حرف في كل سطر لأن .checklist-text عرضها بقى صفر). .checkbox-label كانت بتعالج الحالة دي بـ width:auto محلي، بس أي مربع من غير الكلاس دي كان بيقع في نفس الفخ. */ .form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .95rem; font-family: inherit; width: 100%; box-sizing: border-box; background: var(--surface); color: var(--text); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); } .form-row { display: flex; gap: 14px; flex-wrap: wrap; } .form-row .form-group { flex: 1; min-width: 180px; } .checklist-section { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } /* ⚠️ مربعات .grade-select-all/.group-checkbox نفسها 13×13 بس — أصغر بكتير من 44px. بدل ما نكبّر المربع (وده هيغيّر شكله)، بنخلي الـ