/* =============================================================
 * NNG Pre-determined Allocation Form
 * Form-specific overrides on top of `forms-base.css`.
 * ============================================================= */

/* Create a grid wrapper for 2-column sections */
.nng-form.predetermined-allocation-form .reference-section,
.nng-form.predetermined-allocation-form .contact-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--nng-gap);
	width: calc(100% + 3rem);
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	padding: 0 1.5rem;
	box-sizing: border-box;
}

.nng-form.predetermined-allocation-form .reference-section > .form-row,
.nng-form.predetermined-allocation-form .contact-section > .form-row {
	min-width: 0;
	overflow: visible;
}

/* Warning message styling: appear
right below input field like an error message */
.nng-form.predetermined-allocation-form .form-warning {
	flex-basis: 100%;
	margin-left: var(--nng-label-width);
	margin-top: 0.25rem;
	padding: 0.5rem 0.75rem;
	font-size: var(--nng-font-size-sm);
	line-height: 1.4;
}

/* Dynamic table styling for allocation items */

/* Disabled Allocation Rank Level cells when alloc method disables them. */
.nng-form.predetermined-allocation-form
	.dynamic-table__cell[data-column="allocationRankLevel"]
	input:disabled {
	background: var(--nng-color-surface);
	color: var(--nng-color-text-muted);
	cursor: not-allowed;
	opacity: 0.5;
}

.nng-form.predetermined-allocation-form .dynamic-table__add {
	margin-top: 1rem;
}

.nng-form.predetermined-allocation-form .dynamic-table__remove {
	border-color: #dc3545;
    color: #dc3545;
}
.nng-form.predetermined-allocation-form .dynamic-table__remove:hover,
.nng-form.predetermined-allocation-form .dynamic-table__remove:focus-visible {
	background-color: #f8d7da;
	border-color: #dc3545;
    color: #dc3545;
}

/* Responsive: apply mobile-style warning and field-error at smaller widths */
@media (max-width: 1240px) {
	.nng-form.predetermined-allocation-form .form-warning {
		flex-basis: 100%;
		margin-left: 0;
		margin-top: 0.5rem;
	}

	/* Warning in reference section context should also be full-width */
	.nng-form.predetermined-allocation-form .reference-section ~ .form-warning,
	.nng-form.predetermined-allocation-form .contact-section ~ .form-warning {
		margin-left: 0;
	}

	/* Field errors in 2-column sections: remove label-width offset */
	.nng-form.predetermined-allocation-form .reference-section .field-error,
	.nng-form.predetermined-allocation-form .contact-section .field-error {
		margin-left: 0;
		flex-basis: 100%;
	}
}

/* Responsive: stack columns on smaller screens
(matches dynamic-table 720px breakpoint) */
@media (max-width: 720px) {
	.nng-form.predetermined-allocation-form .reference-section,
	.nng-form.predetermined-allocation-form .contact-section {
		grid-template-columns: 1fr;
	}
}