/* =============================================================
 * NNG Firm Deferred Delivery Service Form
 * Form-specific overrides on top of `forms-base.css`.
 *
 * Patterned after the Interruptible & Pooling Services form:
 *   - Two-column Shipper / Agent grid via `.party-grid`.
 *   - Tightened spacing on the Contract Options checkbox row so
 *     the three options sit side-by-side comfortably.
 * ============================================================= */

/*
 * Shipper / Agent two-column layout: Shipper info in column 1, Agent
 * info in column 2. Collapses to a single column on narrow viewports.
 */
.nng-form.firm-deferred-delivery-service-form .party-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nng-gap-lg);
	align-items: start;
}

.nng-form.firm-deferred-delivery-service-form .party-col {
	display: flex;
	flex-direction: column;
	gap: var(--nng-gap-sm);
	min-width: 0;
}

/*
 * Contract Options fieldset: three short checkboxes that should sit
 * inline on a single row when there's room and wrap on narrow
 * viewports without collapsing to a stacked layout that hides the
 * grouping.
 */
.nng-form.firm-deferred-delivery-service-form [id="contract_options_"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nng-gap);
	align-items: center;
}

.nng-form.firm-deferred-delivery-service-form
[id="contract_options_"] > .checkbox-label {
	flex: 0 0 auto;
}

.nng-form.firm-deferred-delivery-service-form .dynamic-table__toolbar {
	margin-block-start: var(--nng-gap);
	display: flex;
	justify-content: flex-end;
}

.nng-form.firm-deferred-delivery-service-form .dynamic-table__add {
	width: auto;
	min-width: 9rem;
	flex: 0 0 auto;
	align-self: flex-end;
	padding-inline: var(--nng-gap);
	white-space: nowrap;
}

/*
 * Term of Service group: a labeled fieldset wrapping the two date
 * fields. The base `.form-row > legend` rule docks legends into the
 * narrow left label column (next to `.radio-grid` / `.checkbox-grid`
 * siblings). Here we want the legend to behave as a heading SITTING
 * ABOVE its grouped controls instead, so we widen the legend to span
 * the row and let each nested `.form-row` lay out normally below it.
 */
.nng-form.firm-deferred-delivery-service-form .date-range-row {
	flex-direction: column;
	gap: var(--nng-gap-sm);
}

.nng-form.firm-deferred-delivery-service-form .date-range-row > legend {
	flex: 1 1 100%;
	max-width: none;
	padding-top: 0;
	margin-bottom: 0.25rem;
}

@media (max-width: 720px) {

	.nng-form.firm-deferred-delivery-service-form .party-grid {
		grid-template-columns: 1fr;
	}
}