/*
 * Shared styling for the seller list-filter forms (product list, sales
 * list): one consistent control height, fields-first rows with the
 * actions closing the last row.
 */

.epla-filter-form {
	margin: 16px 0 20px;
}

.epla-filter-form .epla-filter-row + .epla-filter-row {
	margin-top: 12px;
}

/* Aligned forms carry more rows, so they sit tighter. Scoped, to leave the
   sales-list filter that shares this stylesheet exactly as it was. */
.epla-filter-form--aligned .epla-filter-row + .epla-filter-row {
	margin-top: 8px;
}

.epla-filter-form label {
	display: inline;
	margin-right: 8px;
}

/*
 * Label column, opted into per form with --aligned. Every control starts at
 * the same x instead of each row finding its own left edge: the search box,
 * having no label, used to sit flush left while the labelled rows below it
 * were pushed in by whatever their own label measured.
 *
 * A modifier rather than :has(), which this site's older browsers may not
 * support; forms without it -- the sales list, sharing this stylesheet --
 * keep their current layout.
 */
.epla-filter-form--aligned .epla-filter-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.epla-filter-form .epla-filter-label {
	flex: 0 0 auto;
	width: 68px;
	margin: 0;
	font-size: 13px;
	color: #34495e;
}

.epla-filter-form .epla-filter-sep {
	color: #7f8c8d;
	font-size: 13px;
}

/* One control height across text, number and date inputs (the 41px box
   flat-ui's inputs resolve to). Scoped under the form class so these
   rules outrank flat-ui's input[type=...] selectors. */
.epla-filter-form .epla-filter-input {
	height: 41px;
	box-sizing: border-box;
	margin-bottom: 0;
}

.epla-filter-form .epla-filter-input--search {
	width: 320px;
	max-width: 100%;
}

.epla-filter-form .epla-filter-input--narrow {
	width: 80px;
}

.epla-filter-form .epla-filter-input--category {
	width: 320px;
	max-width: 100%;
	padding: 0 8px;
}

/* Actions close the form: primary submit gets a little extra separation. */
.epla-filter-form .btn {
	margin-left: 8px;
}

.epla-filter-form input[type="submit"] {
	margin-left: 12px;
}

/*
 * Aligned forms lay the actions out with the row's flex gap, so the margins
 * above have to go or the spacing doubles unevenly. The two controls are
 * different elements -- <input type="submit"> and <a class="btn"> -- which
 * flat-ui gives different heights; pinning height and line-height together
 * is what actually makes them match.
 */
.epla-filter-form--aligned .epla-filter-row .btn,
.epla-filter-form--aligned .epla-filter-row input[type="submit"] {
	height: 36px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 36px;
	vertical-align: middle;
}

/* Nullstill is the way back, not a second primary action. */
.epla-filter-form--aligned .epla-filter-row a.btn {
	background: transparent;
	color: #7f8c8d;
	padding: 0 10px;
	text-decoration: underline;
}

.epla-filter-form--aligned .epla-filter-row a.btn:hover {
	background: transparent;
	color: #34495e;
}