/* ========================================= 0. نظام التصميم الموحّد (Design Tokens) ========================================= */ :root { --color-primary: #2b6cb0; --color-primary-dark: #1a365d; --color-accent: #f6ad55; --color-success: #38a169; --color-danger: #e53e3e; --color-warning: #dd6b20; --color-text: #2d3748; --color-text-muted: #718096; --color-border: #cbd5e0; --color-bg-card: #ffffff; --color-bg-page: #f0f4f8; --color-bg-sidebar: #1a365d; /* لون نص العناوين/الأرقام البارزة - منفصل عمداً عن --color-primary-dark لأنو هاد الأخير مستخدم كخلفية بنية ثابتة (الشريط الجانبي، رأس النوافذ) لازم تضل غامقة بكل الأحوال، بينما لون نص العنوان لازم ينعكس بالوضع الغامق (نص غامق فوق خلفية غامقة = غير مقروء) */ --color-heading: #1a365d; } /* 🌙 الوضع الغامق - نفس متغيرات النظام بس بقيم مقلوبة، يُفعّل بوضع data-theme="dark" على */ :root[data-theme="dark"] { --color-bg-page: #1a202c; --color-bg-card: #2d3748; --color-text: #e2e8f0; --color-text-muted: #a0aec0; --color-border: #4a5568; --color-heading: #90cdf4; } /* 🌙 تغطية إضافية للوضع الغامق: التطبيق فيه آلاف الأماكن بألوان نص مكتوبة يدوياً (inline) بدل متغيرات، وتحويلها كلها وحدة وحدة شغل كبير. بدل هيك، منعترض على أكتر الألوان الغامقة المتكررة (نص غامق فوق خلفية غامقة = غير مقروء) ونفتحها شوي بالوضع الغامق بس - بلا ما نلمس نفس الألوان بالوضع الفاتح إطلاقاً. لازم !important لأنو خصوصية [style*=] أوطى من inline. */ :root[data-theme="dark"] [style*="color:#2d3748"], :root[data-theme="dark"] [style*="color: #2d3748"] { color: #e2e8f0 !important; } :root[data-theme="dark"] [style*="color:#4a5568"], :root[data-theme="dark"] [style*="color: #4a5568"] { color: #cbd5e0 !important; } :root[data-theme="dark"] [style*="color:#718096"], :root[data-theme="dark"] [style*="color: #718096"] { color: #a0aec0 !important; } :root[data-theme="dark"] [style*="color:#276749"], :root[data-theme="dark"] [style*="color: #276749"], :root[data-theme="dark"] [style*="color:#22543d"], :root[data-theme="dark"] [style*="color: #22543d"] { color: #68d391 !important; } :root[data-theme="dark"] [style*="color:#c53030"], :root[data-theme="dark"] [style*="color: #c53030"] { color: #fc8181 !important; } :root[data-theme="dark"] [style*="color:#744210"], :root[data-theme="dark"] [style*="color: #744210"] { color: #f6ad55 !important; } :root[data-theme="dark"] [style*="color:#2b6cb0"], :root[data-theme="dark"] [style*="color: #2b6cb0"], :root[data-theme="dark"] [style*="color:#3182ce"], :root[data-theme="dark"] [style*="color: #3182ce"], :root[data-theme="dark"] [style*="color:#2c5282"], :root[data-theme="dark"] [style*="color: #2c5282"] { color: #63b3ed !important; } :root[data-theme="dark"] [style*="color:#e53e3e"], :root[data-theme="dark"] [style*="color: #e53e3e"], :root[data-theme="dark"] [style*="color:#9b2c2c"], :root[data-theme="dark"] [style*="color: #9b2c2c"], :root[data-theme="dark"] [style*="color:#742a2a"], :root[data-theme="dark"] [style*="color: #742a2a"] { color: #fc8181 !important; } :root[data-theme="dark"] [style*="color:#c05621"], :root[data-theme="dark"] [style*="color: #c05621"], :root[data-theme="dark"] [style*="color:#9c4221"], :root[data-theme="dark"] [style*="color: #9c4221"], :root[data-theme="dark"] [style*="color:#975a16"], :root[data-theme="dark"] [style*="color: #975a16"] { color: #f6ad55 !important; } :root[data-theme="dark"] [style*="color:#2f855a"], :root[data-theme="dark"] [style*="color: #2f855a"] { color: #68d391 !important; } :root[data-theme="dark"] [style*="color:#234e52"], :root[data-theme="dark"] [style*="color: #234e52"] { color: #4fd1c5 !important; } /* 🌙 نفس الفكرة، بس هلق للخلفيات الفاتحة جداً (بطاقات/شارات ملوّنة مصمّمة للوضع الفاتح فقط). بدون هالتعتيم، نص فاتح (من القاعدة فوق) فوق خلفية فاتحة = يختفي بالكامل - هاد بالضبط سبب مشكلة "الكتابة مو واضحة" يلي انلاحظت. منعتّم الخلفية بنفس عائلة اللون الأصلي. */ :root[data-theme="dark"] [style*="background:#edf2f7"], :root[data-theme="dark"] [style*="background: #edf2f7"], :root[data-theme="dark"] [style*="background-color:#edf2f7"], :root[data-theme="dark"] [style*="background-color: #edf2f7"], :root[data-theme="dark"] [style*="background:#f7fafc"], :root[data-theme="dark"] [style*="background: #f7fafc"], :root[data-theme="dark"] [style*="background:#e2e8f0"], :root[data-theme="dark"] [style*="background: #e2e8f0"] { background: #2d3748 !important; } /* اختصار #fff (٣ خانات) - لازم نطابق النقطة فاصلة/آخر السلسلة تحديداً حتى ما يصطاد بالغلط "background: #fff5f5" أو "#fffaf0" (يلي هني أصلاً مغطيين بقواعد لحالهم فوق) */ :root[data-theme="dark"] [style*="background: #fff;"], :root[data-theme="dark"] [style*="background:#fff;"] { background: #2d3748 !important; } :root[data-theme="dark"] [style*="background:#f0fff4"], :root[data-theme="dark"] [style*="background: #f0fff4"], :root[data-theme="dark"] [style*="background:#c6f6d5"], :root[data-theme="dark"] [style*="background: #c6f6d5"] { background: #22432e !important; } :root[data-theme="dark"] [style*="background:#ebf8ff"], :root[data-theme="dark"] [style*="background: #ebf8ff"], :root[data-theme="dark"] [style*="background-color:#ebf8ff"], :root[data-theme="dark"] [style*="background-color: #ebf8ff"], :root[data-theme="dark"] [style*="background:#bee3f8"], :root[data-theme="dark"] [style*="background: #bee3f8"] { background: #1e3a5f !important; } :root[data-theme="dark"] [style*="background:#fff5f5"], :root[data-theme="dark"] [style*="background: #fff5f5"], :root[data-theme="dark"] [style*="background:#fed7d7"], :root[data-theme="dark"] [style*="background: #fed7d7"] { background: #4a2323 !important; } :root[data-theme="dark"] [style*="background:#fffaf0"], :root[data-theme="dark"] [style*="background: #fffaf0"], :root[data-theme="dark"] [style*="background:#feebc8"], :root[data-theme="dark"] [style*="background: #feebc8"], :root[data-theme="dark"] [style*="background:#fffff0"], :root[data-theme="dark"] [style*="background: #fffff0"] { background: #453319 !important; } :root[data-theme="dark"] [style*="background:#e6fffa"], :root[data-theme="dark"] [style*="background: #e6fffa"] { background: #1d4044 !important; } :root[data-theme="dark"] [style*="background:#faf5ff"], :root[data-theme="dark"] [style*="background: #faf5ff"] { background: #322659 !important; } /* ========================================= 0.1 أقسام الإعدادات القابلة للطي + شريط الحفظ الثابت ========================================= */ .settings-accordion { margin-bottom: 20px; } .settings-accordion>summary { cursor: pointer; list-style: none; font-weight: bold; font-size: 16px; color: var(--color-heading); background: var(--color-bg-card); padding: 14px 18px; border-radius: 10px; border: 1px solid var(--color-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); display: flex; align-items: center; justify-content: space-between; transition: 0.2s; } .settings-accordion>summary::-webkit-details-marker { display: none; } .settings-accordion>summary::after { content: '▾'; font-size: 14px; transition: transform 0.2s; color: var(--color-text-muted); } .settings-accordion[open]>summary::after { transform: rotate(180deg); } .settings-accordion>summary:hover { border-color: var(--color-primary); } .settings-accordion[open]>summary { border-radius: 10px 10px 0 0; margin-bottom: 0; } .settings-accordion>summary+* { margin-top: 12px; } .settings-sticky-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg-card); padding: 12px 0; margin-bottom: 10px !important; } /* ========================================= 1. الإعدادات الأساسية (الضربة السحرية) ========================================= */ * { box-sizing: border-box; } body { font-family: 'Cairo', sans-serif; margin: 0; display: flex; height: 100vh; background: var(--color-bg-page); overflow: hidden; color: var(--color-text); transition: background 0.2s, color 0.2s; } /* ========================================= 2. القائمة الجانبية (Desktop Sidebar) ========================================= */ .sidebar { width: 260px; background: var(--color-bg-sidebar); color: white; display: flex; flex-direction: column; box-shadow: -3px 0 10px rgba(0, 0, 0, 0.1); z-index: 10; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-x: hidden; position: relative; } .sidebar-header { padding: 15px; text-align: center; background: #152c4d; border-bottom: 1px solid #2a4a7f; } .sidebar-header img { max-width: 65%; margin-bottom: 5px; } /* تم تصغير اللوغو */ .sidebar-header h2 { margin: 0; color: #f6ad55; font-size: 18px; } .nav-menu { flex: 1; overflow-y: auto; padding: 10px 0; } /* إخفاء شريط التمرير العريض من القائمة وجعله أنيقاً جداً */ .nav-menu::-webkit-scrollbar { width: 4px; } .nav-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } .nav-btn { background: none; border: none; color: #e2e8f0; padding: 12px 20px; text-align: right; width: 100%; font-family: 'Cairo'; font-size: 15px; font-weight: 600; cursor: pointer; border-right: 4px solid transparent; transition: 0.2s; margin-bottom: 2px; } .nav-btn:hover { background: #2a4a7f; } .nav-btn.active { background: var(--color-primary); border-right-color: var(--color-accent); color: white; } /* ========================================= 3. المحتوى الرئيسي والبطاقات ========================================= */ .main-content { flex: 1; padding: 30px; overflow-y: auto; position: relative; width: calc(100% - 260px); } .app-section { display: none; } .app-section.active { display: block; animation: fadeIn 0.4s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } .card { background: var(--color-bg-card); padding: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border-bottom: 4px solid var(--color-primary); text-align: center; } .card h3 { margin: 0; color: var(--color-text-muted); font-size: 16px; } .card .number { font-size: 32px; font-weight: bold; color: var(--color-heading); margin-top: 10px; } .content-box { background: var(--color-bg-card); padding: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); margin-bottom: 20px; width: 100%; overflow-x: auto; color: var(--color-text); } .header-flex { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #edf2f7; padding-bottom: 15px; margin-bottom: 20px; } .header-flex h2 { margin: 0; color: var(--color-heading); font-size: 20px; } .sub-title { color: #555; background: #f9f9f9; padding: 8px; border-right: 4px solid var(--color-primary-dark); margin: 20px 0 15px; font-size: 15px; font-weight: bold; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 10px; } .form-group { display: flex; flex-direction: column; } label { font-size: 13px; font-weight: bold; color: #444; margin-bottom: 4px; } input, select, textarea { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: 'Cairo'; font-size: 14px; } .btn-primary { background: var(--color-primary); color: white; border: none; padding: 10px 20px; font-family: 'Cairo'; font-weight: bold; border-radius: 6px; cursor: pointer; transition: 0.3s; /* 🚫 منع "انزياح الشاشة": الأزرار بتبدّل نصها لحالة "جاري الحفظ..." كتير بالتطبيق - بدون عرض أدنى محجوز، تغيّر طول النص بيغيّر عرض الزر فعلياً وبيدفع العناصر المجاورة. */ min-width: 120px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-primary:hover { background: var(--color-primary-dark); } .btn-secondary { background: var(--color-border); color: var(--color-text); border: none; padding: 10px 20px; font-family: 'Cairo'; font-weight: bold; border-radius: 6px; cursor: pointer; min-width: 120px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-submit { background: var(--color-primary-dark); color: white; border: none; padding: 12px; font-size: 16px; font-weight: bold; border-radius: 4px; cursor: pointer; width: 100%; margin-top: 20px; white-space: nowrap; } .btn-submit:disabled { background: #ccc; cursor: not-allowed; } table { width: 100%; border-collapse: collapse; margin-top: 15px; white-space: nowrap; } th, td { padding: 12px 15px; text-align: right; border-bottom: 1px solid var(--color-border); font-size: 14px; color: var(--color-text); } th { background-color: var(--color-bg-page); color: var(--color-text-muted); } /* ========================================= 4. الأيقونات والنوافذ المنبثقة ========================================= */ .icon-btn { background: #edf2f7; border: 1px solid #e2e8f0; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 16px; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center; color: #4a5568; } .icon-btn:hover { background: #e2e8f0; transform: scale(1.05); } .icon-btn.active { background: #2b6cb0; border-color: #2b6cb0; color: white; } .icon-btn.danger { background: #fed7d7; border-color: #fc8181; color: #c53030; } .icon-btn.danger:hover { background: #feb2b2; } .icon-btn.warning { background: #feebc8; border-color: #f6ad55; color: #c05621; } .icon-btn.warning:hover { background: #fbd38d; } .icon-btn.primary { background: #ebf8ff; border-color: #90cdf4; color: #2b6cb0; } .icon-btn.primary:hover { background: #bee3f8; } /* 🌙 نفس أزرار الأيقونات (تعديل/حذف/تحذير صفوف الجداول) - هاي أصناف مش inline style، فقاعدة [style*=] ما بتوصلها؛ لازم تجاوز مباشر لكل صنف */ :root[data-theme="dark"] .icon-btn { background: #4a5568; border-color: #718096; color: #e2e8f0; } :root[data-theme="dark"] .icon-btn:hover { background: #718096; } :root[data-theme="dark"] .icon-btn.danger { background: #4a2323; border-color: #742a2a; color: #fc8181; } :root[data-theme="dark"] .icon-btn.danger:hover { background: #742a2a; } :root[data-theme="dark"] .icon-btn.warning { background: #453319; border-color: #975a16; color: #f6ad55; } :root[data-theme="dark"] .icon-btn.warning:hover { background: #744210; } :root[data-theme="dark"] .icon-btn.primary { background: #1e3a5f; border-color: #2c5282; color: #63b3ed; } :root[data-theme="dark"] .icon-btn.primary:hover { background: #2c5282; } .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .modal-content { background-color: #f9fafb; margin: 2% auto; padding: 0; border-radius: 12px; width: 75%; max-width: 900px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); overflow: hidden; animation: slideDown 0.3s; display: flex; flex-direction: column; max-height: 95vh; } .modal-header { background: var(--color-primary-dark); color: white; padding: 15px 20px 10px; text-align: center; position: relative; flex-shrink: 0; } .avatar-container { width: 70px; height: 70px; background: #cbd5e0; border-radius: 50%; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; font-size: 35px; border: 3px solid white; position: relative; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .info-card { background: white; padding: 18px; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); } .info-card h4 { margin: 0 0 12px 0; color: #2b6cb0; border-bottom: 2px solid #edf2f7; padding-bottom: 8px; font-size: 16px; } .info-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; border-bottom: 1px dashed #edf2f7; padding-bottom: 5px; } .info-label { font-weight: bold; color: #4a5568; } .info-val { color: #2d3748; text-align: left; } .financial-alert { background: #ebf8ff; border-right: 4px solid #3182ce; padding: 10px; margin-top: 10px; border-radius: 4px; font-weight: bold; color: #2c5282; } .msg { margin-top: 15px; padding: 10px; border-radius: 4px; text-align: center; display: none; font-weight: bold; } .msg.success { background: #d4edda; color: #155724; } .msg.error { background: #f8d7da; color: #721c24; } /* ========================================= 5. تنسيقات خاصة (جدول الحصص والبطاقات) ========================================= */ .classroom-container { background: #fdfdfd; border: 2px solid #e2e8f0; border-radius: 12px; padding: 20px; text-align: center; margin-top: 20px; } .board { background: #2f855a; color: white; padding: 15px; border-radius: 8px; border: 6px solid #b7791f; margin: 0 auto 30px; width: 60%; font-size: 20px; font-weight: bold; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 2px black; } .teacher-desk { background: #ebf8ff; border: 2px solid #3182ce; padding: 15px; border-radius: 8px; display: inline-block; margin-bottom: 40px; cursor: pointer; transition: 0.2s; width: 220px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .teacher-desk:hover { transform: scale(1.05); background: #bee3f8; } .students-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 20px; justify-items: center; } .student-desk { background: white; border: 2px solid #cbd5e0; padding: 15px 5px; border-radius: 8px; width: 100px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .student-desk:hover { transform: translateY(-5px); border-color: #f6ad55; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); background: #fffaf0; } .avatar-icon { font-size: 35px; margin-bottom: 8px; line-height: 1; } .dynamic-list { background: var(--color-bg-page); color: var(--color-text); padding: 15px; border-radius: 8px; border: 1px solid var(--color-border); margin-bottom: 15px; } .dynamic-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; } .btn-add-row { background: #38a169; color: white; border: none; padding: 5px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px; } .btn-del-row { background: #e53e3e; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; } .cap-input { width: 80px; } .sch-cell-draggable { cursor: grab; transition: all 0.2s; } .sch-cell-draggable:active { cursor: grabbing; transform: scale(0.95); } .drag-over-highlight { background-color: #c6f6d5 !important; border: 2px dashed #38a169 !important; box-shadow: inset 0 0 10px rgba(56, 161, 105, 0.3); } .filter-bar { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border: 1px solid #e2e8f0; } .filter-input { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-family: 'Cairo'; font-size: 13px; flex: 1; min-width: 150px; } .cards-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-top: 15px; } .student-card { background: var(--color-bg-card); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); transition: 0.3s; position: relative; overflow: hidden; border-bottom: 4px solid #2b6cb0; } .student-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05); } .st-avatar { font-size: 45px; margin-bottom: 10px; line-height: 1; } .st-name { font-size: 18px; font-weight: bold; color: var(--color-heading); margin: 0 0 5px 0; } .st-id { font-size: 12px; color: #a0aec0; margin: 0 0 15px 0; } .st-badge { padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; display: inline-block; margin: 2px; } .badge-ok { background: #c6f6d5; color: #22543d; } .badge-warn { background: #fed7d7; color: #9b2c2c; } .card-actions { margin-top: 15px; border-top: 1px dashed #e2e8f0; padding-top: 15px; } .profile-tabs { display: flex; border-bottom: 2px solid #edf2f7; margin-bottom: 20px; } .tab-btn { background: none; border: none; padding: 12px 20px; font-family: 'Cairo'; font-size: 15px; font-weight: bold; color: var(--color-text-muted); cursor: pointer; border-bottom: 3px solid transparent; transition: 0.3s; flex: 1; } .tab-btn:hover { color: var(--color-primary); background: #f7fafc; } .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: #ebf8ff; } .tab-content { display: none; animation: fadeIn 0.4s; } .tab-content.active { display: block; } .modal-actions { margin-top: 15px; display: flex; gap: 10px; justify-content: center; } .board.clickable { cursor: pointer; transition: 0.3s; } .board.clickable:hover { transform: scale(1.02); box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) inset; } /* ========================================= 6. الإشعارات والتحميل ========================================= */ .toast-container { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); opacity: 0; background: white; color: #333; padding: 15px 25px; border-radius: 50px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); display: flex; align-items: center; gap: 12px; font-weight: bold; font-family: 'Cairo'; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 9999999 !important; /* 👈 رفعنا الرقم ليكون أعلى من القائمة الجانبية وأي شيء آخر */ border-right: 5px solid var(--color-success); } @keyframes popIn { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } .close-btn { position: absolute !important; left: 15px !important; top: 12px !important; font-size: 32px !important; z-index: 999 !important; transition: 0.2s !important; cursor: pointer !important; } .close-btn:hover { color: #f6ad55 !important; transform: scale(1.1) !important; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinning-icon { display: inline-block; animation: spin 1s linear infinite; } .modern-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-left: 5px; } /* ========================================= 7. التوافقية - الديسكتوب (Mini Sidebar) ========================================= */ .sidebar.collapsed { width: 75px; } .sidebar.collapsed .nav-text { display: none; } .sidebar.collapsed .collapsed-logo { display: block; margin-top: 10px; } .sidebar.collapsed .nav-btn { text-align: center; padding: 15px 0; font-size: 20px; } .desktop-toggle-btn { background: transparent; color: #e2e8f0; border: none; font-size: 28px; cursor: pointer; transition: 0.3s; margin-bottom: 15px; padding: 0; display: inline-block; } .desktop-toggle-btn:hover { color: #f6ad55; transform: scale(1.1); } /* ========================================= 8. التوافقية - الموبايل (Responsive Design) ========================================= */ .mobile-header { display: none; } .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; backdrop-filter: blur(2px); } /* 📲 بانر تثبيت التطبيق (PWA) */ .pwa-install-banner { position: fixed; bottom: 15px; left: 50%; transform: translateX(-50%); width: min(92%, 420px); background: #1a365d; color: white; border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); padding: 12px 14px; display: flex; align-items: center; gap: 10px; z-index: 1000001; } .pwa-install-icon { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; } .pwa-install-text { flex: 1; display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; min-width: 0; } .pwa-install-text strong { font-size: 14px; } .pwa-install-btn { background: #f6ad55; color: #1a365d; border: none; border-radius: 8px; padding: 8px 12px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .pwa-install-close { cursor: pointer; font-size: 20px; padding: 0 4px; opacity: 0.8; flex-shrink: 0; } @media screen and (max-width: 768px) { .desktop-toggle-btn { display: none !important; } .sidebar { position: fixed !important; right: -280px !important; left: auto !important; height: 100vh !important; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 🚫 كانت 999999 - أعلى من كل النوافذ المنبثقة والتنبيهات (9000-99999)، فكانت تحجبهن لما تنفتح والقائمة مفتوحة بنفس الوقت. القوائم/التنقل المفروض تكون تحت طبقة التنبيهات دايماً، مش فوقها. */ z-index: 1500 !important; width: 260px !important; } .sidebar.open { right: 0 !important; left: auto !important; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2) !important; } .main-content { padding: 15px !important; margin-top: 80px !important; padding-bottom: 80px !important; width: 100% !important; overflow-x: hidden !important; } .mobile-header { display: flex !important; justify-content: space-between; align-items: center; background: #1a365d; color: white; padding: 10px 15px; position: fixed; top: 25px; left: 0; width: 100%; z-index: 999; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* 🚩 لو شريط العلم مخفي من الإعدادات، نصفّر المسافة المحجوزة له بالموبايل */ body.flag-bar-hidden .mobile-header { top: 0 !important; } body.flag-bar-hidden .main-content { margin-top: 55px !important; } .menu-btn { background: none; border: none; color: white; font-size: 26px; cursor: pointer; padding: 0; margin: 0; } .header-flex { flex-direction: column !important; align-items: stretch !important; gap: 15px; text-align: center; } .dash-cards { grid-template-columns: 1fr !important; } .grid { grid-template-columns: 1fr !important; gap: 15px; } .profile-grid { grid-template-columns: 1fr !important; } .filter-bar { flex-direction: column !important; align-items: stretch !important; gap: 10px; } .filter-input { width: 100% !important; } .modal-content { width: 95% !important; margin: 10% auto !important; max-height: 85vh !important; } .modal-header h2 { font-size: 18px !important; } .board { width: 100% !important; font-size: 14px !important; padding: 10px !important; } .teacher-desk { width: 100% !important; max-width: 200px !important; } .students-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important; gap: 10px !important; } .student-desk { width: 100% !important; padding: 10px 5px !important; } .content-box { width: 100% !important; overflow-x: auto !important; padding: 15px !important; } table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; width: 100% !important; border-collapse: collapse !important; } table[style*="none"] { display: none !important; } /* 📱 إصلاح خروج العناصر عن الشاشة في شريط الفلاتر (الموبايل) */ .filter-bar div[style*="display: flex"] { flex-wrap: wrap !important; width: 100% !important; justify-content: center !important; } /* إصلاح الأزرار العملاقة في شريط الفلاتر بالموبايل */ .filter-bar select, .filter-bar input[type="date"], .filter-bar input[type="text"] { flex: 1 1 100% !important; /* الحقول تأخذ 100% من العرض */ width: 100% !important; margin-bottom: 8px !important; } .filter-bar button.btn-primary, .filter-bar button.icon-btn { flex: 1 1 45% !important; /* الأزرار تأخذ مساحة مناسبة بجانب بعضها */ width: auto !important; margin-bottom: 8px !important; } /* 🔄 حماية شريط التنقل بالزمن (الأسهم) ليبقى أفقياً ومرتباً */ .filter-bar div[style*="border-radius: 30px"] { flex-wrap: wrap !important; /* السماح بالتفاف العناصر */ justify-content: center !important; width: 100% !important; padding: 10px !important; gap: 5px !important; } /* حاوية التاريخ والنص */ .filter-bar div[style*="border-radius: 30px"]>div { min-width: 100px !important; /* إلغاء العرض الثابت المزعج */ flex: 1 !important; } /* أزرار الأسهم يمين ويسار */ .filter-bar div[style*="border-radius: 30px"] button:not(.primary) { flex: none !important; width: auto !important; margin-bottom: 0 !important; } /* زر (اليوم) ينزل لسطر جديد وياخد العرض كامل */ .filter-bar div[style*="border-radius: 30px"] button.primary { flex: 1 1 100% !important; margin-top: 8px !important; margin-bottom: 0 !important; } /* تصغير خط التنقل بالزمن ليناسب الشاشات الصغيرة */ #log_week_range { font-size: 12px !important; } /* 📱 إصلاح شجرة الإعدادات وسلم التقديرات للموبايل */ .tree-sec-row, .tree-assess-row, .appraisal-row, /* 👈 تمت إضافة صف التقديرات هنا */ .tree-sub-card>div:first-child { flex-wrap: wrap !important; justify-content: space-between !important; row-gap: 8px !important; height: auto !important; } /* حقول الاسم تأخذ السطر بالكامل */ .sub-name { flex: 1 1 70% !important; } .sec-name, .assess-name, .appr-name { flex: 1 1 100% !important; } /* حقول الأرقام تأخذ مساحة متساوية بالسطر الثاني */ .sub-pass, .sub-max, .assess-max, .sec-cap, .appr-min, .appr-max { flex: 1 1 30% !important; min-width: 60px !important; } /* 📱 1. منع الآيفون من عمل زووم إجباري عند الكتابة (يجب أن يكون الخط 16px كحد أدنى) */ input, select, textarea { font-size: 16px !important; } /* 📱 2. ترتيب ترويسة بروفايل الطالب/المعلم لتصبح عمودية وأنيقة بدلاً من الانحشار */ .modal-header[style*="justify-content: space-between"] { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 15px !important; padding-top: 25px !important; } .modal-header[style*="justify-content: space-between"]>div { margin: 0 auto !important; text-align: center !important; } /* تثبيت زر الإغلاق (X) في الزاوية العلوية اليسرى دائماً */ .modal-header .close-btn { position: absolute !important; top: 10px !important; left: 15px !important; margin: 0 !important; } /* 📱 3. تفعيل السكرول الناعم (الزحلقة) لجداول الموبايل لتجربة تشبه التطبيقات الأصلية */ .content-box, table, #sch_grid_area, #log_grid_area, .modal-body { -webkit-overflow-scrolling: touch !important; } /* 📱 4. تصغير حجم بعض النصوص الطويلة في الجداول لكي لا تأخذ مساحة ضخمة */ th, td { font-size: 13px !important; padding: 8px 10px !important; } } /* ========================================== */ /* 💎 التصميم الموحد للشاشات (Light Theme) */ /* ========================================== */ .vip-auth-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%); display: flex; justify-content: center; align-items: center; z-index: 100000; } .vip-glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 1); padding: 40px; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); width: 100%; max-width: 420px; text-align: center; } .vip-title { color: #1a365d; margin: 0 0 5px 0; font-family: 'Cairo', sans-serif; font-weight: bold; } .vip-subtitle { color: #718096; font-size: 14px; margin-bottom: 25px; } .vip-input { width: 100%; padding: 12px; background: #fff; border: 2px solid #cbd5e0; border-radius: 12px; color: #2d3748; font-size: 15px; outline: none; transition: 0.3s; box-sizing: border-box; font-family: 'Cairo', sans-serif; } .vip-input:focus { border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15); } /* مربعات الرمز السري الفاتحة */ .pin-container { display: flex; gap: 10px; justify-content: center; margin: 20px 0; direction: ltr; } .pin-box { width: 48px; height: 55px; font-size: 26px; font-weight: bold; text-align: center; background: #fff; border: 2px solid #cbd5e0; border-radius: 12px; color: #1a365d; transition: all 0.3s ease; outline: none; } .pin-box:focus { border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15); transform: translateY(-2px); } /* حالات الألوان */ .pin-success, .input-success { border-color: #48bb78 !important; background: #f0fff4 !important; color: #276749 !important; box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.15) !important; } .pin-error, .input-error { border-color: #f56565 !important; background: #fff5f5 !important; color: #c53030 !important; } @keyframes iosShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(8px); } } .ios-shake { animation: iosShake 0.4s cubic-bezier(.36, .07, .19, .97) both; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(56, 161, 105, 0); } 100% { box-shadow: 0 0 0 0 rgba(56, 161, 105, 0); } } .live-badge { animation: pulseGreen 2s infinite; border: 1px solid #38a169; }