@tailwind base;
@tailwind components;
@tailwind utilities;

#elevation-div .checkpoint-passed {
	fill: #22c55e !important;
	r: 5 !important;
}

#elevation-div .checkpoint-current {
	fill: #294163 !important;
	r: 6 !important;
	animation: checkpoint-blink 1.5s ease-in-out infinite;
}

#elevation-div .checkpoint-future {
	fill: #9ca3af !important;
	r: 4 !important;
}

#elevation-div .checkpoint-dnf {
	fill: #ef4444 !important;
	r: 6 !important;
}

#elevation-div .checkpoint-after-dnf {
	fill: #6B7280 !important;
	r: 5 !important;
}

@keyframes checkpoint-blink {
	0%, 100% {
		fill-opacity: 1;
	}
	50% {
		fill-opacity: 0.4;
	}
}

#elevation-div {
	padding: 0.5rem;
	width: 100%;
	position: relative;
}

.elevation-wrapper {
	width: 100%;
	max-width: 100%;
	overflow-x: scroll !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scroll-behavior: smooth;
	position: relative;
	cursor: grab;
}

.elevation-wrapper:active {
	cursor: grabbing;
}

#elevation-container {
	width: 100%;
	max-width: 100%;
	overflow-x: scroll !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
}

.elevation-graph {
	width: 1400px !important;
	min-width: 1400px !important;
	height: 300px;
	display: block;
}

.elevation-graph svg {
	width: 1400px !important;
	min-width: 1400px !important;
	display: block;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	touch-action: pan-x;
}

/* DNF segment styling for elevation lines */
#elevation-div .elevation-polyline.dnf-segment {
	stroke: #ef4444 !important;
	stroke-opacity: 0.8 !important;
}

#elevation-div .area.dnf-segment {
	fill: #ef4444 !important;
	fill-opacity: 0.3 !important;
}

#elevation-div .dnf-path-overlay {
	stroke: #ef4444 !important;
	stroke-width: 3px !important;
	stroke-opacity: 0.9 !important;
	fill: none !important;
	pointer-events: none !important;
}

#elevation-div .dnf-area-overlay {
	fill: #ef4444 !important;
	fill-opacity: 0.3 !important;
	stroke: none !important;
	pointer-events: none !important;
}

@media (max-width: 1024px) {
	.elevation-graph {
		min-width: 1200px;
	}

	.elevation-graph svg {
		min-width: 1200px;
	}
}