/* Courses page specific styles */

.metric-gap { color: var(--accent2); }
.metric-dplus { color: var(--z3); }
.diff-good { color: var(--z1); }
.diff-bad { color: var(--accent3); }

.action-btn.races-result:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.action-btn.races-result.has-value {
	border-color: var(--z1);
	color: var(--z1);
}

#courses .form-card .field input {
	height: 48px;
	line-height: 1.2;
}

#courses .form-card .field input[type="date"] {
	padding-top: 10px;
	padding-bottom: 10px;
}

#courses .races-status .badge.badge-done {
	background: color-mix(in srgb, var(--z2) 18%, var(--surface2));
	color: color-mix(in srgb, var(--z2) 78%, var(--z1));
	border: 1px solid color-mix(in srgb, var(--z2) 52%, var(--border));
}

#courses .races-status .badge.badge-next {
	background: color-mix(in srgb, var(--z5) 18%, var(--surface2));
	color: color-mix(in srgb, var(--z5) 88%, var(--text));
	border: 1px solid color-mix(in srgb, var(--z5) 56%, var(--border));
}