/* The four payment/receipt entry pages. They reuse CreateSaleInvoice.css wholesale — same cards,
   same floating-label fields, same party panels, same footer — so this file only carries what a
   voucher needs and an invoice does not.

   Everything that re-declares an invoice class is scoped under .payment-page, which the entry pages
   put on .invoice-container. Every stylesheet in this app is global (index.html loads them all), so
   an unscoped override here would reach the sale and purchase invoice pages too. */

/* An invoice fills the lower row three columns over: remarks+total / other+tax / expenses. A
   voucher has two blocks there, so a third column would only ever be an empty cell on the right.

   The party row above it is NOT overridden: it holds Paid From / Paid To / Amount Details, which is
   the same three-across the invoice uses for Bill To / Dispatch From / Ship To. */
.payment-page .invoice-amount-detail-header {
    grid-template-columns: 1fr 1fr;
}

/* The three columns' controls only line up if their header rows are the same height, and they are
   not: Received From / Paid To carries the group dropdown (41px), where Received In and Amount
   Details carry a bare label (19px). AccountGroupSelect.css already moves that column's 15px
   spacing off the label and onto the row so the label centres against the dropdown; doing the same
   to the other two gives all three the same 41px + 15px footprint, so the account dropdown, the
   bank dropdown and the two amount fields all start on one line. */
.payment-page .transaction-type-detail-header-subcolumn1-header {
    min-height: 41px;
    margin-bottom: 15px;
}

.payment-page .transaction-type-detail-header-subcolumn1-header .invoice-detail-header {
    margin-bottom: 0;
}

/* Amount and Kasar sit inside one third of the party row now, not across a card of their own, so
   they go side by side rather than at the four-across the invoice header fields use. No top margin:
   the header above them already carries the spacing, and a second one would drop them below the
   two dropdowns they line up with. */
.payment-page .amount-detail-header-subcolumn1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Same four-track shape as .grand-total-detail-grid, but this block is a running balance rather
   than a total, so it has no emphasised final row. */
.payment-summary-grid {
    display: grid;
    grid-template-columns: max-content 30px 10px max-content;
    row-gap: 5px;
    font-size: 12px;
}

.payment-summary-grid .detail-value {
    text-align: right;
}

/* What is still owed after this voucher, against what it settles. */
.amt-due {
    color: #dc2626;
}

.amt-settled {
    color: #16a34a;
}

/*================================ Tablet / mobile =====================================*/
/* CreateSaleInvoice.css folds its grids to two columns at 900px and one at 700px. The scoped rules
   above are more specific than those, so they would hold their own column count all the way down to
   a phone unless the same breakpoints are repeated here at the same specificity.

   .transaction-type-detail-header is not among them any more: it is no longer overridden above, so
   the invoice sheet's own breakpoints already fold it. */

@media (max-width: 700px) {
    .payment-page .invoice-amount-detail-header,
    .payment-page .amount-detail-header-subcolumn1 {
        grid-template-columns: 1fr;
        row-gap: 15px;
    }
}