/* =============================================================
 * NNG Storage Balancing Service Form
 * Form-specific overrides on top of `forms-base.css`.
 *
 * Skeleton modeled after the Feedback form: default base layout
 * with label-on-left / input-on-right rows. Add form-specific
 * tweaks here as fields are introduced.
 * ============================================================= */

/* The dynamic POI table has six data columns plus an actions cell;
 * the shared 960px form cap squeezes the headers ("Rate Schedule
 * for Storage Contract Number", "Transportation Contract Number")
 * onto multiple lines. Bump the form's max width so the table can
 * breathe without changing the global default for other forms. */
.nng-form.storage-balancing-service-form {
	width: min(1200px, 100%);
}

/* Align split-phone rows with the standard label/input grid used by
 * text inputs in this form. */
.nng-form.storage-balancing-service-form .form-row[role="group"] > .form-label {
	flex: 0 0 var(--nng-label-width);
	max-width: var(--nng-label-width);
}

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

.nng-form.storage-balancing-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;
}

.nng-form.storage-balancing-service-form .dynamic-table tbody tr:nth-child(even) td {
	background: var(--nng-color-surface);
}

.nng-form.storage-balancing-service-form .dynamic-table__remove {
	color: var(--nng-color-error);
	border-color: var(--nng-color-error);
	background: transparent;
}

.nng-form.storage-balancing-service-form .dynamic-table__remove:hover,
.nng-form.storage-balancing-service-form .dynamic-table__remove:focus-visible {
	background: var(--nng-color-error-bg);
}

/* -------------------------------------------------------------------------
 * Parent / child radio "Request Action" group:
 *  - Each parent option is a card the user can click anywhere on.
 *  - The chosen card is visually highlighted (`.is-active`); the
 *    inactive card is muted and uninteractive (JS toggles `disabled`
 *    + the `is-disabled` class on the children wrapper).
 *  - Values inside the inactive card are preserved on the DOM so
 *    flipping back-and-forth doesn't destroy work; the payload
 *    builder only emits the chosen branch's values.
 * ------------------------------------------------------------------------- */
.nng-form.storage-balancing-service-form .sbs-action-group {
	display: flex;
	flex-direction: column;
	gap: var(--nng-gap);
}

.nng-form.storage-balancing-service-form .sbs-action-option {
	display: flex;
	flex-direction: column;
	gap: var(--nng-gap-sm);
	width: 100%;
	box-sizing: border-box;
	align-self: stretch;
	padding: var(--nng-gap);
	border: 1px solid var(--nng-color-border);
	border-radius: var(--nng-radius-sm);
	background: transparent;
	cursor: pointer;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.nng-form.storage-balancing-service-form .sbs-action-option:hover,
.nng-form.storage-balancing-service-form
	.sbs-action-option:focus-within {
	border-color: var(--nng-color-border-strong, var(--nng-color-focus));
}

.nng-form.storage-balancing-service-form .sbs-action-option.is-active {
	border-color: var(--nng-color-focus);
	box-shadow: inset 4px 0 0 0 var(--nng-color-focus);
	cursor: default;
}

.nng-form.storage-balancing-service-form .sbs-action-parent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.nng-form.storage-balancing-service-form .sbs-action-parent input[type="radio"] {
	margin-block-start: 0.2rem;
	flex: 0 0 auto;
}

.nng-form.storage-balancing-service-form .sbs-action-parent-label {
	flex: 1 1 auto;
}

.nng-form.storage-balancing-service-form .sbs-action-children {
	display: flex;
	flex-direction: column;
	gap: var(--nng-gap-sm);
	margin-inline-start: 0.5rem;
	padding-inline-start: 1.25rem;
	border-inline-start: 2px solid var(--nng-color-border);
	transition: opacity 150ms ease;
}

/* Keep date / radio inputs inside the indented children block flush
 * with the text inputs outside the block. The card adds
 * 0.5rem (margin) + 1.25rem (padding) + 2px (border) ≈ 1.875rem of
 * inset on the row's left edge, so we shrink the label column by
 * the same amount; the input column then starts at the same X
 * coordinate as the rows above. */
.nng-form.storage-balancing-service-form .sbs-action-children .form-row > label,
.nng-form.storage-balancing-service-form
	.sbs-action-children
	.form-row > .form-label,
.nng-form.storage-balancing-service-form
	.sbs-action-children
	.form-row > legend {
	flex: 0 0 calc(var(--nng-label-width) - 1.875rem);
	max-width: calc(var(--nng-label-width) - 1.875rem);
}

.nng-form.storage-balancing-service-form
	.sbs-action-option.is-active
	.sbs-action-children {
	border-inline-start-color: var(--nng-color-focus);
}

.nng-form.storage-balancing-service-form .sbs-action-children.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* Child sub-question radio options ("Request is for the remaining term…" /
 * "Request is for a specific period…") should always stack vertically
 * inside the parent card, regardless of viewport width. The shared
 * `.radio-grid` rule lays them out as an auto-fit grid which lets the
 * two options sit side-by-side; override to a single column here so
 * the relationship between each option and its caption is unambiguous. */
.nng-form.storage-balancing-service-form .sbs-action-children .radio-grid {
	grid-template-columns: 1fr;
	gap: 0.5rem 0;
}

@media (max-width: 600px) {

	.nng-form.storage-balancing-service-form .sbs-action-children {
		margin-inline-start: 0;
		padding-inline-start: var(--nng-gap-sm);
	}
}