@import "tailwindcss";
@import "@manacore/shared-tailwind/themes.css";

/* Scan shared packages for Tailwind classes */
@source "../../../../packages/shared-ui/src";
@source "../../../../packages/shared-auth-ui/src";
@source "../../../../packages/shared-branding/src";
@source "../../../../packages/shared-theme-ui/src";
@source "../../../../packages/shared-theme-ui/src/components";
@source "../../../../packages/shared-theme-ui/src/pages";
@source "../../../../packages/shared-stores/src";

/* Waveform styles */
.waveform-container {
	position: relative;
	width: 100%;
	height: 128px;
	background: var(--color-surface);
	border-radius: 8px;
	overflow: hidden;
}

/* Marker colors */
.marker-verse { background-color: #3B82F6; }
.marker-hook { background-color: #EF4444; }
.marker-bridge { background-color: #8B5CF6; }
.marker-intro { background-color: #22C55E; }
.marker-outro { background-color: #F97316; }
.marker-drop { background-color: #EC4899; }
.marker-breakdown { background-color: #14B8A6; }
.marker-custom { background-color: #6B7280; }

/* Lyrics editor styles */
.lyrics-editor {
	font-family: 'JetBrains Mono', 'Fira Code', monospace;
	line-height: 1.8;
}

.lyrics-line {
	padding: 4px 8px;
	border-radius: 4px;
	transition: background-color 0.2s;
}

.lyrics-line:hover {
	background-color: var(--color-surface);
}

.lyrics-line.active {
	background-color: var(--color-primary);
	color: white;
}

.lyrics-line.synced {
	border-left: 3px solid var(--color-primary);
}

/* Karaoke animation */
@keyframes karaoke-highlight {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

.karaoke-word {
	transition: color 0.1s, transform 0.1s;
}

.karaoke-word.active {
	color: var(--color-primary);
	transform: scale(1.05);
}

.karaoke-word.past {
	color: var(--color-foreground);
}

.karaoke-word.future {
	color: var(--color-foreground-secondary);
}

/* Timeline styles */
.timeline-ruler {
	height: 24px;
	background: var(--color-surface);
	position: relative;
}

.timeline-marker {
	position: absolute;
	top: 0;
	height: 100%;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.timeline-marker:hover {
	opacity: 1;
}

/* Playhead */
.playhead {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--color-primary);
	z-index: 10;
	pointer-events: none;
}

.playhead::after {
	content: '';
	position: absolute;
	top: 0;
	left: -4px;
	width: 10px;
	height: 10px;
	background: var(--color-primary);
	border-radius: 50%;
}

/* Mobile responsive waveform */
@media (max-width: 767px) {
	.waveform-container {
		height: 80px;
	}

	.timeline-ruler {
		height: 20px;
	}

	.timeline-marker span {
		font-size: 8px;
	}
}

/* Touch-friendly range inputs */
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
	background: hsl(var(--color-surface-hover));
	border-radius: 4px;
	height: 8px;
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: hsl(var(--color-primary));
	height: 16px;
	width: 16px;
	border-radius: 50%;
	margin-top: -4px;
}

@media (max-width: 767px) {
	input[type="range"]::-webkit-slider-thumb {
		height: 20px;
		width: 20px;
		margin-top: -6px;
	}
}
