/* =============================================================
 * NNG Operationally Available Capacity filter
 * Two-row, three-column criteria grid + CLEAR / RETRIEVE toolbar
 * on top of `forms-base.css`.
 * ============================================================= */

/* ----- Panel chrome overrides -----
 * Match the Gas Quality filters: tighter corners and a single unified
 * surface colour for the whole filter (header + body) instead of the
 * default white card with a blue header bar. */
.nng-form.operationally-available-filter {
	/* Site style guide: Lato. Bold is the default for all filter text;
	 * controls and buttons are reset to normal weight below. */
	--nng-font: var(
		--wp--preset--font-family--lato,
		"Lato",
		"Helvetica Neue",
		arial,
		sans-serif
	);
	background: #f7f7f7;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-weight: 700;
}

.nng-form.operationally-available-filter .form-header {
	background: transparent;
	color: var(--nng-color-text);
}

.operationally-available-filter__view-switcher {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1.5rem;
}

.operationally-available-filter__view-switcher[hidden] {
	display: none;
}

.operationally-available-filter__view-button.nng-btn {
	background: #fff;
	border: 1px solid var(--wp--preset--color--accent-1, #2054ae);
	color: var(--wp--preset--color--accent-1, #2054ae);
	font-family: var(
		--wp--preset--font-family--lato,
		"Lato",
		"Helvetica Neue",
		arial,
		sans-serif
	);
	font-size: 1rem;
	font-weight: 400;
	max-width: none;
	min-height: 3rem;
	min-width: 9rem;
}

.operationally-available-filter__view-button[aria-selected="true"] {
	background: var(--wp--preset--color--accent-1, #2054ae);
	color: #fff;
}

/* All non-control filter text is Lato Bold (header + field labels). */
.nng-form.operationally-available-filter .form-header,
.nng-form.operationally-available-filter .form-row > label {
	font-weight: 700;
}

/* Control text (date, dropdowns, text input) stays Lato Normal. */
.nng-form.operationally-available-filter input,
.nng-form.operationally-available-filter select {
	font-weight: 400;
}

/* Dropdown text and the field footnotes use a dark gray: lighter than
 * the near-black header text, darker than the CLEAR button surface.
 * The date picker keeps the default near-black control colour. */
.nng-form.operationally-available-filter select,
.nng-form.operationally-available-filter .form-note {
	color: #6b7385;
}

/* Footnotes are normal weight (the filter sets Lato Bold as the default
 * for all text, which would otherwise bold the notes too). */
.nng-form.operationally-available-filter .form-note {
	font-weight: 400;
}

/* ----- Two-row, three-column criteria grid ----- */
.nng-form.operationally-available-filter .operationally-available-filter__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--nng-gap) var(--nng-gap-lg);
	align-items: start;
}

/* Each grid cell stacks its label above the control (column layout)
 * instead of the default label-beside-control row. This applies to the
 * Field_Renderer `.form-row`s rendered directly into the grid as well
 * as the custom Search Parameters cell wrapper. */
.nng-form.operationally-available-filter
	.operationally-available-filter__grid
	> .form-row,
.nng-form.operationally-available-filter
	.operationally-available-filter__cell
	> .form-row {
	flex-direction: column;
	align-items: stretch;
	margin: 0;
}

/* Reset the inherited fixed-width label column from forms-base: in this
 * stacked layout the 18rem basis would be read as height. */
.nng-form.operationally-available-filter
	.operationally-available-filter__grid
	> .form-row
	> label,
.nng-form.operationally-available-filter
	.operationally-available-filter__cell
	> .form-row
	> label {
	flex: 0 0 auto;
	max-width: none;
	padding-top: 0;
}

/* Controls fill their grid cell rather than the capped 22rem column
 * basis from forms-base (which in a column layout is read as height). */
.nng-form.operationally-available-filter
	.operationally-available-filter__grid
	> .form-row
	> input,
.nng-form.operationally-available-filter
	.operationally-available-filter__grid
	> .form-row
	> select,
.nng-form.operationally-available-filter
	.operationally-available-filter__cell
	> .form-row
	> input,
.nng-form.operationally-available-filter
	.operationally-available-filter__cell
	> .form-row
	> select {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
}

/* The Search Parameters cell holds its input plus the footnote below
 * it; keep them stacked and tight. */
.nng-form.operationally-available-filter .operationally-available-filter__cell {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.nng-form.operationally-available-filter
	.operationally-available-filter__cell
	.form-note {
	padding: 0;
}

/* ----- Toolbar: CLEAR / RETRIEVE aligned to the right ----- */
.nng-form.operationally-available-filter
	.operationally-available-filter__toolbar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
	margin-top: var(--nng-gap);
}

/* Toolbar buttons size to their label rather than the wide default
 * `.nng-btn` column. Pill-shaped (matching wp-block-button__link) and
 * Lato Normal text per the style guide. */
.nng-form.operationally-available-filter .nng-btn {
	font-weight: 400;
	min-width: 7rem;
	max-width: none;
}

/* No underline on button hover/focus. */
.nng-form.operationally-available-filter .nng-btn:hover,
.nng-form.operationally-available-filter .nng-btn:focus-visible {
	text-decoration: none;
}

/* RETRIEVE: primary action in Accent 1 navy (#2054AE). */
.nng-form.operationally-available-filter .nng-btn[name="retrieve"] {
	background: var(--wp--preset--color--accent-1, #2054ae);
	border-color: var(--wp--preset--color--accent-1, #2054ae);
	color: #fff;
}

/* DOWNLOAD: shown once data is loaded (landing auto-load and RETRIEVE),
 * hidden on CLEAR. The explicit rule is needed because `.nng-btn` sets
 * `display: inline-block`, which would otherwise override the `hidden`
 * attribute. */
.nng-form.operationally-available-filter .nng-btn[name="download"][hidden] {
	display: none;
}

/* ----- Responsive: collapse the grid on narrow viewports ----- */
@media (max-width: 980px) {
	.nng-form.operationally-available-filter
		.operationally-available-filter__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ----- Posting header: white sub-panel revealed on RETRIEVE -----
 * Reads as its own portion of the filter: full-bleed white footer (the
 * negative margins cancel the gray `.form-body` padding) below the gray
 * criteria grid and toolbar. Two left-justified columns, no rules. */
.nng-form.operationally-available-filter
	.operationally-available-filter__summary {
	background: #fff;
	margin-inline: -1.5rem;
	margin-bottom: -1.5rem;
	padding: 1.5rem;
}

.nng-form.operationally-available-filter
	.operationally-available-filter__summary[hidden] {
	display: none;
}

/* Label and value read as one continuous line ("Label: value") rather than
 * two aligned columns: the values are no longer indented to the width of
 * the longest label. Each pair still occupies its own line — the block
 * `dd::after` forces the break, and its height provides the row spacing
 * the previous grid gap used to give. */
.nng-form.operationally-available-filter
	.operationally-available-filter__summary-grid {
	display: block;
	margin: 0;
}

.nng-form.operationally-available-filter
	.operationally-available-filter__summary-grid
	dt {
	display: inline;
	font-weight: 700;
	text-align: left;
}

/* Guarantee the single space after the colon even if the markup is ever
 * reformatted without whitespace between `</dt>` and `<dd>`. When the
 * source whitespace is present the two collapse into one space. */
.nng-form.operationally-available-filter
	.operationally-available-filter__summary-grid
	dt::after {
	content: " ";
}

.nng-form.operationally-available-filter
	.operationally-available-filter__summary-grid
	dd {
	display: inline;
	margin: 0;
	font-weight: 400;
	text-align: left;
	color: var(--nng-color-text);
}

.nng-form.operationally-available-filter
	.operationally-available-filter__summary-grid
	dd::after {
	content: "";
	display: block;
}

.nng-form.operationally-available-filter
	.operationally-available-filter__summary-grid
	dd:not(:last-of-type)::after {
	height: 0.4rem;
}

@media (max-width: 720px) {
	.nng-form.operationally-available-filter
		.operationally-available-filter__grid {
		grid-template-columns: 1fr;
	}

	.nng-form.operationally-available-filter
		.operationally-available-filter__toolbar {
		justify-content: flex-start;
	}

	/* Stack each label above its value: on narrow screens the longer labels
	 * ("Measurement Basis Description:") leave almost no room for the value
	 * on the same line, so each value drops below its label and is indented
	 * ~2 spaces (0.5rem). */
	.nng-form.operationally-available-filter
		.operationally-available-filter__summary-grid
		dt,
	.nng-form.operationally-available-filter
		.operationally-available-filter__summary-grid
		dd {
		display: block;
	}

	.nng-form.operationally-available-filter
		.operationally-available-filter__summary-grid
		dt::after,
	.nng-form.operationally-available-filter
		.operationally-available-filter__summary-grid
		dd::after {
		content: none;
	}

	.nng-form.operationally-available-filter
		.operationally-available-filter__summary-grid
		dd {
		margin-inline-start: 0.5rem;
	}

	/* Separate each label/value pair from the one above it. */
	.nng-form.operationally-available-filter
		.operationally-available-filter__summary-grid
		dt:not(:first-of-type) {
		margin-top: 0.75rem;
	}
}