/* =============================================================
 * NNG Operational Info by Gas Day filter
 * Gas Day range selector + button toolbar on top of `forms-base.css`.
 * ============================================================= */

/* ----- Table summary caption -----
 * Rendered beneath the filter, outside the gray panel and left-justified.
 * Matches the popup header's Heading H4 treatment (Medium font size, Lato
 * Bold weight 700) but in black (Contrast) instead of Charcoal. Scoped under
 * the component container so it overrides the theme's global heading color. */
.operational-info-by-gas-day-filter-container .operational-info-by-gas-day-filter__summary {
	margin: 0.75rem 0 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--lato, "Lato", "Helvetica Neue", arial, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 0.9375rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, #000);
}

/* The label stays Lato Bold; the selected gas-day range is regular weight. */
.operational-info-by-gas-day-filter-container .operational-info-by-gas-day-filter__summary-range {
	font-weight: 400;
}

/* ----- Panel chrome overrides -----
 * 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.operational-info-by-gas-day-filter {

	/* Site style guide: Lato. Bold is the default for all filter text;
	 * buttons and the date picker 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.operational-info-by-gas-day-filter .form-header {
	background: transparent;
	color: var(--nng-color-text);
}

/* All non-control filter text is Lato Bold (header + field label). */
.nng-form.operational-info-by-gas-day-filter .form-header,
.nng-form.operational-info-by-gas-day-filter .form-row > label {
	font-weight: 700;
}

/* The date picker text stays Lato Normal. */
.nng-form.operational-info-by-gas-day-filter input[type="date"] {
	font-weight: 400;
}

/* ----- Controls: date range + button toolbar ----- */
.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--nng-gap);
}

.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--nng-gap);
}

.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__dates > .form-row {
	flex: 1 1 16rem;
	margin: 0;
}

.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__toolbar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Toolbar buttons size to their label rather than the wide default
 * `.nng-btn` column so CLEAR / DOWNLOAD / RETRIEVE sit in a tidy row.
 * Pill-shaped (matching wp-block-button__link) and Lato Normal button
 * text per the style guide. */
.nng-form.operational-info-by-gas-day-filter .nng-btn {
	font-weight: 400;
}

/* No underline on button hover/focus. */
.nng-form.operational-info-by-gas-day-filter .nng-btn:hover,
.nng-form.operational-info-by-gas-day-filter .nng-btn:focus-visible {
	text-decoration: none;
}


.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__toolbar .nng-btn {
	min-width: 7rem;
	max-width: none;
}

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

@media (max-width: 720px) {

	.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__controls {
		flex-direction: column;
		align-items: stretch;
	}

	.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__dates {
		flex-direction: column;
		align-items: stretch;
	}

	/* The dates container is now a column, so the desktop `flex-basis:
	 * 16rem` would apply to the vertical axis and inflate each row's
	 * height. Reset to content height and tighten the label/input gap so
	 * the label sits directly above its input. */
	.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__dates > .form-row {
		flex: 0 0 auto;
		gap: 0.25rem;
	}

	.nng-form.operational-info-by-gas-day-filter .form-row > label {
		padding-top: 0;
	}

	/* Native date inputs stretch to fill the row, which strands the
	 * calendar icon at the far right and leaves a big empty gap inside
	 * the box. Size them to their content instead. */
	.nng-form.operational-info-by-gas-day-filter input[type="date"] {
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
	}

	.nng-form.operational-info-by-gas-day-filter .operational-info-by-gas-day-filter__toolbar {
		justify-content: flex-start;
	}
}