/* ============ متغيرات ============ */
:root {
    --je-bg: #fff;
    --je-ink: #0f172a;
    --je-muted: #64748b;
    --je-soft: #f1f5f9;
    --je-line: #e2e8f0;
    --je-accent: #2563eb;
    --je-ok: #059669;
    --je-warn: #dc2626;
    --je-shadow: 0 6px 24px rgba(15,23,42,.08);
}

/* ============ هيكل الصفحة ============ */
.je-page {
    font-family: "Cairo",Tahoma,Arial,sans-serif;
    color: var(--je-ink);
    background: var(--je-bg);
    display: grid;
    place-content: center;
    padding: 16px;
    width: 210mm; /* يثبت العرض مثل A4 */
    margin: 0 auto;
}

.je-doc {
    width: 100%;
    background: #fff;
}

/* ============ شريط الأدوات ============ */
.je-toolbar {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    margin: 10px 0 6px;
}

.je-btn {
    appearance: none;
    border: 1px solid var(--je-line);
    background: var(--je-soft);
    color: var(--je-ink);
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
}

.je-btn-primary {
    background: var(--je-accent);
    color: #fff;
    border-color: var(--je-accent);
}

.je-btn:hover {
    filter: brightness(.98);
}

/* ============ الهيدر ============ */
/* الشركة يمين / اللوجو يسار — حتى في الطباعة */
.je-header {
    display: flex;
    flex-direction: row-reverse; /* لأننا RTL: العنصر الأول يمين */
    align-items: center;
    justify-content: space-between;
    /*  gap: 16px;
    border-bottom: 2px solid var(--je-line);
    padding-bottom: 12px;
    margin-bottom: 14px;*/
    page-break-inside: avoid;
    break-inside: avoid;
}

.je-company {
    min-width: 260px;
}

.je-company-name {
    font-weight: 700;
    font-size: 18px;
}

.je-company-line {
    color: var(--je-muted);
    font-size: 13px;
}

.je-title-block {
    text-align: center;
    align-self: center;
}
/* لوجو كبير Stretch على اليسار */
.je-title-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 350px;
    flex: 1;
}

.je-logo-hero {
    width: 100%;
    max-height: 100px;
    object-fit: inherit;
}

/* عنوان مركزي أسفل الهيدر */
.je-title-center {
    text-align: center;
    margin: 10px 0 12px;
}

.je-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .3px;
}

/* ============ معلومات القيد ============ */
.je-info {
    margin-block: 10px 6px;
}

.je-info-card {
    border: 1px solid var(--je-line);
    background: var(--je-soft);
    border-radius: 10px;
    padding: 10px;
    page-break-inside: avoid;
    break-inside: avoid;
}

.je-info-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.je-info-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px 14px;
}

.je-info-item {
    display: inline;
    flex-direction: column; /* يخلي المفتاح فوق والقيمة تحت */
    align-items: flex-start; /* يخلي النص يبدأ من اليمين في RTL */
    gap: 2px; /* مسافة صغيرة بين المفتاح والقيمة */
    margin-bottom: 6px; /* مسافة بين كل عنصر والتاني */
}

.je-info-key {
    font-size: 0.85rem;
    color: #6b7280; /* رمادي */
}

.je-info-val {
    font-size: 1rem;
    font-weight: 400;
}

/* ============ جدول القيود ============ */
.je-table-wrap {
    margin-top: 10px;
}

.je-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--je-line);
    border-radius: 10px;
    overflow: hidden;
    table-layout: fixed;
}

    .je-table thead {
        background: #f8fafc;
        color: var(--je-ink);
        font-weight: 700;
        display: table-header-group;
    }

    .je-table th, .je-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--je-line);
        vertical-align: top;
        font-size: 13.5px;
    }

    .je-table tbody tr:nth-child(odd) {
        background: #fcfdff;
    }

    .je-table tbody tr:last-child td {
        border-bottom: none;
    }

.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}

.w-15 {
    width: 15%;
}

.w-10 {
    width: 10%;
}

.align-end {
    text-align: end;
}

.num {
    direction: ltr;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.je-table tbody tr {
    page-break-inside: avoid;
    break-inside: avoid;
}

/* ============ الإجماليات — في صف واحد دومًا ============ */
.je-totals {
    margin-top: 10px;
    page-break-inside: avoid;
    break-inside: avoid;
}

.je-totals-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    justify-content: space-between;
}

.je-total-item {
    border: 1px solid var(--je-line);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    display: grid;
    gap: 6px;
    flex: 1;
}

.je-total-key {
    color: var(--je-muted);
    font-size: 12px;
}

.je-total-val {
    font-weight: 800;
    font-size: 16px;
}

    .je-total-val.ok {
        color: var(--je-ok);
    }

    .je-total-val.warn {
        color: var(--je-warn);
    }

.je-badge {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid currentColor;
}

.badge-ok {
    color: var(--je-ok);
}

.badge-warn {
    color: var(--je-warn);
}

/* ============ التوقيعات ============ */
.je-signatures {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
    page-break-inside: avoid;
    break-inside: avoid;
}

.je-sign-block {
    display: grid;
    gap: 8px;
}

.je-sign-label {
    font-weight: 700;
}

.je-sign-line {
    height: 48px;
    border-bottom: 2px dashed var(--je-line);
}

/* صف ثلاثي الأعمدة يستغل عرض الصفحة */
.je-info.je-info-3col {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 0.9fr; /* فاتورة / عميل / QR */
    gap: 12px;
    align-items: stretch;
}

.je-info.je-info-2col {
    display: grid;
    grid-template-columns: 1fr 1fr; /* عمودين فقط */
    gap: 12px;
    align-items: stretch;
}

/* QR ثابت المقاس ومتمركز */
.je-qr-card {
    text-align: center;
}

.je-qr-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 8px 0;
}

.je-qr-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}

/* الملاحظات */
.je-notes {
    white-space: pre-wrap;
    line-height: 1.6;
}

/* شبكة بيانات البنك */
.je-bank-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px 16px;
}

.je-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--je-line);
    font-size: 14px;
    cursor: pointer;
}

/* ============ تجاوب ============ */
@media (max-width:900px) {
    .je-info-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .je-header {
        flex-direction: column-reverse;
        text-align: center;
    }

    .je-title-logo {
        max-width: none;
        width: 100%;
    }

    .je-totals-row {
        flex-direction: column;
    }
}

@media (max-width:520px) {
    .je-info-grid {
        grid-template-columns: 1fr;
    }

    .je-table th, .je-table td {
        font-size: 13px;
        padding: 7px 8px;
    }
}

@media (max-width: 992px) {
    .je-info.je-info-3col {
        grid-template-columns: 1fr;
    }

    .je-info-grid {
        grid-template-columns: 1fr;
    }

    .je-qr-wrap {
        padding: 12px 0;
    }
}

/* ============ الطباعة A4 — محسّن لإلغاء scroll والطباعة على صفحات متعددة ============ */
@page {
    size: A4 portrait;
    margin: 10mm;
}

@media print {
    /* إخفاء scroll تماماً */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
    }

    /* إخفاء scrollbars نهائياً */
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        overflow: visible !important;
    }

    /* اطبع فقط je-page */
    body * {
        visibility: hidden;
    }

    .je-page, .je-page * {
        visibility: visible;
    }

    .je-page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
        height: auto !important;
        page-break-after: auto !important;
    }

    .je-doc, .je-doc * {
        visibility: visible;
    }

    .je-doc {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* أبقي الهيدر صف واحد يمين/يسار في الطباعة أيضًا */
    .je-header {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        page-break-inside: avoid;
        break-inside: avoid;
        page-break-after: avoid;
        overflow: visible !important;
    }

    /* إجماليات في صف واحد */
    .je-totals-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: stretch !important;
        justify-content: space-between !important;
    }

    .print-hide, .je-toolbar, .sidebar, .navbar, .app-header, .app-footer, button {
        display: none !important;
        visibility: hidden !important;
    }

    body {
        margin: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* خلي سكشن المعلومات ثلاثي الأعمدة ثابت في صف واحد */
    .je-info.je-info-3col {
        display: grid !important;
        grid-template-columns: 1.25fr 1.4fr 0.9fr !important;
        gap: 10px !important;
        align-items: stretch !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* امنع تكسُّر الكروت جوه الصفحة */
    .je-info-card,
    .je-info-grid,
    .je-qr-card,
    .je-qr-wrap {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* شبكة عناصر النص جوه الكارتين: عمودين */
    .je-info-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px 16px !important;
    }

    /* حجم QR مناسب للطباعة ومش بياخد مساحة زيادة */
    .je-qr-img {
        width: 130px !important;
        height: 130px !important;
        object-fit: contain !important;
    }

    /* لو الصفحة زحمة جدًا، صغّر الخط داخل الكروت شوية */
    .je-info-card {
        font-size: 0.95rem;
    }

    .je-info-key {
        color: #6b7280;
    }

    .je-info-val {
        font-weight: 400;
    }

    .je-qr-img {
        width: 140px;
        height: 140px;
    }

    .je-info-card, .je-bank-grid, .je-info-grid {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* تحسين الجدول للطباعة على صفحات متعددة */
    .je-table-wrap {
        overflow: visible !important;
        page-break-inside: auto !important;
    }

    .je-table {
        overflow: visible !important;
        page-break-inside: auto !important;
        border-collapse: collapse !important;
    }

        .je-table thead {
            display: table-header-group !important;
        }

            .je-table thead tr {
                page-break-inside: avoid !important;
                page-break-after: avoid !important;
            }

        .je-table tbody {
            overflow: visible !important;
        }

            .je-table tbody tr {
                page-break-inside: avoid !important;
                page-break-after: auto !important;
            }

    /* التوقيعات */
    .je-signatures {
        page-break-inside: avoid !important;
    }

    /* الإجماليات */
    .je-totals {
        page-break-inside: avoid !important;
        page-break-before: avoid !important;
    }

    /* العنوان والمعلومات */
    .je-title-center {
        page-break-after: avoid !important;
    }

    .je-info {
        page-break-inside: avoid !important;
    }
}