/*
 * Line items in the quotation form.
 *
 * The layout itself is in the form schema — every band is a twelve-column grid
 * that adds up to twelve at each breakpoint, so the columns line up without any
 * help from here. This file only does what a form schema cannot: the folded-up
 * row heading, the tint on a section row, and right-aligned figures.
 *
 * Everything degrades to a plain, usable form if the stylesheet is missing, so
 * a deploy that has not run `php artisan filament:assets` is untidy, not broken.
 *
 * Colours come from Filament's own palette variables, which it emits as comma
 * separated triples — hence rgba(var(--x), a) rather than the slash syntax.
 */

/* -- The heading on each row ---------------------------------------------- */

/*
 * Filament's item header is a flex row; its <h4> does not grow, so the amount
 * would sit hard against the description. Let the heading take the free space
 * and the figure can hold the right-hand edge, where the eye looks for it.
 */
.qms-line-items .fi-fo-repeater-item-header > h4 {
    flex: 1 1 auto;
    min-width: 0;
}

.qms-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

/* The marker this row will print under — "A" for a heading, "3" for a line. */
.qms-item-marker {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 0.375rem;
    background-color: rgb(var(--gray-100));
    color: rgb(var(--gray-600));
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.qms-item-marker--section {
    background-color: rgb(var(--warning-100));
    color: rgb(var(--warning-700));
}

.qms-item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qms-item-amount {
    flex: none;
    margin-inline-start: auto;
    padding-inline-start: 0.75rem;
    color: rgb(var(--gray-500));
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.qms-item-tag {
    flex: none;
    margin-inline-start: auto;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: rgb(var(--warning-50));
    color: rgb(var(--warning-700));
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* -- The row itself -------------------------------------------------------- */

/*
 * Three bands stacked inside one row, so Filament's standard 1.5rem gap reads
 * as three separate cards. Tightened, the row holds together as one thing.
 */
.qms-line-items .fi-fo-repeater-item .fi-fo-component-ctn {
    gap: 1rem;
}

/* A heading row is a divider, not something the customer is charged for. */
.qms-row {
    border-radius: 0.5rem;
    transition: background-color 75ms ease;
}

.qms-row--section {
    margin: -0.5rem -0.625rem;
    padding: 0.5rem 0.625rem;
    background-color: rgb(var(--warning-50));
    box-shadow: inset 0 0 0 1px rgba(var(--warning-300), 0.6);
}

/* -- Figures --------------------------------------------------------------- */

/*
 * Quantities, rates and percentages read down a column, so they are set right
 * aligned and in tabular figures — the digits then line up between rows even
 * though each row is a separate grid.
 */
.qms-line-items input.qms-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* The line total is the answer the row exists to produce. Weight it. */
.qms-line-items .qms-line-total {
    padding-top: 0.375rem;
    color: rgb(var(--gray-950));
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

/* -- Dark mode ------------------------------------------------------------- */

.dark .qms-item-marker {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgb(var(--gray-300));
}

.dark .qms-item-marker--section {
    background-color: rgba(var(--warning-400), 0.2);
    color: rgb(var(--warning-300));
}

.dark .qms-item-amount {
    color: rgb(var(--gray-400));
}

.dark .qms-item-tag,
.dark .qms-row--section {
    background-color: rgba(var(--warning-400), 0.1);
    color: rgb(var(--warning-300));
}

.dark .qms-row--section {
    box-shadow: inset 0 0 0 1px rgba(var(--warning-400), 0.25);
}

.dark .qms-line-items .qms-line-total {
    color: rgb(255, 255, 255);
}

/* -- Small screens --------------------------------------------------------- */

@media (max-width: 640px) {
    /*
     * Two fields to a line on a phone, and the labels above them, so a row is
     * read top to bottom rather than squinted at side to side.
     */
    .qms-line-items .fi-fo-repeater-item .fi-fo-component-ctn {
        gap: 0.875rem;
    }

    .qms-line-items .fi-fo-repeater-item-header {
        gap: 0.5rem;
        padding-inline: 0.75rem;
    }

    /*
     * Five buttons, a marker and a figure leave a phone about ten characters
     * for the description, which is not a description. Given a second line the
     * heading says what the row is, and the amount keeps its own.
     */
    .qms-line-items .fi-fo-repeater-item-header > h4 {
        white-space: normal;
    }

    .qms-item {
        flex-wrap: wrap;
        row-gap: 0.125rem;
    }

    /* Shrinks to whatever the marker leaves it, and ellipses past that. */
    .qms-item-text {
        flex: 1 1 0;
    }

    /* A whole line's worth of basis, so the figure always takes the second. */
    .qms-item-amount,
    .qms-item-tag {
        flex: 1 0 100%;
        margin-inline-start: 2.125rem;
        padding-inline-start: 0;
        font-size: 0.8125rem;
    }

    /* Stretched across that line, the pill would be a band. Just the words. */
    .qms-item-tag {
        padding: 0;
        background: none;
    }
}