/* ========================================= */
/* إعدادات عامة لتنظيف حواف المتصفح الافتراضية */
/* ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* لون خلفية رمادي فاتح جداً لجسم الموقع لكي يبرز الـ Header كمربع فوقه */
    background-color: #f4f7f6; 
    /* استخدمنا خطاً احترافياً ونظيفاً بدلاً من خط fantasy الكارثي */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    line-height: 1.6;
}

/* ========================================= */
/* 1. تصميم الهيدر كمربع/بطاقة مستقلة */
/* ========================================= */
.main-header {
    position: relative; /* ضروري لكي نتمكن من وضع الزر في الزاوية بحرية */
    max-width: 1100px; /* جعلناه أصغر من عرض الشاشة (100%‎) ليكون كمربع */
    margin: 40px auto; /* 40 بكسل من الأعلى والأسفل، و auto لتوسيطه في منتصف الشاشة */
    
    /* التدرج اللوني (Gradient) باستخدام درجات الأزرق التي اخترتها */
    background: linear-gradient(135deg, #112151, #215182, #396f9e); 
    color: #ffffff;
    
    border-radius: 12px; /* حواف دائرية لجمالية المربع */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* ظل ناعم لرفع المربع عن خلفية الموقع */
    overflow: hidden; /* يمنع شريط الـ nav الأسود من تخريب الحواف الدائرية السفلية */
}

/* ========================================= */
/* 2. زر الوضع الليلي (مؤقتاً في الزاوية) */
/* ========================================= */
.theme-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(255, 255, 255, 0.1); /* خلفية شفافة قليلاً */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========================================= */
/* 3. حاوية العنوان */
/* ========================================= */
.header-title-container {
    text-align: center;
    padding: 60px 20px 30px; /* مساحة فارغة في الأعلى لكي لا يتصادم مع الزر */
}

.report-title {
    font-size: 2.5rem; /* حجم كبير كما طلبت */
    font-weight: 800; /* خط عريض جداً */
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* ظل خفيف للنص لزيادة وضوحه فوق الألوان */
}

/* ========================================= */
/* 4. حاوية المعلومات الأكاديمية (التقابل) */
/* ========================================= */
.academic-info-container {
    display: flex; /* السر هنا: Flexbox يضع العناصر بجانب بعضها */
    justify-content: space-between; /* يدفع القائمة الإنجليزية لأقصى اليسار والعربية لأقصى اليمين */
    padding: 0 60px 40px; /* مسافات داخلية من الجوانب والأسفل */
}

/* إزالة النقاط الافتراضية من القوائم */
.academic-info-container ul {
    list-style: none; 
}

.academic-info-container li {
    margin-bottom: 12px;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* محاذاة النص داخل كل قسم */
.info-en {
    text-align: left;
}

.info-ar {
    text-align: right;
}

/* ========================================= */
/* 5. شريط التنقل الأفقي الأسود (Nav) */
/* ========================================= */
.report-nav {
    background-color: #0a0e17; /* أسود كربوني غامق */
    padding: 18px 0;
    border-top: 2px solid rgba(255,255,255,0.1); /* خط فاصل خفيف بين الأزرق والأسود */
}

.nav-list {
    display: flex; /* لجعل الروابط أفقية */
    justify-content: center; /* توسيط الروابط في منتصف الشريط */
    flex-wrap: wrap; /* للسماح للروابط بالنزول لسطر جديد في الشاشات الصغيرة */
    gap: 30px; /* المسافة بين كل رابط والذي يليه */
    list-style: none;
}

.nav-list a {
    color: #aed6f1; /* لون أزرق فاتح مأخوذ من صورتك المرجعية */
    text-decoration: none; /* إزالة الخط السفلي للروابط */
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase; /* جعل الحروف الإنجليزية كبيرة لتبدو كأزرار حقيقية */
    transition: color 0.3s ease;
}

.nav-list a:hover {
    color: #ffffff; /* يتحول للأبيض عند مرور الماوس */
}
/* ========================================= */
/* إعدادات قسم المحتوى (Section Base) */
/* ========================================= */
.content-section {
    background-color: #ffffff; /* لون أبيض نقي لخلفية التقرير */
    max-width: 1100px;
    margin: 40px auto; /* توسيط ومسافة من الهيدر */
    padding: 50px 60px; /* مسافات داخلية مريحة للقراءة */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* ظل ناعم جداً */
}

/* عنوان القسم الكبير */
.section-title {
    font-size: 2.2rem;
    color: #112151; /* أزرق داكن من لوحة الألوان الخاصة بك */
    border-bottom: 3px solid #0097A7; /* خط سفلي فيروزي للتميز */
    padding-bottom: 15px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* تنسيق النصوص والعناوين الفرعية */
.section-body h3 {
    color: #215182;
    font-size: 1.4rem;
    margin-top: 35px;
    margin-bottom: 15px;
}

.section-body p, .section-body ol {
    color: #333333;
    font-size: 1.1rem;
    line-height: 1.8; /* تباعد أسطر مريح للقراءة الأكاديمية */
    margin-bottom: 20px;
}

.section-body ol {
    margin-left: 40px; /* إزاحة القائمة المرقمة لليسار قليلاً */
}

.section-body li {
    margin-bottom: 10px;
}

/* ========================================= */
/* تنسيق الصورة (Figure & Figcaption) */
/* ========================================= */
.report-figure {
    margin: 40px 0;
    text-align: center; /* توسيط الصورة والنص */
    background-color: #f8f9fa; /* خلفية رمادية فاتحة جداً لمنطقة الصورة */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.responsive-img {
    max-width: 100%; /* لضمان عدم خروج الصورة عن الإطار في الشاشات الصغيرة */
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.report-figure figcaption {
    margin-top: 15px;
    font-size: 0.95rem;
    color: #555555;
    font-style: italic;
    line-height: 1.6;
}

/* ========================================= */
/* بطاقة المصدر السفلية (Source Card) */
/* ========================================= */
.source-card {
    display: flex; /* Flexbox لوضع النص يساراً والباركود يميناً */
    justify-content: space-between;
    align-items: center;
    background-color: #f0f4f8; /* لون أزرق رمادي فاتح جداً */
    margin-top: 50px;
    padding: 25px 40px;
    border-left: 5px solid #0097A7; /* خط فيروزي سميك على اليسار للتميز */
    border-radius: 8px;
}

.source-info h4 {
    color: #112151;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.source-info p {
    font-size: 1rem;
    margin-bottom: 10px;
}

.source-link {
    display: inline-block;
    color: #0097A7;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.source-link:hover {
    color: #112151;
    text-decoration: underline;
}

/* تنسيق الباركود القابل للنقر */
.source-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qr-image {
    width: 80px; /* حجم مناسب للباركود */
    height: 80px;
    border-radius: 8px;
    transition: transform 0.3s ease; /* تأثير حركي ناعم */
    border: 2px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* تأثير التكبير عند تمرير الماوس فوق الباركود ليدل على أنه قابل للنقر */
.qr-image:hover {
    transform: scale(1.1);
}

.qr-hint {
    margin-top: 8px;
    font-size: 0.75rem;
    color: #666666;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}
/* ========================================= */
/* تنسيق الـ Modal لتكبير الصورة */
/* ========================================= */
.modal {
    display: none; /* مخفي افتراضياً */
    position: fixed; /* يبقى ثابتاً فوق كل المحتوى حتى عند التمرير */
    z-index: 2000; /* قيمة عالية لضمان ظهوره فوق شريط الـ nav والهيدر */
    padding-top: 50px; /* مسافة فارغة من الأعلى */
    left: 0;
    top: 0;
    width: 100%; /* ملء عرض الشاشة بالكامل */
    height: 100%; /* ملء طول الشاشة بالكامل */
    overflow: auto; /* يسمح بالتمرير إذا كانت الصورة المكبرة ضخمة جداً */
    background-color: rgba(0,0,0,0.9); /* خلفية سوداء شبه شفافة قاتمة جداً */
}

/* تنسيق الصورة المكبرة بداخل الـ Modal */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%; /* لكي لا تلتصق بحواف الشاشة */
    max-height: 85vh; /* لكي لا تخرج عن طول الشاشة (85% من طول منفذ العرض) */
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    
    /* حركة ناعمة عند الظهور */
    animation-name: zoom;
    animation-duration: 0.4s;
}

/* حركة التكبير الناعمة (Zoom Animation) */
@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* تنسيق زر الإغلاق (X) */
.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2001; /* فوق الصورة المكبرة */
}

.close-modal:hover,
.close-modal:focus {
    color: #0097A7; /* يتحول للون الفيروزي عند مرور الماوس */
    text-decoration: none;
}

/* تنسيق نص الشرح أسفل الصورة المكبرة */
#modal-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 20px 0;
    font-size: 1rem;
    font-style: italic;
}
/* ========================================= */
/* تنسيق نافذة الكود (IDE Window Mockup) */
/* ========================================= */
.ide-window {
    background-color: #1e1e1e; /* لون خلفية VS Code الكلاسيكي */
    border-radius: 8px;
    margin: 30px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden; /* يمنع الكود من تشويه الحواف الدائرية */
    direction: ltr; /* إجبار الكود على أن يكون من اليسار لليمين دائماً */
    text-align: left;
}

/* شريط العنوان العلوي للنافذة الوهمية */
.ide-header {
    background-color: #2d2d2d;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #111;
}

.ide-buttons {
    display: flex;
    gap: 8px;
    margin-right: 15px;
}

/* أزرار نظام الماك الوهمية */
.mac-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.mac-btn.close { background-color: #ff5f56; }
.mac-btn.minimize { background-color: #ffbd2e; }
.mac-btn.maximize { background-color: #27c93f; }

.ide-title {
    color: #858585;
    font-size: 0.9rem;
    font-family: Consolas, monospace;
    flex-grow: 1;
    text-align: center;
    margin-left: -50px; /* لتوسيط النص بتجاهل الأزرار في اليسار */
}

/* تنسيق كتلة الكود نفسها */
.ide-window pre {
    margin: 0;
    padding: 20px;
    overflow-x: auto; /* إضافة شريط تمرير أفقي إذا كان الكود طويلاً جداً */
}

.ide-window code {
    font-family: 'Fira Code', Consolas, Monaco, 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #d4d4d4; /* لون النص الأساسي في الثيم الداكن */
}

/* ========================================= */
/* ألوان Syntax Highlighting اليدوية */
/* ========================================= */
.comment { color: #6a9955; } /* أخضر باهت للتعليقات */
.keyword { color: #569cd6; font-weight: bold; } /* أزرق للكلمات المفتاحية مثل const و if */
.string { color: #ce9178; } /* برتقالي للنصوص */
.function { color: #dcdcaa; } /* أصفر باهت للوظائف مثل require و log */
.number { color: #b5cea8; } /* أخضر فاتح للأرقام */
/* ========================================= */
/* قسم مصادر الفصول المصغرة (Chapter Sources) */
/* ========================================= */
.chapter-sources-section {
    background-color: #f8f9fa; /* لون رمادي فاتح جداً لتمييزه عن الفصول البيضاء */
    padding: 30px 40px;
    margin-top: -15px; /* رفع القسم قليلاً لتقليل الفجوة مع الفصل الثالث */
}

.subsection-title {
    color: #215182;
    font-size: 1.3rem;
    margin-bottom: 20px;
    border-left: 4px solid #0097A7; /* خط جانبي للتأكيد البصري */
    padding-left: 10px;
}

/* نظام الشبكة لتوزيع البطاقات */
.sources-grid {
    display: grid;
    /* ستقوم الشبكة بإنشاء أعمدة تلقائياً، بحيث لا يقل عرض البطاقة عن 300 بكسل */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

/* تنسيق بطاقة المصدر المصغرة (الجديدة) */
.mini-source-card {
    display: flex;
    justify-content: space-between; /* يدفع النص لليسار والباركود لليمين */
    align-items: center;
    background: #ffffff;
    padding: 12px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.mini-source-card:hover {
    border-color: #0097A7;
    box-shadow: 0 4px 12px rgba(0, 151, 167, 0.15);
    transform: translateY(-3px); /* رفع البطاقة للأعلى بدلاً من اليمين لتناسب الباركود */
}

/* حاوية النص والأيقونة في الجهة اليسرى */
.mini-card-left {
    display: flex;
    align-items: center;
}

.source-icon {
    font-size: 1.4rem;
    margin-right: 12px;
}

.source-text strong {
    display: block;
    color: #112151;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.source-text span {
    font-size: 0.8rem;
    color: #666;
}

/* تنسيق صورة الباركود المصغرة في الجهة اليمنى */
.mini-qr {
    width: 45px; /* حجم صغير ومدروس لكي لا يشوه البطاقة */
    height: 45px;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.mini-source-card:hover .mini-qr {
    transform: scale(1.15); /* تكبير الباركود قليلاً عند مرور الماوس لتشجيع النقر/المسح */
}
/* ========================================= */
/* تذييل الموقع والمصادر (Footer) */
/* ========================================= */
.site-footer {
    background-color: #0a0e17; /* أسود كربوني مطابق لشريط الـ Nav */
    color: #aed6f1; /* أزرق فاتح للنصوص */
    padding: 60px 20px 30px;
    margin-top: 60px;
    border-top: 4px solid #0097A7; /* خط علوي فيروزي لإنهاء الصفحة بقوة */
}

/* ========================================= */
/* تذييل الموقع والمصادر (محدث ليتناسق مع نظام البطاقات) */
/* ========================================= */
.site-footer {
    background-color: #0a0e17; 
    color: #aed6f1; 
    padding: 60px 40px 30px;
    
    /* التعديل الجذري هنا: تحويله إلى بطاقة */
    max-width: 1100px;
    margin: 60px auto 40px auto; /* توسيطه مع إبعاد عن الحافة السفلية */
    border-radius: 12px; /* حواف دائرية تطابق الـ Header */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* ظل عائم */
    
    border-top: 4px solid #0097A7; 
}

.footer-title {
    color: #ffffff;
    font-size: 1.8rem;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* تنسيق قائمة المصادر لتبدو كأزرار تفاعلية عريضة */
.references-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 50px;
}

.references-list li a {
    color: #aed6f1;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.6;
    transition: all 0.3s ease;
    display: block;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.05); /* خلفية شفافة قليلاً */
    border-radius: 6px;
    border-left: 3px solid transparent;
}

/* تأثير التفاعل يشبه شريط التنقل */
.references-list li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid #0097A7;
    transform: translateX(5px); /* إزاحة خفيفة لليمين عند مرور الماوس */
}

/* حقوق النشر والتوثيق */
.copyright-notice {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    font-size: 0.85rem;
    color: #7a8b9a;
    line-height: 1.8;
}

.copyright-notice strong {
    color: #aed6f1;
}
/* ========================================= */
/* الوضع الليلي (Dark Mode Override) */
/* ========================================= */

/* ========================================= */
/* نعومة انتقال الألوان للوضع الليلي (Smooth Color Transition) */
/* ========================================= */
body, 
.content-section, 
.chapter-card, 
.mini-source-card, 
.source-card, 
.report-figure,
.chapter-sources-section,
.site-footer,
.main-header {
    /* تغيير تدريجي لخلفية الأقسام والحدود والظلال خلال نصف ثانية */
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

h1, h2, h3, h4, p, li, span, .section-title {
    /* تغيير تدريجي لألوان النصوص خلال نصف ثانية */
    transition: color 0.5s ease;
}

/* ملاحظة: لم نستخدم transition: all لكي لا نتداخل مع حركات الـ hover و scroll reveal */
/* تغيير ألوان الخلفية والنص الأساسية */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

/* تغيير ألوان البطاقات والأقسام البيضاء إلى رمادي داكن */
body.dark-mode .content-section,
body.dark-mode .chapter-card,
body.dark-mode .mini-source-card {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* تفتيح العناوين باللون الفيروزي الساطع لتبدو واضحة في الظلام */
body.dark-mode .section-title,
body.dark-mode .section-body h3,
body.dark-mode .subsection-title,
body.dark-mode .source-info h4,
body.dark-mode .source-text strong,
body.dark-mode .chapter-card h4 {
    color: #4dd0e1; 
}

/* تلوين النصوص العادية بالرمادي الفاتح (العاجي) */
body.dark-mode .section-body p, 
body.dark-mode .section-body ol,
body.dark-mode .source-info p,
body.dark-mode .source-text span,
body.dark-mode .report-figure figcaption {
    color: #cccccc;
}

/* تغيير خلفية الصور وبطاقات المصادر */
body.dark-mode .report-figure {
    background-color: #2a2a2a;
    border-color: #444;
}

body.dark-mode .source-card {
    background-color: #252525;
    border-left-color: #4dd0e1;
}

body.dark-mode .chapter-sources-section {
    background-color: #121212;
}

/* تعديل أرقام الفصول الباهتة لتناسب الخلفية الداكنة */
body.dark-mode .chapter-num {
    color: #2a2a2a; 
}

body.dark-mode .chapter-card:hover .chapter-num {
    color: #4dd0e1;
}
/* ========================================= */
/* زر العودة للأعلى (Back to Top) */
/* ========================================= */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #0097A7;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    
    /* إخفاء الزر افتراضياً */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.back-to-top-btn svg {
    width: 24px;
    height: 24px;
    margin-top: 4px;
}

.back-to-top-btn:hover {
    background-color: #112151;
    transform: translateY(-5px) scale(1.05); /* حركة رفع وتكبير خفيفة */
}

/* صنف يضيفه الجافاسكريبت لإظهار الزر */
.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* توافق الزر مع الوضع الليلي */
body.dark-mode .back-to-top-btn {
    background-color: #4dd0e1;
    color: #121212;
}
body.dark-mode .back-to-top-btn:hover {
    background-color: #ffffff;
}
/* ========================================= */
/* حركات الظهور عند التمرير (Scroll Reveal) */
/* ========================================= */

/* الحالة الافتراضية للأقسام: مخفية ومزاحة للأسفل قليلاً */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); /* حركة انسيابية جداً */
}

/* الحالة النشطة: تظهر وتعود لمكانها الطبيعي */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}