/* Single static screen for the 36 Create/Edit invoice entry pages (.invoice-container.ie-compact),
   approved as Demo/InvoiceEntryCompactDemo.html. The page itself never scrolls: one strip of
   transaction fields, a row of four cards (Bill To | Dispatch From | Ship To | Transport + Extra
   Inputfields tabs), the product grid taking all the height that is left (it scrolls inside, header
   and Total row pinned), and one band of footer cards with Save / Cancel in the Grand Total card.

   Everything that lays the screen out sits inside the media query, so a phone or a very short window
   keeps CreateSaleInvoice.css's ordinary scrolling page. JournalEntry / CreatePayment borrow that
   stylesheet's classes but not .ie-compact, so none of this reaches them. */

/* Save / Cancel now live in the Grand Total card at every size. */
.ie-compact .ie-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.ie-compact .ie-btns .btn { font-weight: bold; }

/* Transportation Details / Extra Inputfields tabs */
.ie-compact .ie-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 2px;
    margin: 0 0 10px;
    border-bottom: 1px solid #e3e6ea;
}
.ie-compact .ie-tabs button {
    border: none;
    background: none;
    padding: 2px 8px 5px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: #605e5c;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}
.ie-compact .ie-tabs button.on { color: #007BFF; border-bottom-color: #007BFF; }
/* The Extra Inputfields tab is always offered; with no field set up at all it says so. */
.ie-compact .ie-empty { font-size: 11px; font-style: italic; color: #605e5c; padding: 6px 0; }

@media (min-width: 901px) and (min-height: 561px) {

    .invoice-container.ie-compact {
        overflow: hidden;
        padding: 6px 8px;
    }

    /* The frame: strip / card row / grid / footer, exactly the container's height. */
    .ie-compact .invoice-header {
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        gap: 6px;
    }

    .ie-compact .transaction-detail-header,
    .ie-compact .transaction-type-detail-header > div,
    .ie-compact .transportation-detail-header,
    .ie-compact .product-detail-header,
    .ie-compact .invoice-amount-detail-header > *,
    .ie-compact .other-and-tax-amount-container > *,
    .ie-compact .remark-and-grand-total-container > * {
        margin: 0;
        min-width: 0;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
        padding: 8px 10px;
    }

    .ie-compact .invoice-detail-header {
        margin-bottom: 8px;
        font-size: 13px;
    }

    /*------------------------------ fields: 26px tall ------------------------------*/
    .ie-compact .invoice-form-item select,
    .ie-compact .invoice-form-item input,
    .ie-compact .form-input {
        height: 26px;
        padding: 0 8px;
    }
    .ie-compact .invoice-form-item label { top: 7px; left: 10px; }
    /* A dropdown's label always sits on the border (.sbdropdown-item), never inside like an empty input's. */
    .ie-compact .invoice-form-item .sbdropdown-item label { top: 0; left: 10px; }
    .ie-compact .vd-trigger { height: 22px; padding: 4px 8px; }

    /*------------------------------ 1. transaction strip ------------------------------*/
    .ie-compact .transaction-detail-header {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .ie-compact .transaction-detail-header > .invoice-detail-header {
        margin: 0;
        white-space: nowrap;
        flex: none;
    }
    .ie-compact .invoice-mode {
        position: static;
        transform: none;
        flex: none;
        width: 220px;
        height: 26px;
        box-shadow: none;
    }
    /* Export / Import carry twelve fields here: they wrap onto a second line. */
    .ie-compact .transaction-detail-header-subcolumn1 {
        flex: 1;
        min-width: 0;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 12px 8px;
        padding-top: 6px;
    }

    /*------------------------------ 2. party + transport cards ------------------------------*/
    .ie-compact .transaction-type-detail-header { display: contents; }
    .ie-compact .transaction-type-detail-header > div { grid-row: 2; }
    .ie-compact .transaction-type-detail-header-subcolumn1-header { margin-right: 0; }
    .ie-compact .account-group-row { margin-bottom: 8px; }
    .ie-compact .account-group-row .invoice-detail-header { margin-bottom: 0; }

    /* .container is also Bootstrap's: its side padding would indent the card's content. */
    .ie-compact .transaction-type-detail-header .container { max-width: none; padding: 0; }

    /* A panel the Transaction Type doesn't use keeps its place, dimmed, so nothing moves around.
       entrynav.js skips its fields. */
    .ie-compact .ie-off { opacity: 0.45; pointer-events: none; position: relative; }
    .ie-compact .ie-off .panel { display: none; }
    .ie-compact .ie-off .container::after {
        content: "Not used for this Transaction Type";
        display: block;
        margin-top: 8px;
        font-size: 11px;
        font-style: italic;
        color: #605e5c;
    }

    /* Details: always open when filled, no "Details" header, two figures to a line. */
    .ie-compact .panel {
        margin-top: 6px;
        box-shadow: none;
        border-radius: 0;
        transition: none;
    }
    .ie-compact .panel.open { max-height: none; }
    .ie-compact .panel-header { display: none; }
    .ie-compact .panel-body { padding: 0; }
    .ie-compact .panel-body .detail-grid {
        grid-template-columns: auto 8px minmax(0, 1fr) auto 8px minmax(0, 1fr);
        column-gap: 4px;
        row-gap: 1px;
        font-size: 11px;
        line-height: 16px;
    }
    .ie-compact .panel-body .detail-value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Name is already in the dropdown above. */
    .ie-compact .dg-name,
    .ie-compact .dg-name + .detail-colon,
    .ie-compact .dg-name + .detail-colon + .detail-value { display: none; }
    /* Only City and Pincode are short enough to share a line; the rest get one each. */
    .ie-compact .dg-address + .detail-colon + .detail-value,
    .ie-compact .dg-state + .detail-colon + .detail-value,
    .ie-compact .dg-gst + .detail-colon + .detail-value,
    .ie-compact .dg-closing + .detail-colon + .detail-value,
    .ie-compact .dg-group + .detail-colon + .detail-value { grid-column: span 4; }
    /* The notes' Group goes last, under Closing. */
    .ie-compact .dg-group,
    .ie-compact .dg-group + .detail-colon,
    .ie-compact .dg-group + .detail-colon + .detail-value { order: 1; }

    .ie-compact .transportation-detail-header {
        grid-column: 4;
        grid-row: 2;
        display: block;
    }
    .ie-compact .ie-tabs { margin-right: 0; }
    .ie-compact .ie-transport {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 6px;
    }
    .ie-compact .ie-transport > div { display: contents; }
    .ie-compact .ie-transport .sbdropdown-item { grid-column: span 2; }
    .ie-compact .transportation-detail-header-subcolumn1,
    .ie-compact .transportation-detail-header-subcolumn2,
    .ie-compact .invoice-header-fields-detail-header-subcolumn1 { margin-top: 0; }
    .ie-compact .invoice-header-fields-detail-header-subcolumn1 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 6px;
    }
    .ie-compact .ie-extra .invoice-form-item textarea { height: 26px; padding: 4px 8px; }

    /*------------------------------ 3. product grid ------------------------------*/
    .ie-compact .product-detail-header {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .ie-compact .product-detail-header-subcolumn1,
    .ie-compact .product-detail-header .iig {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .ie-compact .product-detail-header .invoice-detail-header { margin-bottom: 6px; }

    /* Its own scroller again (fit mode otherwise hands the scroll to the page), with the table at
       least the box's height so the Total row lands on the bottom edge. */
    .ie-compact .iig .iig-wrap,
    .ie-compact .iig.iig-fit .iig-wrap {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: auto;
    }
    .ie-compact .iig-table { height: 100%; }
    .ie-compact .iig-table th { padding: 4px 6px; }
    .ie-compact .iig-table td { height: 28px; }
    .ie-compact .iig-in { height: 26px; }
    .ie-compact .iig.iig-fit tbody tr,
    .ie-compact .iig.iig-fit tbody input,
    .ie-compact .iig.iig-fit tbody .vd-container { scroll-margin-top: 32px; scroll-margin-bottom: 32px; }
    .ie-compact .iig-keys { margin-top: 4px; font-size: 10px; }

    /*------------------------------ 4. footer band ------------------------------*/
    /* Remarks | Expense Details | Other Details | Tax Details | Grand Total, in that order. */
    .ie-compact .invoice-amount-detail-header {
        grid-column: 1 / -1;
        margin: 0;
        padding: 0;
        background: none;
        box-shadow: none;
        display: flex;
        gap: 6px;
        height: 150px;
    }
    .ie-compact .other-and-tax-amount-container,
    .ie-compact .remark-and-grand-total-container { display: contents; }
    .ie-compact .invoice-amount-detail-header-subcolumn1 {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .ie-compact .remark-and-grand-total-container > :first-child { order: 1; }
    .ie-compact .invoice-amount-detail-header > .invoice-amount-detail-header-subcolumn1 { order: 2; flex-grow: 1.4; }
    .ie-compact .other-and-tax-amount-container > :first-child:not(:last-child) { order: 3; flex-grow: 0.9; }
    .ie-compact .other-and-tax-amount-container > :last-child { order: 4; }
    .ie-compact .remark-and-grand-total-container > :last-child { order: 5; flex-grow: 1.1; }

    .ie-compact .invoice-amount-detail-header .invoice-detail-header { margin-bottom: 6px; }
    .ie-compact .invoice-amount-detail-header-subcolumn1 > .invoice-form-item { flex: 1; min-height: 0; }
    .ie-compact .invoice-amount-detail-header-subcolumn1 > .invoice-form-item textarea { height: 100%; padding: 6px 8px; }

    .ie-compact .simple-panel {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    .ie-compact .panel-row { padding: 1px 0; gap: 4px; }
    .ie-compact .panel-row input { height: 24px; padding: 0 6px; }
    .ie-compact .col-name { font-size: 12px; }
    .ie-compact .expense-add-icon,
    .ie-compact .expense-minus-icon { width: 16px; height: 16px; }

    .ie-compact .other-details-container { gap: 12px; padding-top: 4px; }

    .ie-compact .tax-detail-grid,
    .ie-compact .grand-total-detail-grid {
        grid-template-columns: 1fr 12px 12px auto;
        row-gap: 2px;
        font-size: 11.5px;
    }
    /* the Invoice Amount line: the grid's last four cells */
    .ie-compact .grand-total-detail-grid > :nth-last-child(-n+4) {
        font-size: 15px;
        color: #007BFF;
        padding-top: 3px;
    }
    .ie-compact .ie-btns { margin-top: auto; }
    .ie-compact .ie-btns .btn { height: 28px; padding: 0 8px; font-size: 12px; }
}

/* Below that size the unused party panel is simply hidden again, as before. */
@media (max-width: 900px), (max-height: 560px) {
    .ie-compact .ie-off { display: none !important; }
}