/* Tab filter bar for [hl_events_rows tabs="yes"].
   Sits on top of the .ev-rows list and reuses its custom properties, so it
   always matches whatever surface/line/brand colors the rows are using. */

.ev-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 17px !important;
	margin: 0 0 20px !important;
	border-bottom: 1px solid #d9d9d9;
}

.ev-tab {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 175px;
	height: 40px;
	margin: 0 !important;
	padding: 0 14px !important;
	text-align: left;
	background: var(--ev-surface);
	color: var(--ev-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
	border: 1px solid var(--ev-line);
	border-radius: 10px 10px 0 0 !important;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* Inactive tabs sit as open-topped "folder" tabs on the line below; the
   active tab is filled in solid and doesn't need the same treatment. */
.ev-tab:not(.is-active):not([aria-selected="true"]) {
	background: transparent !important;
	color: #111 !important;
	border: 1px solid #d9d9d9 !important;
	border-bottom: 0 !important;
}

.ev-tab:not(.is-active):not([aria-selected="true"]):hover {
	background: #94D500 !important;
	border-color: #94D500 !important;
	color: #000 !important;
}

.ev-tab:focus-visible {
	outline: 3px solid var(--ev-blue);
	outline-offset: 2px;
}

.ev-tab.is-active {
	background: var(--ev-brand);
	border-color: var(--ev-brand);
	color: var(--ev-brand-ink);
	font-weight: 700;
}

/* Rows and the tab-scoped empty message are toggled with the hidden
   attribute. The rows list otherwise sets its own display, which would
   normally win over the UA [hidden] rule, so this has to be explicit. */
.ev-rows [hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.ev-tab {
		transition: none;
	}
}