<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مخططات التدفق الإجرائية</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

        :root {
            --navy-dark: #0A192F;
            --navy-primary: #1E293B;
            --gold-primary: #C5A059;
            --gold-light: #FBF7EE;
            --gray-bg: #F8FAFC;
            --gray-card: #FFFFFF;
            --gray-border: #E2E8F0;
            --gray-text: #64748B;
            --text-dark: #0F172A;
            --green-success: #059669;
            --red-alert: #DC2626;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Cairo', sans-serif;
        }

        body {
            background-color: #525659;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
        }

        /* A4 Page Formatting */
        .page {
            width: 210mm;
            height: 297mm;
            background: var(--gray-bg);
            padding: 20mm 15mm;
            margin-bottom: 20px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            page-break-after: always;
            overflow: hidden;
        }

        @media print {
            body {
                background: none;
                padding: 0;
            }
            .page {
                margin: 0;
                box-shadow: none;
                width: 210mm;
                height: 297mm;
            }
        }

        /* Header of Flowchart Page */
        .diagram-header {
            border-bottom: 2px solid var(--gold-primary);
            padding-bottom: 12px;
            margin-bottom: 20px;
            text-align: center;
        }

        .diagram-header h2 {
            color: var(--navy-dark);
            font-size: 20px;
            font-weight: 800;
        }

        .diagram-header p {
            color: var(--gold-primary);
            font-size: 13px;
            font-weight: 600;
        }

        /* Flowchart Elements */
        .flowchart-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
        }

        .node-start-end {
            background: var(--navy-dark);
            color: #FFFFFF;
            border: 2px solid var(--gold-primary);
            padding: 8px 30px;
            border-radius: 25px;
            font-weight: 700;
            font-size: 14px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(10, 25, 47, 0.15);
            min-width: 180px;
        }

        .node-process {
            background: var(--gray-card);
            border: 1px solid var(--gray-border);
            border-right: 5px solid var(--navy-primary);
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-dark);
            text-align: center;
            width: 85%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.04);
        }

        .node-decision {
            background: var(--gold-light);
            border: 2px solid var(--gold-primary);
            color: var(--navy-dark);
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            text-align: center;
            width: 80%;
            position: relative;
        }

        .branch-container {
            display: flex;
            justify-content: space-between;
            width: 90%;
            gap: 15px;
            margin: 5px 0;
        }

        .branch-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            background: #FFFFFF;
            padding: 10px;
            border-radius: 8px;
            border: 1px dashed var(--gray-border);
        }

        .branch-box.no {
            border-top: 3px solid var(--red-alert);
        }

        .branch-box.yes {
            border-top: 3px solid var(--green-success);
        }

        .branch-label {
            font-size: 11px;
            font-weight: 800;
            padding: 2px 10px;
            border-radius: 12px;
        }

        .branch-label.no { background: #FEE2E2; color: var(--red-alert); }
        .branch-label.yes { background: #D1FAE5; color: var(--green-success); }

        .arrow-down {
            color: var(--gold-primary);
            font-size: 16px;
            font-weight: bold;
            line-height: 1;
        }

        /* Footer Accent */
        .page-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--gray-border);
            padding-top: 10px;
            margin-top: 10px;
        }

        .page-footer .decor-line {
            height: 4px;
            width: 60px;
            background: var(--gold-primary);
            border-radius: 2px;
        }

        .page-footer .page-num {
            font-size: 11px;
            color: var(--gray-text);
            font-weight: 600;
        }
    </style>
</head>
<body>

    <!-- صفحة 1: مخطط الإجراء الأول -->
    <div class="page">
        <div class="diagram-header">
            <h2>مخطط تدفق الإجراء الأول</h2>
            <p>التحضير للرقابة القانونية على المعاملات المكتملة</p>
        </div>

        <div class="flowchart-container">
            <div class="node-start-end">البدائـة</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">استلام المعاملة المكتملة وقيدها بسجل الورود وتحديد رقمها الرقابي</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">مراجعة وفلترة اكتمال وثائق ومستندات المعاملة بشكل شكلي</div>
            <div class="arrow-down">↓</div>
            <div class="node-decision">◇ هل الوثائق أساسية ومكتملة للبدء؟ ◇</div>
            <div class="arrow-down">↓</div>
            
            <div class="branch-container">
                <div class="branch-box no">
                    <span class="branch-label no">لا</span>
                    <div class="node-process" style="width:100%; font-size:12px;">إرسال مذكرة طلب استكمال الوثائق وتعليق التحضير مؤقتاً</div>
                </div>
                <div class="branch-box yes">
                    <span class="branch-label yes">نعم</span>
                    <div class="node-process" style="width:100%; font-size:12px;">حصر وتحديد المرجعيات والنصوص القانونية الحاكمة للموضوع</div>
                </div>
            </div>

            <div class="arrow-down">↓</div>
            <div class="node-process">إعداد وتخصيص قائمة الفحص المرجعية المعتمدة للمهمة</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">تجميع ملف التحضير الرقابي واعتماده رسمياً للإحالة</div>
            <div class="arrow-down">↓</div>
            <div class="node-start-end">الإحالة إلى الإجراء الثاني (الفحص)</div>
        </div>

        <div class="page-footer">
            <div class="decor-line"></div>
            <div class="page-num">صفحة 1 من 5</div>
        </div>
    </div>

    <!-- صفحة 2: مخطط الإجراء الثاني -->
    <div class="page">
        <div class="diagram-header">
            <h2>مخطط تدفق الإجراء الثاني</h2>
            <p>الفحص القانوني ورصد الملاحظات</p>
        </div>

        <div class="flowchart-container">
            <div class="node-start-end">البدائـة</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">استلام ملف التحضير المعتمد وقائمة الفحص المرجعية</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">إجراء المطابقة بين الواقع الفعلي والمنظومة القانونية بنداً بنداً</div>
            <div class="arrow-down">↓</div>
            <div class="node-decision">◇ هل أظهرت المقارنة أي ملاحظات أو خلل؟ ◇</div>
            <div class="arrow-down">↓</div>

            <div class="branch-container">
                <div class="branch-box yes">
                    <span class="branch-label yes">لا (المسار الإيجابي)</span>
                    <div class="node-process" style="width:100%; font-size:11px;">إعداد تقرير إثبات الالتزام الإيجابي بالإشادة بالجهة/الموظف الملتزم</div>
                    <div class="arrow-down">↓</div>
                    <div class="node-process" style="width:100%; font-size:11px;">قيد النتيجة بسجل الامتثال وإغلاق الملف الرقابي نهائياً</div>
                </div>
                <div class="branch-box no">
                    <span class="branch-label no">نعم (المسار الرقابي)</span>
                    <div class="node-process" style="width:100%; font-size:11px;">صياغة الملاحظة بالمعادلة الرباعية النافية للجهالة وترتيب أدلتها</div>
                    <div class="arrow-down">↓</div>
                    <div class="node-process" style="width:100%; font-size:11px;">تعبئة استمارة الملاحظات المعتمدة وإحالتها للتحليل</div>
                </div>
            </div>

            <div class="arrow-down">↓</div>
            <div class="node-start-end">الإحالة إلى الإجراء الثالث (التحليل)</div>
        </div>

        <div class="page-footer">
            <div class="decor-line"></div>
            <div class="page-num">صفحة 2 من 5</div>
        </div>
    </div>

    <!-- صفحة 3: مخطط الإجراء الثالث -->
    <div class="page">
        <div class="diagram-header">
            <h2>مخطط تدفق الإجراء الثالث</h2>
            <p>التحليل والتقييم واستخلاص الاستنتاجات القانونية</p>
        </div>

        <div class="flowchart-container">
            <div class="node-start-end">البدائـة</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">استلام استمارة الملاحظات الرقابية المرصودة وأدلتها المستندية</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">تحديد ماهية الخلل والتكييف القانوني المباشر لطبيعة المخالفة</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">تقييم طبيعة الملاحظة وحجمها: (هل هي خطأ فردي أم ممارسة ظاهرة؟)</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">تحليل الأسباب الجذرية (مباشرة / تنظيمية / إجرائية / آلية)</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">تقدير الآثار والمخاطر الفعليه والمحتملة على كافة المستويات</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">صياغة الاستنتاج القانوني وتأطير مستوى الخطورة والتدخل المطلوب</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">اعتماد مذكرة التشخيص والتحليل القانوني الشاملة</div>
            <div class="arrow-down">↓</div>
            <div class="node-start-end">الإحالة إلى الإجراء الرابع (إعداد التقرير)</div>
        </div>

        <div class="page-footer">
            <div class="decor-line"></div>
            <div class="page-num">صفحة 3 من 5</div>
        </div>
    </div>

    <!-- صفحة 4: مخطط الإجراء الرابع -->
    <div class="page">
        <div class="diagram-header">
            <h2>مخطط تدفق الإجراء الرابع</h2>
            <p>إعداد التقرير الرقابي النهائي وصياغة التدابير والمقترحات</p>
        </div>

        <div class="flowchart-container">
            <div class="node-start-end">البدائـة</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">استلام مذكرة التشخيص والتحليل القانوني المعتمدة</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">صياغة التدابير التصحيحية (للمعالجة) والمقترحات الوقائية (منع التكرار)</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">بناء مصفوفة عناصر المعالجة الخمسة (الجهة، المتطلبات، المدة، دليل الإنجاز)</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">صياغة مسودة التقرير الرقابي النهائي الموحد وتدقيق جودته</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">رفع التقرير النهائي والمصفوفة للسلطة المختصة للاعتماد والتوجيه</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">قيد التقرير وإحالة مصفوفة المعالجة المعتمدة لمباشرة المتابعة</div>
            <div class="arrow-down">↓</div>
            <div class="node-start-end">الإحالة إلى الإجراء الخامس (المتابعة وتوثيق التنفيذ)</div>
        </div>

        <div class="page-footer">
            <div class="decor-line"></div>
            <div class="page-num">صفحة 4 من 5</div>
        </div>
    </div>

    <!-- صفحة 5: مخطط الإجراء الخامس -->
    <div class="page">
        <div class="diagram-header">
            <h2>مخطط تدفق الإجراء الخامس</h2>
            <p>متابعة وتوثيق التنفيذ وقياس الأثر والتغذية الراجعة</p>
        </div>

        <div class="flowchart-container">
            <div class="node-start-end">البدائـة</div>
            <div class="arrow-down">↓</div>
            <div class="node-process">قيد التقرير والمصفوفة في سجل متابعة الامتثال وإخطار الجهات</div>
            <div class="arrow-down">↓</div>
            <div class="node-decision">◇ هل تم استلام دليل وإثبات التنفيذ من الجهة؟ ◇</div>
            <div class="arrow-down">↓</div>

            <div class="branch-container">
                <div class="branch-box no">
                    <span class="branch-label no">لا</span>
                    <div class="node-process" style="width:100%; font-size:11px;">توجيه تذكير / رفع مذكرة تصعيد لعدم التنفيذ</div>
                </div>
                <div class="branch-box yes">
                    <span class="branch-label yes">نعم</span>
                    <div class="node-process" style="width:100%; font-size:11px;">دراسة كفاية دليل التنفيذ واستيفاء الشروط</div>
                </div>
            </div>

            <div class="arrow-down">↓</div>
            <div class="node-process">إجراء قياس التغذية الراجعة والأثر الميداني لتطبيق التدبير</div>
            <div class="arrow-down">↓</div>
            <div class="node-decision">◇ هل التدبير فعال وقضى على السبب الجذري؟ ◇</div>
            <div class="arrow-down">↓</div>

            <div class="branch-container">
                <div class="branch-box no">
                    <span class="branch-label no">لا</span>
                    <div class="node-process" style="width:100%; font-size:11px;">إعادة دراسة التدبير أو تصعيد المخالفة لعدم الفاعلية</div>
                </div>
                <div class="branch-box yes">
                    <span class="branch-label yes">نعم</span>
                    <div class="node-process" style="width:100%; font-size:11px;">توثيق الإنجاز وإصدار وثيقة إغلاق الملف رسمياً</div>
                </div>
            </div>

            <div class="arrow-down">↓</div>
            <div class="node-start-end">تحديث سجل الامتثال والأرشفة النهائيـة</div>
        </div>

        <div class="page-footer">
            <div class="decor-line"></div>
            <div class="page-num">صفحة 5 من 5</div>
        </div>
    </div>

</body>
</html>
