/* Line-item editor rows.
 *
 * Markup is generated by static/js/utils/line-items-manager.js (_renderRowHTML),
 * which every line-items surface shares: the inline Price editor on quote / job /
 * invoice detail, the entity edit modals, and the quote form. Loaded globally
 * from base.html for that reason — the rows can appear on any of those pages.
 *
 * Layout intent: Description owns a full-width band of its own, everything else
 * sits on a second band as four self-labelling groups. The previous single
 * 12-column row packed eight -sm controls across and was unreadable; the fix
 * for that must not cost a third band of labels.
 *
 * Two states. A row that is complete and unfocused collapses to a one-line
 * summary (.is-collapsed, set by the manager); the row being edited stays open.
 * The remove button sits outside the collapsing part so it is reachable in both
 * states, and so it never joins the controls' wrap and lands on a line alone.
 */

/* The row card. Focus-within is what makes the line being edited stand out from
   its neighbours — with several rows stacked, nothing else says which one the
   keyboard is in. */
.line-item-card {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.line-item-card:focus-within {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.line-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
}

.line-item__main {
    flex: 1;
    /* Flex items refuse to shrink below their content width without this, which
       is what forces horizontal overflow on a phone. */
    min-width: 0;
}

/* ------------------------------------------------------------- Collapsed row */

.line-item__summary {
    display: none;
    width: 100%;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
}

.line-item-card.is-collapsed .line-item__summary {
    display: block;
}

.line-item-card.is-collapsed .line-item__editor {
    display: none;
}

/* Flex, not grid: the tax-rate picker only renders in multi-rate regions, so the
   column count is not fixed and auto-placement has to absorb that. */
.line-item__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

/* Basis values are the natural widths of each control's content ("Subcontractor"
   is the widest Type option). Qty and price grow into leftover space; the rest
   hold their size so the row reads the same at every width. */
.line-item__qty { flex: 1 1 9rem; }
.line-item__price { flex: 1 1 9rem; }
.line-item__type { flex: 0 1 8rem; width: auto; }
.line-item__rate { flex: 0 1 5.5rem; width: auto; }

/* Bootstrap's .form-check indents by 1.5rem to make room for the input, which it
   then pulls back with a negative margin. As a flex item that indent is dead
   space, and the default block display would break the row. */
.line-item__tax {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    margin-bottom: 0;
    cursor: pointer;
}

.line-item__tax .form-check-input {
    float: none;
    margin: 0;
}

/* Outside .line-item__main, so it holds the same place whether the row is open
   or collapsed and never wraps onto a line of its own. */
.line-item__remove {
    flex: 0 0 auto;
    align-self: center;
}

@media (max-width: 575.98px) {
    /* Qty+unit and price pair on one line, Type and the switch on the next —
       nothing takes the full width, which was the complaint about Type. */
    .line-item__qty { flex: 1 1 7rem; }
    .line-item__price { flex: 1 1 7rem; }
    .line-item__type { flex: 0 1 7.5rem; }
}