/**
 * BeatPaws 7/8 - Custom Styles
 * Theme automatique avec prefers-color-scheme
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
	--bg-primary: #fafafa;
	--bg-secondary: #ffffff;
	--text-primary: #1a1a2e;
	--text-secondary: #64748b;
	--accent: #e94560;
	--accent-dark: #c73e54;
	--accent-light: #ff6b8a;
	--border: #e2e8f0;
	--surface: #f8fafc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-primary: #1a1a2e;
		--bg-secondary: #16213e;
		--text-primary: #eaeaea;
		--text-secondary: #94a3b8;
		--border: #334155;
		--surface: #0f172a;
	}
}

/* ========================================
   Base Styles
   ======================================== */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

body {
	font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
	line-height: 1.6;
	overflow-x: hidden;
}

/* ========================================
   Range Slider Custom Styles
   ======================================== */
input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

input[type="range"] {
	--value: 50%;
}

input[type="range"]::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--value), #e2e8f0 var(--value), #e2e8f0 100%);
}

@media (prefers-color-scheme: dark) {
	input[type="range"]::-webkit-slider-runnable-track {
		background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--value), #334155 var(--value), #334155 100%);
	}
}

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	cursor: pointer;
	margin-top: -6px;
	box-shadow: 0 2px 6px rgba(233, 69, 96, 0.4);
	transition: transform 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.1);
}

input[type="range"]::-webkit-slider-thumb:active {
	transform: scale(0.95);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 6px rgba(233, 69, 96, 0.4);
}

input[type="range"]::-moz-range-track {
	height: 8px;
	border-radius: 4px;
	background: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
	input[type="range"]::-moz-range-track {
		background: #334155;
	}
}

/* ========================================
   Beat Indicator Animations
   ======================================== */
.beat-indicator {
	transition: all 0.075s ease-out;
}

.beat-indicator.active {
	transform: scale(1.5);
	box-shadow: 0 0 20px var(--accent);
}

.beat-indicator.accent {
	background-color: var(--accent) !important;
}

.beat-indicator.weak {
	background-color: #94a3b8 !important;
}

/* ========================================
   Notation Container
   ======================================== */
#notation-container svg {
	max-width: 100%;
	height: auto;
}

#notation-container .vf-stavenote.active rect,
#notation-container .vf-stavenote.active path {
	fill: var(--accent) !important;
	stroke: var(--accent) !important;
}

/* Notation always on white background with black notes */
#notation-container {
	background-color: #ffffff !important;
}

#notation-container svg path,
#notation-container svg rect,
#notation-container svg line {
	stroke: #000000 !important;
}

#notation-container svg text {
	fill: #000000 !important;
}

#notation-container .vf-stavenote.active rect,
#notation-container .vf-stavenote.active path {
	fill: var(--accent) !important;
	stroke: var(--accent) !important;
}

/* ========================================
   Button States
   ======================================== */
.loop-btn.active,
.group-btn.active {
	border-color: var(--accent) !important;
	background-color: rgba(233, 69, 96, 0.1) !important;
}

/* ========================================
   MIDI Status Indicator
   ======================================== */
#midi-indicator.connected {
	background-color: #22c55e !important;
	animation: pulse 2s infinite;
}

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

/* ========================================
   Play Button Animation
   ======================================== */
#btn-play {
	position: relative;
	overflow: hidden;
}

#btn-play::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

#btn-play:hover::before {
	opacity: 1;
}

#btn-play.playing {
	animation: pulse-ring 1s ease-out infinite;
}

@keyframes pulse-ring {
	0% {
		box-shadow: 0 0 0 0 rgba(233, 69, 96, 0.4);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(233, 69, 96, 0);
	}
}

/* ========================================
   Scrollbar Styling
   ======================================== */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
	::-webkit-scrollbar-thumb {
		background: #475569;
	}
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
}

/* ========================================
   Select Styling
   ======================================== */
select {
	cursor: pointer;
}

select option {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

/* ========================================
   Focus States (Accessibility)
   ======================================== */
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 640px) {
	.beat-indicator {
		width: 0.75rem !important;
		height: 0.75rem !important;
	}
	
	.beat-indicator[data-beat="0"],
	.beat-indicator[data-beat="2"],
	.beat-indicator[data-beat="4"] {
		width: 1rem !important;
		height: 1rem !important;
	}
}

/* ========================================
   Loading State
   ======================================== */
.loading {
	position: relative;
	pointer-events: none;
}

.loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (prefers-color-scheme: dark) {
	.loading::after {
		background: rgba(26, 26, 46, 0.8);
	}
}

/* ========================================
   Transitions
   ======================================== */
.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

/* ========================================
   Measure Drag & Drop
   ======================================== */
.measure-drag-overlay {
	background: transparent;
	border: 2px dashed transparent;
	transition: all 0.2s ease;
}

.measure-drag-overlay:hover {
	background: rgba(233, 69, 96, 0.05);
	border-color: rgba(233, 69, 96, 0.3);
}

.measure-drag-overlay.drag-over {
	background: rgba(233, 69, 96, 0.1);
	border-color: var(--accent);
	border-style: solid;
}

@media (prefers-color-scheme: dark) {
	.measure-drag-overlay:hover {
		background: rgba(233, 69, 96, 0.1);
	}
	
	.measure-drag-overlay.drag-over {
		background: rgba(233, 69, 96, 0.15);
	}
}

/* ========================================
   Update Banner
   ======================================== */
#update-banner {
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
	}
}

header {
	transition: padding-top 0.3s ease;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
	header,
	footer,
	button,
	input[type="range"],
	select {
		display: none !important;
	}
	
	#notation-container {
		border: 1px solid #000;
		padding: 20px;
	}
	
	.measure-drag-overlay {
		display: none !important;
	}
}