/* =============================================================
 * NNG Withdrawal of Request for Imbalance Trade Form
 * Form-specific overrides on top of `forms-base.css`.
 * ============================================================= */

/* Wider container so the two-column trader layout has room to
 * breathe without crowding inputs against their labels. */
.nng-form.withdrawal-form {
	width: min(1400px, 100%);
}

/* More vertical breathing room between form rows. */
.nng-form.withdrawal-form .form-body {
	gap: var(--nng-gap-lg);
	padding: 2rem;
}

.nng-form.withdrawal-form .trader-col {
	display: flex;
	flex-direction: column;
	gap: var(--nng-gap-lg);
	min-width: 0;
}

/* Two-column layout for Initiating Trader (left) and
 * Confirming Trader (right). Collapses to one column on
 * narrow viewports so labels and inputs remain readable. */
.nng-form.withdrawal-form .trader-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nng-gap-lg);
	align-items: start;
}

/* Inside the two trader columns, several labels are longer than
 * any reasonable fixed label column would be (e.g. "Contract
 * Holder - Initiating Trader Name"). Mixing wrapped and
 * non-wrapped labels makes input rows in the left and right
 * columns drift out of vertical alignment. To keep both columns
 * perfectly aligned, stack every label above its input at full
 * column width — labels and fields then share the same width
 * and every row has the same height regardless of label length. */
.nng-form.withdrawal-form .trader-col .form-row,
.nng-form.withdrawal-form .trader-col fieldset.form-row {
	flex-wrap: wrap;
}

.nng-form.withdrawal-form .trader-col .form-row > label,
.nng-form.withdrawal-form .trader-col .form-row > .form-label,
.nng-form.withdrawal-form .trader-col .form-row > legend {
	flex: 0 0 100%;
	max-width: 100%;
	margin-bottom: 0.25rem;
}

.nng-form.withdrawal-form .trader-col .form-row > input,
.nng-form.withdrawal-form .trader-col .form-row > select,
.nng-form.withdrawal-form .trader-col .form-row > .inline,
.nng-form.withdrawal-form .trader-col .form-row > .split-phone {
	flex: 0 0 70%;
	width: 70%;
	max-width: 70%;
}

/* The split-phone `.inline` wrapper itself is already 70% (same
 * as the text fields above). Stretch its three segments so they
 * share that same 70% width on one line — keeping the phone
 * field visually the same width as a regular text field. */
.nng-form.withdrawal-form .trader-col .form-row > .inline {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	align-items: center;
}

.nng-form.withdrawal-form .trader-col .form-row > .inline > input {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	max-width: none;
}

.nng-form.withdrawal-form .trader-col .field-error {
	margin-left: 0;
}

/* The two read-only TSP rows (provider name / provider DUNS)
 * read as a single block of header info, so tighten the gap
 * between them relative to the rest of the form body. */
.nng-form.withdrawal-form .form-body > .form-row:has(> input[name="provider_id"]) {
	margin-top: calc(var(--nng-gap-lg) * -1 + 0.25rem);
}

/* Collapse to single column on tablet and below. The stacked
 * label/input layout above already works at any width, so we
 * only need to drop the grid to one column here. */
@media (max-width: 960px) {

	.nng-form.withdrawal-form .trader-grid {
		grid-template-columns: 1fr;
	}
}