/* Line Items Section */

.line-items-compact {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Line items action buttons container - horizontal layout */
.line-items-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.line-items-actions .btn-add-line {
    flex: 1;
    margin-top: 0;
}

.line-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    contain: layout style; /* Isolate layout calculations */
}

/* Use content-visibility for off-screen line items (improves rendering of long lists) */
.line-item:nth-child(n+25) {
    content-visibility: auto;
    contain-intrinsic-size: auto 85px; /* Approximate height for scroll calculations */
}

/* Line item row - description row */
.line-item-row--desc {
    display: flex;
    gap: var(--space-1);
    align-items: flex-start;
}

.line-item-row--desc .line-item-desc {
    flex: 1;
}

/* Line item actions container */
.line-item-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* Remove button styled like custom field remove button */
.line-item-row--desc .btn-remove-line {
    height: var(--size-md);
    width: var(--size-md);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s; /* Specific properties only */
}

.line-item-row--desc .btn-remove-line:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

/* Drag button below remove button */
.line-item-row--desc .line-item-drag {
    height: var(--size-md);
    width: var(--size-md);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: 1;
    cursor: grab;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s; /* Specific properties only */
}

.line-item-row--desc .line-item-drag:hover {
    background: var(--bg);
    border-color: var(--primary);
    color: var(--primary);
}

.line-item-row--desc .line-item-drag:active {
    cursor: grabbing;
}

.line-item.is-dragging {
    opacity: 0.6;
}

.line-item.drag-over {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-subtle);
}

/* Line item row - fields row */
.line-item-row--fields {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    justify-content: flex-end;
}

.line-item-row--fields .line-item-qty {
    width: 5.5rem;
}

.line-item-row--fields .line-item-unit {
    width: 5rem;
    text-align: center;
}

.line-item-row--fields .line-item-price {
    width: 5rem;
}

.line-item-row--fields .line-item-tax-wrap {
    width: 4rem;
}

.line-item-row--fields .line-item-discount-wrap {
    width: 4rem;
}

.line-item-row--fields .line-item-total {
    width: 5rem;
}

/* Center text in quantity, unit, price fields */
.line-item-qty,
.line-item-unit,
.line-item-price {
    text-align: center;
}

.line-item-multiply {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

/* Line item inputs */
.line-item input,
.line-item select {
    height: var(--input-height);
    padding: 0 var(--space-2);
    font-size: var(--font-size-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    min-width: 0;
}

/* Required field indicator for line item inputs - removed per user request */
/* .line-item input[required],
.line-item textarea[required] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ctext x='0' y='11' fill='%23dc2626' font-size='12' font-weight='500'%3E•%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
    padding-right: 24px !important;
} */

.line-item input:focus,
.line-item select:focus,
.line-item textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-subtle);
}

/* Custom VAT visibility */
.line-item-tax-wrap[data-requires-custom-vat] {
    display: none;
}

.custom-vat-enabled .line-item-tax-wrap[data-requires-custom-vat] {
    display: block;
}

/* Hide custom VAT when global VAT is disabled */
.no-vat .line-item-tax-wrap[data-requires-custom-vat] {
    display: none !important;
}

/* Custom Discount visibility */
.line-item-discount-wrap[data-requires-custom-discount] {
    display: none;
}

.custom-discount-enabled .line-item-discount-wrap[data-requires-custom-discount] {
    display: block;
}

.line-item-discount {
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--space-1);
    font-size: var(--font-size-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}

.line-item-tax-wrap {
    min-width: 0;
    overflow: hidden;
}

.line-item-tax-wrap input,
.line-item-tax {
    width: 100%;
    text-align: center;
    padding: 0 var(--space-1);
    font-size: var(--font-size-sm);
}

.line-item-tax-wrap select {
    width: 100%;
}

.line-item-total {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text);
    text-align: right;
    padding-right: var(--space-1);
    white-space: nowrap;
    margin-left: var(--space-2);
}