/* ================================================
   MODERN INVOICE — MSH PDF LAYOUT
   ================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10.5px; color: #000; background: #fff;
}

/* OUTER WRAPPER */
.modern-invoice {
    width: 100%;
    flex: 1;                /* fills #invoicePreview container on screen */
    min-height: 277mm;      /* A4 - 10mm top - 10mm bottom margins */
    display: flex;
    flex-direction: column;
    border: 1px solid #bbb;
}

/* (spacer replaced by filler rows in items table) */

/* ── TOP BAR ── */
.mi-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    border-bottom: 1px solid #bbb;
    background: #f5f5f5;
}
.mi-doc-title {
    font-size: 14px; font-weight: 800;
    letter-spacing: 3px; text-transform: uppercase;
    flex: 1; text-align: center; color: #111;
}
.mi-original {
    font-size: 9.5px; font-weight: 700;
    color: #555; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── HEADER: company left | invoice meta right ── */
.mi-header {
    display: flex;
    border-bottom: 1px solid #bbb;
    min-height: 90px;
}
.mi-company-col {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-right: 1px solid #bbb;
    overflow: hidden;
}
.mi-logo { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.mi-company-text { flex: 1; min-width: 0; }
.mi-company-name { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 3px; word-break: break-word; }
.mi-company-sub  { font-size: 9.5px; color: #333; line-height: 1.6; }

/* Meta grid: 2×2 + 1 full row */
.mi-meta-col {
    flex: 0 0 42%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.mi-meta-row {
    display: flex;
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}
.mi-meta-row:last-child { border-bottom: none; flex: 2; }
.mi-meta-cell {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 7px 10px;
    border-right: 1px solid #e0e0e0;
    font-size: 10.5px;
    line-height: 1.5;
}
.mi-meta-cell:last-child { border-right: none; }
.mi-meta-cell.full { flex: none; width: 100%; border-right: none; }
.mi-meta-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #777; margin-bottom: 2px; }
.mi-meta-val   { font-size: 11.5px; font-weight: 700; color: #111; }

/* ── CUSTOMER / BILLING ── */
.mi-customer {
    padding: 8px 12px;
    border-bottom: 1px solid #bbb;
    font-size: 10.5px;
    line-height: 1.6;
}
.mi-cust-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #777; margin-bottom: 2px; }

/* ── ITEMS TABLE ── */
.mi-items {
    width: 100%; border-collapse: collapse;
    font-size: 10px;
    border-bottom: 1px solid #bbb;
}
.mi-items thead { display: table-header-group; }
.mi-items thead tr { background: #eeeeee; }
.mi-items th {
    padding: 6px 4px; text-align: center;
    font-size: 9.5px; font-weight: 700;
    border: 1px solid #bbb;
    text-transform: uppercase; letter-spacing: 0.2px;
}
.mi-items td {
    padding: 5px 4px; vertical-align: top;
    border: 1px solid #ddd;
}
.mi-items tbody tr:nth-child(even) td { background: #fafafa; }
.mi-items tbody tr { page-break-inside: avoid; }
.mi-desc { font-size: 8.5px; color: #666; margin-top: 2px; font-style: italic; }
.mi-filler-row td { height: 20px; border-bottom: 1px solid #e8e8e8; border-right: 1px solid #ddd; }
.mi-filler-row td:last-child { border-right: none; }
.mi-filler-row:last-child td { border-bottom: none; }

/* ── TOTALS ── */
.mi-totals-wrap { border-top: 2px solid #1e3a5f; border-bottom: 1px solid #bbb; }
.mi-total-line {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #eee;
}
.mi-total-line:last-child { border-bottom: none; }
.mi-total-label { width: 130px; padding: 4px 8px; text-align: right; color: #444; font-size: 10.5px; font-style: italic; }
.mi-total-value { width: 90px; padding: 4px 8px; text-align: right; font-weight: 600; font-size: 10.5px; }
.mi-grand-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e3a5f;
    color: #fff;
    padding: 6px 10px;
    font-weight: 700; font-size: 11px;
}
.mi-grand-line .grand-left  { font-size: 10px; }
.mi-grand-line .grand-right { font-size: 13px; }

/* ── AMOUNT IN WORDS ── */
.mi-words {
    padding: 5px 10px;
    font-size: 10px;
    border-bottom: 1px solid #bbb;
    background: #fafafa;
    page-break-inside: avoid;
}

/* ── HSN SUMMARY ── */
.mi-hsn-section { border-bottom: 1px solid #bbb; page-break-inside: avoid; }
.mi-hsn-title { padding: 4px 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; color: #555; background: #f5f5f5; border-bottom: 1px solid #ddd; }
.mi-hsn {
    width: 100%; border-collapse: collapse; font-size: 9.5px;
}
.mi-hsn thead { display: table-header-group; }
.mi-hsn thead tr { background: #eeeeee; }
.mi-hsn th { padding: 5px 6px; border: 1px solid #bbb; font-weight: 700; text-align: center; font-size: 9px; }
.mi-hsn td { padding: 4px 6px; border: 1px solid #ddd; }
.mi-hsn tfoot tr { background: #e8ecf0; font-weight: 700; }

/* ── BOTTOM ROW: bank | qr | sign ── */
.mi-footer-row {
    display: flex;
    border-bottom: 1px solid #bbb;
    min-height: 80px;
    page-break-inside: avoid;
}
.mi-bank-col {
    flex: 1;
    padding: 8px 12px;
    border-right: 1px solid #bbb;
    font-size: 10px;
    line-height: 1.7;
}
.mi-bank-col b { font-size: 10px; }
.mi-bank-entry { margin-top: 5px; padding-top: 4px; border-top: 1px dashed #ddd; }
.mi-bank-entry:first-child { border-top: none; padding-top: 0; margin-top: 4px; }
.mi-qr-col {
    width: 135px;
    border-right: 1px solid #bbb;
    padding: 8px 6px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: 9.5px;
}
#upiQR { margin: 0 auto 4px; }
.mi-qr-label { font-size: 9px; font-weight: 700; color: #1e3a5f; text-align: center; }
.mi-qr-amt   { font-size: 10px; font-weight: 700; text-align: center; }
.mi-sign-col {
    width: 180px;
    padding: 8px 12px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    font-size: 10.5px;
    text-align: right;
}
.mi-sign-space { flex: 1; }

/* ── TERMS ── */
.mi-terms {
    padding: 7px 12px;
    font-size: 9.5px;
    line-height: 1.55;
    border-bottom: 1px solid #bbb;
    page-break-inside: avoid;
}
.mi-terms b { font-size: 10px; }

/* ── PAGE FOOTER ── */
.mi-page-footer {
    padding: 5px 12px;
    font-size: 10.5px;
    color: #555;
    text-align: center;
    background: #f5f5f5;
}

/* ── BARCODE ── */
#barcode {
    display: block;
    max-width: 100%;
    height: 28px;
    margin-top: 5px;
}

/* ── HELPERS ── */
.r { text-align: right; }
.c { text-align: center; }

/* ── PRINT ── */
@media print {
    @page { size: A4 portrait; margin: 8mm; }
    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    #invoicePreview { padding: 0 !important; }
    .modern-invoice { min-height: 277mm; }
    .mi-items tbody tr { page-break-inside: avoid; break-inside: avoid; }
    .mi-totals-wrap, .mi-words, .mi-hsn-section, .mi-footer-row, .mi-terms, .mi-page-footer { page-break-inside: avoid; }
}
