/* =====================================================================
   Logistics — A4 Print & Document Styles
   ---------------------------------------------------------------------
   يُستخدم في: الفاتورة الإلكترونية، كشف الحساب، وكل التقارير.
   الورقة: A4 عمودي 210×297مم بهوامش 12مم.
   ===================================================================== */

:root {
    --doc-w: 210mm;
    --doc-h: 297mm;
    --doc-pad: 12mm;
    --doc-ink: #111827;
    --doc-muted: #6b7280;
    --doc-line: #d1d5db;
    --doc-line-soft: #e5e7eb;
    --doc-head: #f3f4f6;
    --doc-brand: #1d4ed8;
}

/* ---------------------------------------------------------------
   ورقة A4 على الشاشة
   --------------------------------------------------------------- */

.doc-viewport {
    background: #e5e7eb;
    padding: 24px 12px;
    min-height: 100%;
}

.a4-sheet {
    width: var(--doc-w);
    min-height: var(--doc-h);
    margin: 0 auto 20px;
    padding: var(--doc-pad);
    background: #fff;
    color: var(--doc-ink);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 11pt;
    line-height: 1.5;
}

/* عرض أفقي لبعض التقارير العريضة */
.a4-sheet--landscape {
    width: var(--doc-h);
    min-height: var(--doc-w);
}

/* ---------------------------------------------------------------
   ترويسة المستند
   --------------------------------------------------------------- */

.doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14mm;
    padding-bottom: 5mm;
    border-bottom: 2px solid var(--doc-brand);
    margin-bottom: 6mm;
}

.doc-head__logo {
    max-height: 22mm;
    max-width: 45mm;
    object-fit: contain;
}

.doc-head__fallback {
    width: 20mm;
    height: 20mm;
    border-radius: 6px;
    background: var(--doc-brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20pt;
}

.doc-company__name {
    font-size: 14pt;
    font-weight: 800;
    margin: 0 0 1mm;
    line-height: 1.3;
}

.doc-company__name-alt {
    font-size: 10pt;
    font-weight: 600;
    color: var(--doc-muted);
    margin: 0 0 2mm;
}

.doc-company__meta {
    font-size: 8.5pt;
    color: var(--doc-muted);
    margin: 0;
    line-height: 1.7;
}

.doc-title-block {
    text-align: center;
    flex: none;
}

.doc-title {
    font-size: 15pt;
    font-weight: 800;
    margin: 0;
    color: var(--doc-brand);
    white-space: nowrap;
}

.doc-title-alt {
    font-size: 9pt;
    color: var(--doc-muted);
    margin: 1mm 0 0;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   شريط معلومات التقرير (المدى الزمني، الفلاتر)
   --------------------------------------------------------------- */

.doc-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3mm 8mm;
    padding: 3mm 4mm;
    background: var(--doc-head);
    border: 1px solid var(--doc-line-soft);
    border-radius: 3px;
    font-size: 9pt;
    margin-bottom: 5mm;
}

.doc-meta-bar b {
    color: var(--doc-muted);
    font-weight: 600;
}

/* بطاقات الطرفين في الفاتورة/كشف الحساب */
.doc-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5mm;
    margin-bottom: 5mm;
}

.doc-party {
    border: 1px solid var(--doc-line);
    border-radius: 3px;
    padding: 3mm 4mm;
    font-size: 9pt;
}

.doc-party__title {
    font-size: 9pt;
    font-weight: 800;
    color: var(--doc-brand);
    margin: 0 0 2mm;
    padding-bottom: 1.5mm;
    border-bottom: 1px solid var(--doc-line-soft);
}

.doc-party__row {
    display: flex;
    justify-content: space-between;
    gap: 4mm;
    padding: 0.8mm 0;
}

.doc-party__row span:first-child {
    color: var(--doc-muted);
}

.doc-party__row span:last-child {
    font-weight: 600;
    text-align: end;
}

/* ---------------------------------------------------------------
   جداول المستندات
   --------------------------------------------------------------- */

.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
    margin-bottom: 4mm;
}

.doc-table thead th {
    background: var(--doc-head);
    border: 1px solid var(--doc-line);
    padding: 2.2mm 2mm;
    font-weight: 700;
    text-align: start;
    white-space: nowrap;
}

.doc-table tbody td {
    border: 1px solid var(--doc-line-soft);
    padding: 2mm;
    vertical-align: middle;
}

.doc-table tbody tr:nth-child(even) td {
    background: #fafafa;
}

.doc-table tfoot td {
    border: 1px solid var(--doc-line);
    padding: 2.2mm 2mm;
    font-weight: 800;
    background: var(--doc-head);
}

.doc-table .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.doc-table .ctr {
    text-align: center;
}

.doc-table .w-sm { width: 18mm; }
.doc-table .w-md { width: 26mm; }
.doc-table .w-lg { width: 34mm; }

/* صف المجموع داخل الجسم */
.doc-table tr.is-total td {
    background: #eef2ff;
    font-weight: 800;
}

.doc-table tr.is-subtotal td {
    background: #f8fafc;
    font-weight: 700;
}

/* ---------------------------------------------------------------
   ملخص الإجماليات (الفاتورة)
   --------------------------------------------------------------- */

.doc-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6mm;
    margin-top: 3mm;
}

.doc-summary__side {
    flex: 1;
}

.doc-totals {
    width: 78mm;
    flex: none;
    border-collapse: collapse;
    font-size: 9.5pt;
}

.doc-totals td {
    padding: 2mm 3mm;
    border-bottom: 1px solid var(--doc-line-soft);
}

.doc-totals td:last-child {
    text-align: end;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.doc-totals tr.grand td {
    background: var(--doc-brand);
    color: #fff;
    font-size: 11pt;
    font-weight: 800;
    border-bottom: 0;
}

/* المبلغ كتابةً */
.doc-amount-words {
    margin-top: 3mm;
    padding: 2.5mm 3mm;
    border: 1px dashed var(--doc-line);
    border-radius: 3px;
    font-size: 9pt;
}

.doc-amount-words b {
    color: var(--doc-muted);
    font-weight: 600;
}

/* ---------------------------------------------------------------
   وسم QR
   --------------------------------------------------------------- */

.doc-qr {
    text-align: center;
    flex: none;
}

.doc-qr img {
    width: 30mm;
    height: 30mm;
    display: block;
    border: 1px solid var(--doc-line-soft);
    padding: 1.5mm;
    background: #fff;
}

.doc-qr__caption {
    font-size: 7pt;
    color: var(--doc-muted);
    margin-top: 1.5mm;
    line-height: 1.4;
    max-width: 34mm;
}

/* ---------------------------------------------------------------
   التوقيعات والتذييل
   --------------------------------------------------------------- */

.doc-signatures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10mm;
    margin-top: 10mm;
    font-size: 9pt;
    text-align: center;
}

.doc-signatures div {
    padding-top: 12mm;
    border-top: 1px solid var(--doc-ink);
}

.doc-foot {
    margin-top: auto;
    padding-top: 4mm;
    border-top: 1px solid var(--doc-line-soft);
    font-size: 8pt;
    color: var(--doc-muted);
    display: flex;
    justify-content: space-between;
    gap: 6mm;
}

.doc-note {
    font-size: 8.5pt;
    color: var(--doc-muted);
    margin-top: 3mm;
}

/* شارات الحالة */
.doc-badge {
    display: inline-block;
    padding: 0.6mm 2.5mm;
    border-radius: 10px;
    font-size: 8pt;
    font-weight: 700;
    border: 1px solid transparent;
}

.doc-badge--ok      { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.doc-badge--warn    { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.doc-badge--danger  { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.doc-badge--info    { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.doc-badge--muted   { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

/* شريط الأدوات — لا يُطبع */
.doc-toolbar {
    max-width: var(--doc-w);
    margin: 0 auto 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* حالة عدم وجود بيانات */
.doc-empty {
    text-align: center;
    padding: 18mm 4mm;
    color: var(--doc-muted);
    font-size: 10pt;
}

/* ---------------------------------------------------------------
   الطباعة
   --------------------------------------------------------------- */

@media print {

    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    @page landscape-page {
        size: A4 landscape;
    }

    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* إخفاء كل عناصر التطبيق المحيطة */
    .sidebar,
    .topbar,
    .public-navbar,
    .public-footer,
    .doc-toolbar,
    .no-print,
    nav,
    .btn {
        display: none !important;
    }

    /* تحييد تخطيط لوحة التحكم حتى لا يقصّ الورقة */
    .dashboard-wrapper,
    .dashboard-content,
    .page-content,
    .doc-viewport,
    main {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .a4-sheet {
        width: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        page-break-after: avoid;
    }

    .a4-sheet--landscape {
        page: landscape-page;
    }

    /* تكرار ترويسة الجدول في كل صفحة */
    .doc-table thead {
        display: table-header-group;
    }

    .doc-table tfoot {
        display: table-footer-group;
    }

    .doc-table tr,
    .doc-party,
    .doc-totals,
    .doc-qr {
        page-break-inside: avoid;
    }

    /* ضمان طباعة الألوان والخلفيات */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    a[href]::after {
        content: none !important;
    }
}

/* ---------------------------------------------------------------
   الشاشات الصغيرة — تصغير الورقة بدل قصّها
   --------------------------------------------------------------- */

@media screen and (max-width: 230mm) {
    .doc-viewport {
        padding: 12px 6px;
    }

    .a4-sheet {
        width: 100%;
        max-width: var(--doc-w);
        padding: 8mm;
    }

    .doc-parties {
        grid-template-columns: 1fr;
    }

    .doc-summary {
        flex-direction: column;
    }

    .doc-totals {
        width: 100%;
    }

    .doc-signatures {
        grid-template-columns: 1fr;
        gap: 6mm;
    }
}