/* Shared utility classes, buttons and reusable components */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--gradient-brand);
	color: var(--text-inverse);
	border: none;
	border-radius: var(--space-2);
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
}

.btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-lg);
}

.btn-secondary {
	background: var(--bg-tertiary);
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
	background: var(--bg-secondary);
}

.empty-state-icon {
	font-size: 64px;
	margin-bottom: var(--space-4);
	opacity: 0.6;
}

.data-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-8) var(--space-6);
	text-align: center;
	height: 100%;
}

.empty-state-title {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: var(--space-2);
}

.empty-state-subtitle {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-bottom: var(--space-6);
}

.city-selector {
	width: 100%;
	margin-bottom: var(--space-6);
}

.city-selector-title {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--space-3);
	text-align: left;
}

.city-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.city-btn {
	all: unset;
	padding: var(--space-3) var(--space-4);
	background: var(--bg-tertiary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--space-3);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-primary);
}

.city-btn:hover {
	border-color: var(--brand-primary);
	background: var(--bg-secondary);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.city-btn-emoji {
	font-size: var(--text-lg);
	margin-right: var(--space-2);
}

.recent-searches {
	width: 100%;
	margin-top: var(--space-4);
}

.recent-searches-title {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-2);
	text-align: left;
}

.recent-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) var(--space-3);
	background: var(--bg-tertiary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--space-2);
	margin-bottom: var(--space-2);
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: var(--text-sm);
}

.recent-item:hover {
	border-color: var(--brand-primary);
	background: var(--bg-secondary);
}

.recent-item-text {
	color: var(--text-primary);
	flex: 1;
}

.recent-item-clear {
	all: unset;
	cursor: pointer;
	color: var(--text-muted);
	font-size: var(--text-xs);
	padding: var(--space-1);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.recent-item:hover .recent-item-clear {
	opacity: 1;
}

.recent-item-clear:hover {
	color: var(--text-primary);
}

.notification-badge,
.spinner,
.loading {
	will-change: transform;
}

.hidden {
	display: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

*:focus-visible {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* legend helpers removed */

.deprecation-1 { color: #22c55e; font-weight: 600; }
.deprecation-2 { color: #84cc16; font-weight: 600; }
.deprecation-3 { color: #eab308; font-weight: 600; }
.deprecation-4 { color: #f97316; font-weight: 600; }
.deprecation-5 { color: #ef4444; font-weight: 600; }

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOutRight {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}