/* ════════════════════════════════════════════════════════════════
   نظام «إنجاز» — الطباعة (الشهادات)

   ⚠⚠ الدرس الأغلى المستفاد من مشروع سابق:
   صندوق الصفحة يُقاس بالمليمتر لا بالبكسل.
     794px  = 210.08mm  (أعرض من A4 بـ 0.08mm)
     1123px = 297.13mm  (أطول من A4 بـ 0.13mm)
   هذا الكسر الضئيل وحده يجعل المتصفح يعتبر الصفحة لا تتّسع
   فيولّد ورقة بيضاء زائدة بعد كل شهادة.
   الشهادات هنا **أفقية** (landscape) كما في نماذج المستخدم.
   ════════════════════════════════════════════════════════════════ */

@page { size: A4 landscape; margin: 0; }

@media print {
  /* لا شيء من الواجهة يُطبع — الشهادة وحدها */
  .sidebar, .topbar, .toasts, .overlay, .no-print, .btn { display: none !important; }

  /* أثناء الطباعة يُخفى كل شيء إلا مسرح الشهادات (#stage).
     الإخفاء بـvisibility لا display حتى لا ينهار تخطيط الأب. */
  body.printing .shell > .main > .wrap > *:not(#stage) { display: none !important; }
  body.printing #stage { display: block !important; }
  body.printing .shell, body.printing .main, body.printing .wrap {
    display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important;
  }

  body {
    background: #fff !important;
    background-image: none !important;
    color: #000;
  }

  .wrap { max-width: none; padding: 0; }

  /* صفحة الشهادة: أفقي A4 بالمليمتر بالضبط */
  .cert-page {
    width: 297mm;
    height: 210mm;
    margin: 0;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
    position: relative;
    display: block;
  }
  .cert-page:last-child { page-break-after: auto; break-after: auto; }

  /* الألوان الممتلئة تُطبع كما هي لا كتدرّج رمادي */
  .cert-page, .cert-page * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* على الشاشة: الشهادة معاينة مصغّرة تتكيّف مع عرض الحاوية */
@media screen {
  .cert-page {
    width: 297mm;
    height: 210mm;
    background: #fff;
    color: #17222e;
    margin-inline: auto;
    margin-block-end: var(--s5);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transform-origin: top center;
  }
}