/*
 * 4heat-specific UI rules.
 *
 * These lived appended to client/modules/autocrm/css/main.css on the host, which means every
 * Autocrm release silently reverted them. A module's built CSS is a deployment artifact; anything
 * this instance wants on top of it belongs here and is registered in
 * custom/Espo/Custom/Resources/metadata/app/client.json (cssList, appended last so it wins).
 */

/* Wider Product select modal + better description readability. */
.dialog-product-select > .modal-dialog {
    width: 96vw;
    max-width: 1400px;
}

.dialog-product-select .list-container td[data-name="description"] {
    white-space: normal;
    line-height: 1.25;
}

/* The record renderer adds a half-width hint to a few field types. Keep each Sales Order tab
 * at the column widths its layout defines. Scoped per panel, because one field (paymentTerms)
 * sits in a three-column row on Přehled and in a two-column row on Fakturace. */
@media (min-width: 992px) {
    #main [id^="sales-order-"] .panel[data-name="overview"] .cell.col-md-4 {
        width: 33.33333333% !important;
    }

    /* Expedice (3 columns: Kontakt doručení, Doručovací adresa, Termín dodání) and the header
     * of Fakturace (2 columns: Fakturační kontakt, payment terms). The layout lists one field per
     * row, column after column; each column starts at its first field and every field sits right
     * under the previous one, whatever the height of the neighbouring column. */
    #main [id^="sales-order-"] .panel:is([data-name="expedition"], [data-name="invoicing"]) .panel-body {
        column-gap: 30px;
        column-fill: balance;
    }

    #main [id^="sales-order-"] .panel[data-name="expedition"] .panel-body { column-count: 3; }
    #main [id^="sales-order-"] .panel[data-name="invoicing"] .panel-body { column-count: 2; }

    #main [id^="sales-order-"] .panel:is([data-name="expedition"], [data-name="invoicing"]) .panel-body > .row {
        break-inside: avoid;
        margin-left: 0;
        margin-right: 0;
    }

    #main [id^="sales-order-"] .panel:is([data-name="expedition"], [data-name="invoicing"]) .panel-body > .row > .cell {
        width: 100% !important;
        float: none;
    }

    #main [id^="sales-order-"] .panel:is([data-name="expedition"], [data-name="invoicing"]) .panel-body > .row:has(> .cell:is(
        [data-name="shippingAddress"],
        [data-name="expeditionDeliveryDate"],
        [data-name="invoicingProxyPaymentTerms"]
    )) {
        break-before: column;
    }
}

/* A label-only cell is a sub-heading of its column (Kontakt doručení, Fakturační kontakt),
 * written like the Doručovací adresa heading above the address. */
#main [id^="sales-order-"] .cell.fourheat-section-heading {
    margin-bottom: 0;
    min-height: 0;
}

#main [id^="sales-order-"] .cell.fourheat-section-heading > .field {
    display: none;
}

/* Amounts under Patička dokladu look like the Položky table: one dark grey bar with the
 * names, the values right under it, the columns side by side without gaps. */
#main [id^="sales-order-"] .row:has(> .cell:is([data-name="preDiscountedAmount"], [data-name="invoicingProxyPreDiscountedAmount"])) {
    /* Same left edge as the Položky table above; about 20 cm wide, not the whole screen. */
    margin-left: 8px;
    margin-right: 8px;
    max-width: 820px;
    display: flex;
}

#main [id^="sales-order-"] .row > .cell:is(
    [data-name="preDiscountedAmount"],
    [data-name="discountAmount"],
    [data-name="amount"],
    [data-name="taxRate"],
    [data-name="taxAmount"],
    [data-name="grandTotalAmount"],
    [data-name="invoicingProxyPreDiscountedAmount"],
    [data-name="invoicingProxyDiscountAmount"],
    [data-name="invoicingProxyAmount"],
    [data-name="invoicingProxyTaxRate"],
    [data-name="invoicingProxyTaxAmount"],
    [data-name="invoicingProxyGrandTotalAmount"]
) {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
    /* Each column as wide as its name, the six side by side. */
    flex: 1 1 0;
    min-width: max-content;
    width: auto !important;
}

#main [id^="sales-order-"] .row > .cell:is(
    [data-name="preDiscountedAmount"],
    [data-name="discountAmount"],
    [data-name="amount"],
    [data-name="taxRate"],
    [data-name="taxAmount"],
    [data-name="grandTotalAmount"],
    [data-name="invoicingProxyPreDiscountedAmount"],
    [data-name="invoicingProxyDiscountAmount"],
    [data-name="invoicingProxyAmount"],
    [data-name="invoicingProxyTaxRate"],
    [data-name="invoicingProxyTaxAmount"],
    [data-name="invoicingProxyGrandTotalAmount"]
) > .control-label {
    display: flex !important;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    margin: 0;
    padding: 8px 14px;
    min-height: 34px;
    background-color: rgb(114, 129, 148);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

#main [id^="sales-order-"] .row > .cell:is(
    [data-name="preDiscountedAmount"],
    [data-name="discountAmount"],
    [data-name="amount"],
    [data-name="taxRate"],
    [data-name="taxAmount"],
    [data-name="grandTotalAmount"],
    [data-name="invoicingProxyPreDiscountedAmount"],
    [data-name="invoicingProxyDiscountAmount"],
    [data-name="invoicingProxyAmount"],
    [data-name="invoicingProxyTaxRate"],
    [data-name="invoicingProxyTaxAmount"],
    [data-name="invoicingProxyGrandTotalAmount"]
) > .control-label :is(a, .text-muted, .inline-edit-link, span) {
    color: #fff;
}

#main [id^="sales-order-"] .row > .cell:is(
    [data-name="preDiscountedAmount"],
    [data-name="discountAmount"],
    [data-name="amount"],
    [data-name="taxRate"],
    [data-name="taxAmount"],
    [data-name="grandTotalAmount"],
    [data-name="invoicingProxyPreDiscountedAmount"],
    [data-name="invoicingProxyDiscountAmount"],
    [data-name="invoicingProxyAmount"],
    [data-name="invoicingProxyTaxRate"],
    [data-name="invoicingProxyTaxAmount"],
    [data-name="invoicingProxyGrandTotalAmount"]
) > .field {
    padding: 6px 14px;
}

/* Items of a received order: "Link Items" attaches rows of other documents, which an order never
 * needs; + adds an item, H adds a heading row. */
#main [id^="sales-order-"] .field[data-name="items"] [data-action="linkItems"] {
    display: none;
}

/* Colour cues for orientation: column sub-headings in the brand blue with a rule under them,
 * heading rows of the item table in bold on a light background. */
#main [id^="sales-order-"] .cell.fourheat-section-heading > .control-label,
#main [id^="sales-order-"] .panel[data-name="expedition"] .cell:is([data-name="shippingAddress"], [data-name="expeditionDeliveryDate"]) > .control-label,
#main [id^="sales-order-"] .panel[data-name="invoicing"] .cell[data-name="invoicingProxyPaymentTerms"] > .control-label {
    color: #1f5f99;
    font-weight: 600;
    border-bottom: 2px solid #cfe0f1;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

#main [id^="sales-order-"] tr.fourheat-heading-row > td:not([data-name="name"]) > * {
    visibility: hidden;
}

#main [id^="sales-order-"] tr.fourheat-heading-row > td[data-name="name"] {
    font-weight: 600;
    color: #1f5f99;
}

/* Upravit / tužka: the heading text is in an input, which kept the plain text colour (SUP-2349). */
#main [id^="sales-order-"] tr.fourheat-heading-row > td[data-name="name"] :is(input, textarea) {
    font-weight: 600;
    color: #1f5f99;
}