/* الأنماط المخصصة للطباعة - الحل النهائي المعتمد على display: table */
@media print {

    /* أولاً، نخفي كل شيء في الصفحة ما عدا المحتوى الذي نريده */
    body > .wrapper > *:not(.content-page) {
        display: none !important;
    }

    .content-page footer.footer, .navbar-custom, .topnav {
        display: none !important;
    }

    /* نجبر الحاوية الرئيسية على التصرف كجدول */
    .printable-area {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    /* نجبر الهيدر على التصرف كرأس جدول (وهذا يجعله يتكرر في كل صفحة) */
    .printable-header {
        display: table-header-group;
    }

    /* نجبر الفوتر على التصرف كتذييل جدول (وهذا يجعله يتكرر في كل صفحة) */
    .printable-footer {
        display: table-footer-group;
    }

    /* المحتوى الأساسي سيكون جسم الجدول */
    .printable-content {
        display: table-row-group;
    }

    /* نضمن أن الهيدر والفوتر لا ينقسمان على صفحتين */
    .printable-header, .printable-footer {
        page-break-inside: avoid;
    }

        /* تحسين حجم الصور داخل الهيدر والفوتر المكرر */
        .printable-header img, .printable-footer img {
            width: 100%;
            height: auto;
        }

    /* === التعديل المطلوب هنا === */
    @page {
        size: A4 portrait;
        margin: 0; /* تم تغيير القيمة إلى 0 لإلغاء الهوامش */
    }

    @media print {
        .no-print-section,
        .no-print-section * {
            display: none !important;
        }
    }


    .table-dark th {
        background-color: #fff !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        color: black !important;
    }

}

/* في وضع الشاشة العادي، نخفي الهيدر والفوتر المخصصين للطباعة */
@media screen {
    .printable-header,
    .printable-footer {
        display: none;
    }
}