/**
 * TM Event Calendar - calendar filter bar styles.
 *
 * Depends on design-system.css (for --tec-* tokens and the .tec-input/
 * .tec-select/.tec-btn primitives reused by templates/frontend/filters.php)
 * and layout.css/components.css for the surrounding .tmec-calendar shell.
 */

.tmec-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tec-space-3);
	margin-bottom: var(--tec-space-5);
}

.tmec-filters__field {
	display: flex;
	flex-direction: column;
	min-width: 160px;
}

.tmec-filters__field--search {
	flex: 1 1 220px;
	min-width: 200px;
}

.tmec-filters__field--toggle {
	flex-direction: row;
	align-items: center;
	min-width: 0;
}

.tmec-filters__field--reset {
	min-width: 0;
}

.tmec-filters__toggle-label {
	display: inline-flex;
	align-items: center;
	gap: var(--tec-space-2);
	font-size: var(--tec-font-size-sm);
	color: var(--tec-text);
	cursor: pointer;
	white-space: nowrap;
}

.tmec-filters__checkbox {
	width: 1rem;
	height: 1rem;
	accent-color: var(--tec-primary);
	cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/* Style variants                                                        */
/* ---------------------------------------------------------------------- */

.tmec-filters--vertical {
	flex-direction: column;
	align-items: stretch;
}

.tmec-filters--vertical .tmec-filters__field {
	width: 100%;
}

.tmec-filters--dropdown {
	position: relative;
	flex-wrap: nowrap;
}

.tmec-filters--dropdown .tmec-filters__field {
	display: none;
}

.tmec-filters--dropdown.is-open .tmec-filters__field {
	display: flex;
}

.tmec-filters--dropdown.is-open {
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------- */
/* Position variants (data attribute is set on .tmec-calendar itself, so  */
/* the filter bar keeps its position across the AJAX month-swap, which   */
/* replaces the whole .tmec-calendar element)                             */
/* ---------------------------------------------------------------------- */

.tmec-calendar--filters-left,
.tmec-calendar--filters-right {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--tec-space-6);
}

.tmec-calendar--filters-left .tmec-calendar__body,
.tmec-calendar--filters-right .tmec-calendar__body {
	flex: 1 1 640px;
	min-width: 0;
}

.tmec-calendar--filters-left .tmec-filters,
.tmec-calendar--filters-right .tmec-filters {
	flex: 0 0 240px;
	flex-direction: column;
	align-items: stretch;
	margin-bottom: 0;
}

.tmec-calendar--filters-left .tmec-filters {
	order: -1;
}

.tmec-calendar--filters-right .tmec-filters {
	order: 1;
}

/* Sidebar layouts collapse to a stacked, above-calendar bar on narrower
   viewports rather than squeezing a 240px column next to the grid. */
@media (max-width: 900px) {
	.tmec-calendar--filters-left,
	.tmec-calendar--filters-right {
		flex-direction: column;
	}

	.tmec-calendar--filters-left .tmec-filters,
	.tmec-calendar--filters-right .tmec-filters {
		flex: 1 1 auto;
		flex-direction: row;
		flex-wrap: wrap;
		order: 0;
	}
}

@media (max-width: 600px) {
	.tmec-filters {
		flex-direction: column;
		align-items: stretch;
	}

	.tmec-filters__field {
		width: 100%;
	}
}