أريد تعديل طباعة PDF لجدول حضور الاجتماعات بحيث يكون مطابقاً قدر الإمكان لملف PDF المرفق.

المهم جداً:
لا تغيّر فكرة التصميم. أريد نفس شكل الملف المرجعي:
- عنوان في الأعلى: قائمة بأسماء حضور الاجتماعات
- جدول بسيط بالأعمدة:
  # | الاجتماع | الحضور | الوقت
- الاتجاه عربي RTL
- الخط المستخدم في كامل PDF:
  DIN Next LT Arabic

تنسيق الحضور المطلوب:
- أسماء الحضور تكون داخل نفس خلية الحضور بشكل أفقي inline.
- لا تجعل كل اسم في سطر مستقل.
- كل سطر يحتوي تقريباً 3 إلى 4 أسماء حسب طول الاسم.
- إذا زاد عدد الحضور، ينزل تلقائياً للسطر التالي.
- الشكل المطلوب مثل:
  -1 طارق عبدالله  -2 فهد احمد  -3 عبدالرحمن عبدالله
  -4 د. سالم الشمري  -5 سليمان محمد

مهم:
- أريد نفس أسلوب الترقيم الموجود في النموذج:
  -1 الاسم
  -2 الاسم
  -3 الاسم
- لا تستخدم قائمة عمودية طويلة.
- لا تستخدم ol/li إذا كانت تسبب انقلاب الأرقام.
- لا تجعل الترقيم يظهر بشكل خاطئ أو منفصل عن الاسم.
- الرقم والاسم يكونان قطعة واحدة مع بعض داخل span.

تنسيق الجدول:
- استخدم table حقيقي للطباعة.
- لا تستخدم flex لتقسيم أعمدة الجدول.
- العرض كامل الصفحة.
- حجم الصفحة A4 portrait.
- الهوامش مناسبة.
- النصوص محاذاة يمين.
- الوقت يكون واضح داخل عمود الوقت ولا يطلع خارج الجدول.
- الوقت يكون بصيغة مثل:
  12:20-12:50
  1:00-1:30

أحجام الأعمدة المقترحة:
- الرقم #: 8%
- الاجتماع: 30%
- الحضور: 42%
- الوقت: 20%

CSS مقترح:

@media print {
  @page {
    size: A4 portrait;
    margin: 12mm;
  }

  body {
    font-family: "DIN Next LT Arabic", Arial, sans-serif;
    direction: rtl;
    text-align: right;
    color: #000;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  th, td {
    padding: 6px 8px;
    vertical-align: top;
    text-align: right;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  th:nth-child(1), td:nth-child(1) {
    width: 8%;
    text-align: center;
  }

  th:nth-child(2), td:nth-child(2) {
    width: 30%;
  }

  th:nth-child(3), td:nth-child(3) {
    width: 42%;
  }

  th:nth-child(4), td:nth-child(4) {
    width: 20%;
    text-align: center;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
  }

  .attendees-inline {
    display: flex;
    flex-wrap: wrap;
    direction: rtl;
    text-align: right;
    gap: 2px 14px;
    line-height: 1.7;
  }

  .attendee-item {
    display: inline-block;
    white-space: nowrap;
    direction: rtl;
    unicode-bidi: isolate;
  }

  .meeting-title {
    direction: rtl;
    text-align: right;
    line-height: 1.6;
  }

  .footer {
    margin-top: 16px;
    font-size: 12px;
  }
}

طريقة توليد الحضور داخل HTML:
بدلاً من:
<ul>
  <li>طارق عبدالله</li>
</ul>

استخدم:
<div class="attendees-inline">
  <span class="attendee-item">-1 طارق عبدالله</span>
  <span class="attendee-item">-2 فهد احمد</span>
  <span class="attendee-item">-3 عبدالرحمن عبدالله</span>
  <span class="attendee-item">-4 د. سالم الشمري</span>
  <span class="attendee-item">-5 سليمان محمد</span>
</div>

المطلوب النهائي:
PDF يكون مثل الملف المرجعي تماماً من حيث:
- بساطة الجدول
- الحضور في نفس السطر
- 3 إلى 4 أسماء تقريباً في السطر
- عدم تداخل الأعمدة
- عدم خروج الوقت من مكانه
- الالتزام بخط DIN Next LT Arabic
- عدم تحويل الحضور إلى قائمة عمودية