/* =============================================================
 * NNG Request for Operator Choice Form
 * Form-specific overrides on top of `forms-base.css`.
 *
 * Demonstrates three shared features that landed alongside this
 * form:
 *   - `Field_Renderer::note()` now allows `<table>` inside the
 *     allow-list, styled in `forms-base.css` under `.form-note`.
 *   - `Field_Renderer::inline_text()` for the "I {input}, ..."
 *     sentence, styled under `.form-inline-sentence`.
 *   - `Field_Renderer::dynamic_table()` with `'type' => 'radio'`
 *     columns, where each row is a one-of-N choice.
 * ============================================================= */

.nng-form.request-operator-choice-form {
	width: min(1100px, 100%);
	container-type: inline-size;
}

.nng-form.request-operator-choice-form,
.nng-form.request-operator-choice-form .form-note,
.nng-form.request-operator-choice-form .form-note th,
.nng-form.request-operator-choice-form .form-note td,
.nng-form.request-operator-choice-form .form-label,
.nng-form.request-operator-choice-form label,
.nng-form.request-operator-choice-form legend,
.nng-form.request-operator-choice-form .dynamic-table th,
.nng-form.request-operator-choice-form .dynamic-table td,
.nng-form.request-operator-choice-form .dynamic-table td::before {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
	line-break: auto;
}

.nng-form.request-operator-choice-form .form-intro {
	margin: 0;
	padding: 0.25rem 0;
	color: var(--nng-color-text);
	font-size: var(--nng-font-size);
	line-height: var(--nng-line-height);
}

.nng-form.request-operator-choice-form .form-inline-sentence {
	display: block;
	font-size: var(--nng-font-size);
	line-height: var(--nng-line-height);
}

.nng-form.request-operator-choice-form .form-inline-sentence__before,
.nng-form.request-operator-choice-form .form-inline-sentence__after {
	display: inline;
	font: inherit;
	line-height: inherit;
}

.nng-form.request-operator-choice-form .form-inline-sentence__input {
	display: inline;
	width: 16rem;
	max-width: 100%;
	min-height: 0;
	margin: 0 0.35rem;
	padding: 0 0 0.1rem;
	font: inherit;
	line-height: inherit;
	vertical-align: baseline;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--nng-color-border-strong);
	border-radius: 0;
	box-shadow: none;
}

.nng-form.request-operator-choice-form .form-inline-sentence__input:focus-visible {
	outline-offset: 1px;
	border-bottom-color: var(--nng-color-focus);
	box-shadow: inset 0 -1px 0 var(--nng-color-focus);
}

.nng-form.request-operator-choice-form .form-inline-sentence__input[aria-invalid="true"] {
	border-bottom-color: var(--nng-color-error);
	background: var(--nng-color-error-bg);
}

.nng-form.request-operator-choice-form .form-inline-sentence .required-mark {
	margin-inline-start: -0.1rem;
}

/* Comments textarea: a wider, taller box for free-form context. */
.nng-form.request-operator-choice-form textarea {
	flex: 1 1 28rem;
	min-width: 0;
	max-width: 40rem;
	min-height: 6rem;
	padding: 0.5rem 0.75rem;
	font: inherit;
	color: var(--nng-color-text);
	background: var(--nng-color-bg);
	border: 1px solid var(--nng-color-border-strong);
	border-radius: var(--nng-radius-sm);
	resize: vertical;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.nng-form.request-operator-choice-form textarea:focus-visible {
	outline: 3px solid var(--nng-color-focus);
	outline-offset: 2px;
	border-color: var(--nng-color-focus);
}

.nng-form.request-operator-choice-form textarea[aria-invalid="true"] {
	border-color: var(--nng-color-error);
	background: var(--nng-color-error-bg);
}

/* Keep date invalid styling visible in ROC even when later
 * date base rules reset input backgrounds. */
.nng-form.request-operator-choice-form input[type="date"][aria-invalid="true"] {
	border-color: var(--nng-color-error);
	background: var(--nng-color-error-bg);
}

/* Reference table inside the intro `.form-note`: the shared base
 * style uses the muted `--nng-color-border` token, which renders
 * almost invisibly on this form's background. Re-declare the table
 * grid with the stronger border token so the three confirmation
 * options read as distinct rows. */
.nng-form.request-operator-choice-form .form-note table {
	border: 1px solid var(--nng-color-border-strong);
}

.nng-form.request-operator-choice-form .form-note th,
.nng-form.request-operator-choice-form .form-note td {
	border: 1px solid var(--nng-color-border-strong);
}

/* Operator-choices table: lock the two data columns (Location Name
 * + Loc) to equal widths and the three radio columns to 7rem each
 * so every header sits over a single centered radio. The shared
 * `.dynamic-table` rules already handle row chrome + Remove button.
 *
*/
.nng-form.request-operator-choice-form .dynamic-table {
	table-layout: fixed;
}

.nng-form.request-operator-choice-form .dynamic-table__scroll {
	overflow-x: visible;
}

.nng-form.request-operator-choice-form
	.dynamic-table th[data-column="locationName"],
.nng-form.request-operator-choice-form
	.dynamic-table td[data-column="locationName"],
.nng-form.request-operator-choice-form
	.dynamic-table th[data-column="loc"],
.nng-form.request-operator-choice-form
	.dynamic-table td[data-column="loc"] {
	width: 30%;
}

.nng-form.request-operator-choice-form
	.dynamic-table th[data-column="passive"],
.nng-form.request-operator-choice-form
	.dynamic-table td[data-column="passive"],
.nng-form.request-operator-choice-form
	.dynamic-table th[data-column="active"],
.nng-form.request-operator-choice-form
	.dynamic-table td[data-column="active"],
.nng-form.request-operator-choice-form
	.dynamic-table th[data-column="exception"],
.nng-form.request-operator-choice-form
	.dynamic-table td[data-column="exception"] {
	width: 5.5rem;
	min-width: 5.5rem;
	padding-inline: 0.25rem;
	text-align: center;
	white-space: normal;
}

/* Keep the longest radio-column label fully visible. */
.nng-form.request-operator-choice-form
	.dynamic-table th[data-column="exception"],
.nng-form.request-operator-choice-form
	.dynamic-table td[data-column="exception"] {
	width: 9rem;
	min-width: 9rem;
	overflow: visible;
	text-overflow: clip;
}

/* Radio-choice validation sentence: render as a dedicated row and
 * visually align it under the three choice columns on desktop. */
.nng-form.request-operator-choice-form .dynamic-table tr.roc-choice-error-row td {
	border: 0;
	padding: 0.15rem 0 0.55rem;
	background: transparent;
}

.nng-form.request-operator-choice-form .dynamic-table .roc-choice-error-cell > .field-error {
	display: block;
	margin: 0;
	margin-left: 60%;
	padding-inline: 0.4rem;
	text-align: center;
	white-space: normal;
}

.nng-form.request-operator-choice-form .dynamic-table tbody tr:nth-child(even) td {
	background: var(--nng-color-surface);
}

/* Actions column: with `table-layout: fixed`, the shared 1%/auto
 * width on `.dynamic-table__actions-col` resolves to nearly 0px
 * because the other columns consume the full table width first.
 * Lock the actions column to 5rem so the "Remove" button text fits
 * without overflowing outside the table border. */
.nng-form.request-operator-choice-form .dynamic-table__actions-col,
.nng-form.request-operator-choice-form .dynamic-table__actions {
	width: 5rem;
	min-width: 5rem;
	text-align: center;
}

/* Remove button: override the shared `.nng-btn { min-width: 6.5rem }`
 * so the button stays within the fixed-width actions column instead
 * of overflowing past the table border. */
.nng-form.request-operator-choice-form .dynamic-table__remove {
	min-width: 0;
	max-width: 100%;
	padding-inline: 0.4rem;
	color: var(--nng-color-error);
	background: transparent;
	border-color: var(--nng-color-error);
}

.nng-form.request-operator-choice-form .dynamic-table__remove:hover,
.nng-form.request-operator-choice-form .dynamic-table__remove:focus-visible {
	background: var(--nng-color-error-bg);
}

.nng-form.request-operator-choice-form .dynamic-table__toolbar {
	margin-block-start: var(--nng-gap);
	display: flex;
	justify-content: flex-end;
}

.nng-form.request-operator-choice-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;
}

/* ---------------------------------------------------------------
 * Responsive: stacked-card layout below 720px.
 * ------------------------------------------------------------- */
@container (max-width: 720px) {

	.nng-form.request-operator-choice-form textarea {
		max-width: 100%;
	}

	.nng-form.request-operator-choice-form .form-inline-sentence__input {
		width: 12rem;
	}

	.nng-form.request-operator-choice-form .dynamic-table,
	.nng-form.request-operator-choice-form .dynamic-table tbody,
	.nng-form.request-operator-choice-form .dynamic-table tr {
		display: block;
		width: 100%;
	}

	/* Visually hide the header — every cell renders its own label
	 * via `::before` below. */
	.nng-form.request-operator-choice-form .dynamic-table thead {
		position: absolute;
		clip: rect(0 0 0 0);
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
	}

	.nng-form.request-operator-choice-form
		.dynamic-table tbody tr.dynamic-table__row {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 0.75rem;
		margin-bottom: var(--nng-gap);
		padding: 0.75rem;
		background: var(--nng-color-bg);
		border: 1px solid var(--nng-color-border);
		border-radius: var(--nng-radius-sm);
	}

	/* Shared label chrome for every stacked cell. The radio-specific
	 * rule below only tweaks the font size for the tile layout. */
	.nng-form.request-operator-choice-form
		.dynamic-table td.dynamic-table__cell::before {
		font-weight: 600;
		color: var(--nng-color-text);
	}

	/* Text / number cells: "Label * : input" inline layout.
	 *
	 * Grid with label in first row (::before + ::after) and input in
	 * second row below. Both pseudo-elements use display: inline so
	 * the asterisk flows directly after the label text. Error messages
	 * are auto-placed in the 3rd row. */
	.nng-form.request-operator-choice-form
		.dynamic-table td.dynamic-table__cell:not(.dynamic-table__cell--radio) {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.35rem 0;
		align-items: start;
		flex: 1 1 100%;
		padding: 0.4rem 0;
		background: transparent;
		border-bottom: 0;
		text-align: left;
	}

	.nng-form.request-operator-choice-form
		.dynamic-table td.dynamic-table__cell:not(.dynamic-table__cell--radio)::before {
		grid-column: 1;
		grid-row: 1;
		display: inline;
		font-weight: 600;
		color: var(--nng-color-text);
	}

	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="locationName"]::after,
	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="loc"]::after {
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		content: "*";
		color: var(--nng-color-required);
		font-weight: 700;
	}

	/* Radio cells: labeled tiles that flow side-by-side. */
	.nng-form.request-operator-choice-form
		.dynamic-table td.dynamic-table__cell--radio {
		display: inline-flex;
		flex: 1 1 auto;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.35rem;
		min-width: 3rem;
		padding: 0.5rem;
		text-align: center;
		background: var(--nng-color-surface);
		border: 1px solid var(--nng-color-border);
		border-radius: var(--nng-radius-sm);
	}

	.nng-form.request-operator-choice-form
		.dynamic-table td.dynamic-table__cell--radio::before {
		font-size: var(--nng-font-size-sm);
		line-height: 1.2;
	}

	/* Per-column label text. */
	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="locationName"]::before {
		content: "Location Name";
		padding-left: 0.75rem;
	}

	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="loc"]::before {
		content: "Loc";
		padding-left: 0.75rem;
	}

	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="locationName"],
	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="loc"] {
		position: relative;
	}

	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="passive"]::before {
		content: "Passive";
	}

	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="active"]::before {
		content: "Active";
	}

	.nng-form.request-operator-choice-form
		.dynamic-table td[data-column="exception"]::before {
		content: "Confirm by Exception";
	}

	/* Actions row: full-width, right-aligned. */
	.nng-form.request-operator-choice-form
		.dynamic-table td.dynamic-table__actions {
		display: flex;
		justify-content: flex-end;
		flex: 1 1 100%;
		padding-top: 0.5rem;
		border-bottom: 0;
	}

	.nng-form.request-operator-choice-form
		.dynamic-table tr.roc-choice-error-row {
		display: block;
		width: 100%;
	}

	.nng-form.request-operator-choice-form
		.dynamic-table .roc-choice-error-cell > .field-error {
		margin-left: 0;
		padding-inline: 0;
		text-align: left;
	}
}