:root {
	--url-logo: url("/ShowPlayer.png");
	--default-padding: 1rem;
	--outer-padding: var(--default-padding);
	--outer-border-radius: var(--outer-padding);
	--color-gray-500: rgb(107 114 128 / 1);
	--color-gray-600: rgb(75 85 99 / 1);
	--color-gray-700: rgb(55 65 81 / 1);
	--color-gray-700-50: rgb(55 65 81 / 0.5);
	--color-gray-800: rgb(31, 41, 55);
	--color-gray-900: rgb(17 24 39 / 1);
	--color-gray-900-50: rgb(17 24 39 / 0.5);
	--color-indigo-400: rgb(129 140 248 / 1);
	--color-indigo-500: rgb(99 102 241 / 1);
	--color-indigo-600: rgb(79 70 229 / 1);
	--color-indigo-700: rgb(67 56 202 / 1);
	--color-indigo-800: rgb(79 70 229 / 1);
	--color-red-400: rgb(248 113 113 / 1);
	--color-red-800: rgb(153 27 27 / 1);
	--gradient-showplayer: conic-gradient(rgb(73 44 161), rgb(52 18 103), rgb(48 15 95), rgb(72 44 161));
	--shadow-2xl: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgb(0 0 0 / 0.25);
	@media (orientation: portrait) and (width < 800px) {
		font-size: clamp(14px, 3.5vw, 20px);
	}
	@media (orientation: landscape) and (height < 600px) {
		--outer-padding: 0rem;
		font-size: clamp(10px, 1.4vw, 16px);
	}
}

*, ::after, ::before {
	box-sizing: border-box;
	border-width: 0;
}
html {
	height: 100%;
	background-color: var(--color-gray-900);
}
body { 
	font-family: 'Inter', sans-serif;
	-webkit-tap-highlight-color: transparent; 
	color: white;
	height: 100%;
	padding: 1rem;
	margin: 0;
	line-height: inherit;
	@media (width < 800px) {
		padding: 0;
	}
}


#player-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	border-radius: var(--outer-border-radius);
	overflow: hidden;
	background-color: var(--color-gray-800);
	box-shadow: var(--shadow-2xl);
	@media (orientation: landscape) {
		position: absolute;
		inset-block: var(--outer-padding);
		inset-inline: calc(33.34vw + var(--outer-padding)) var(--outer-padding);
		width: unset;
		height: unset !important;           
	}
	@media (width < 800px) {
		border-radius: 0;
	}
}


#head-bar {
	position: relative;
	background-image: var(--url-logo);
	background-size: auto calc(100% - 2rem);
	background-position: 1rem;
	background-repeat: no-repeat;
	text-align: center;
	background-color: var(--color-gray-900-50);
	padding: 1.5rem;
	& h1 {
		font-size: 1.5rem;
		line-height: 1.5rem;
		font-weight: 700;
	}
	#now-playing {
		color: var(--color-indigo-400);
		height: 1.5rem;
		margin-top: 0.5rem;
		padding-inline: 5rem;
	}
	#install-btn {
		position: absolute;
		top: 1rem;
		right: 1rem;
		height: calc(100% - 2rem);
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		& .install-icon {
			width: 32px;
			height: 32px;
			stroke: #ffffff;
		}
	}

	@media (width < 800px) {
		padding: 1rem;
		& .install-button {
			font-size: clamp(10px, .7rem, 12px);
		}
	}
}


#ctrl-bar {
	container-type: inline-size;
	position: relative;
	padding: 1.5rem;
	flex-shrink: 0;
	background-color: var(--color-gray-900-50);

	@media (width < 800px) {
		padding: 1rem;
	}

	#progress-bar {
		position: absolute;
		top: 0;
		left: 0;
		height: 2px;
		width: 100%;
		transition: all .4s ease;
		cursor: pointer;

		&:hover {
			height: 10px;
			top: -5px;
		}

		#progress-amount {
			display: block;
			height: 100%;
			background-color: #4f46e5;
			width: 0;
			pointer-events: none;
		}
	}

	#ctrl-button-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;

		& button {
			border-radius: 9999px;
			padding: 1rem;
			margin-inline: 1rem;
			transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
			transition-property: background-color, transform;
			&:disabled {
				cursor: not-allowed;
				opacity: 0.5;
				background-color: var(--color-gray-700);
			}
			&:active {
				transform: scale(0.95);
			}
			& svg {
				height: 1.5rem;
				width: 1.5rem;
			}
		}
		#play-btn {
			padding: 2rem;
			background-color: var(--color-indigo-600);
			&:hover {
				background-color: var(--color-indigo-500);
			}
			& svg {
				height: 2rem;
				width: 2rem;
			}
		}
		#prev-btn, #next-btn {
			background-color: var(--color-gray-700);
			&:hover {
				background-color: var(--color-gray-600);
			}
			@container (width < 30rem) {
				display: none;
			}
		}
		#stop-btn, #fadeout-btn {
			background-color: var(--color-indigo-700);
			&:hover {
				background-color: var(--color-indigo-600);
			}
		}
		  
		#show-duration {
			position:absolute;
			left: 5rem;
			color:#fff5;
			@container (width < 45rem) {
				top: 1rem;
				left: 1rem;
			}
		}
		#show-timeleft {
			position:absolute;
			right: 5rem;
			color:#fff5;
			@container (width < 45rem) {
				top: 1rem;
				right: 1rem;
			}
		}
	}
}



#playlist-area {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin: 0;
	padding: var(--default-padding);
	overflow-y: auto;
	transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
	background-color: var(--color-gray-800);
	border-radius: var(--outer-border-radius);
	border: 2px dashed transparent;
	counter-reset: section;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;

	@media (orientation: landscape) {
		position: fixed;
		inset-block: var(--outer-padding);
		inset-inline: var(--outer-padding) 66.66vw;
		
	}
	@media (orientation: portrait) {
		position: relative;
	}
	@media (width < 800px) {
		padding: 1vw;
		#playlist-header {
			padding: calc(1rem - 1vw);
			margin: 0;
		}
	}

	&.drag-over {
		border: 2px dashed #4f46e5;
		background-color: #1f2937;
	}
	&.drag-over * {
		pointer-events: none;
	}
	&.drag-over #clear-playlist,
	&.drag-over #emptyMessage {
		pointer-events: initial;
	}
}

#playlist {
	flex-grow: 1;
	& > :not([hidden]) ~ :not([hidden]) {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
	& .playlist-item {
		position: relative;
		cursor: pointer;
		transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
		border-radius: 0.5rem;
		padding: 0.75rem;
		padding-left: 40px !important;
		counter-increment: section;
		&:before {
			content: counter(section);
			display: flex;
			position: absolute;
			left: 15px;
			top: 0;
			opacity: .25;
			height: 100%;
			align-items: center;
			font-weight: bold;
		}
		&:hover {
			background-color: var(--color-indigo-800);
		}
		&.active { background-color: #4f46e5; }
		&.dragging { opacity: 0.4; }

		& small {
			display: block;
			opacity: .4;    
		}
	}
	& .drop-indicator { 
		margin-top: 4px !important;
		margin-bottom: -6px !important;
		height: 2px;
		background: #6366f1;
		animation: fadeIn 0.2s;
	}
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


#emptyMessage {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	cursor: pointer;
	border-radius: 0.5rem;
	color: var(--color-gray-500);
	&:hover {
		background-color: var(--color-gray-700-50);
	}
	& p:last-child {
		font-size: 0.875rem;
		line-height: 1.25rem;
		margin-top: 0.25rem;
	}
}


#add-btn {
	position: absolute;
	height: 4rem;
	width: 4rem;
	bottom: 2rem;
	right: 2rem;
	border-radius: 1000px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 3px 6px 9px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	pointer-events: all;
	z-index: 10;
	background-color: var(--color-indigo-700);

	&:hover {
		box-shadow: 3px 6px 9px rgba(0, 0, 0, 0.5);
		background-color: var(--color-indigo-600);
	}

	& svg {
		width: 40%;
	}
}

#show-title {
	opacity: .25;
	font-size: 4cqw;
	text-align: center;
	display: none;
	@media (orientation: portrait) {
		font-size: 6cqw;
		padding-bottom: 1rem;
	}
}
#show-notes {
	opacity:.25;
	font-size: 1.5cqw;
	text-align: center;
	display: none;
}


.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hidden { display: none; }








/* Fadeout-Button-Animation */
#fadeout-btn.fadeout-active {
	position: relative;
	animation: fade-pulse 1.5s ease-in-out infinite; /* Shadow-Pulse-Animation */
	z-index: 1; /* Damit Button vor Hintergrund liegt */
}
/* Das ::before-Element: Erzeugt den größeren, animierten Farbverlauf */
#fadeout-btn.fadeout-active::before {
	content: '';
	position: absolute;
	inset: -2px; /* Definiert den Rahmen-Bereich für den Farbverlauf. */
	border-radius: inherit; /* Gleicher Radius wie Button */
	z-index: -2; /* Hinter dem ::after-Element und dem Button-Inhalt */

	/* Der konische Farbverlauf für die Rotation */
	background: conic-gradient( from 0deg,
		rgba(67, 56, 202, 0.5) 0%,   /* Dunkler, transparenter Startpunkt */
		rgba(90, 80, 230, 1) 25%,    /* Hellerer Blauton */
		rgba(40, 30, 150, 1) 50%,    /* Dunklerer Blauton */
		rgba(67, 56, 202, 0.8) 75%,  /* Originalfarbe */
		rgba(67, 56, 202, 0.5) 100%  /* Ende, identisch mit Start für Nahtlosigkeit */
	);
	animation: rotateConicGradient 4s linear infinite; /* Kontinuierliche Rotation */
}
/* Erzeugt den soliden inneren Hintergrund */
#fadeout-btn.fadeout-active::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-color: var(--color-gray-900);
	z-index: -1; /* Überdeckt ::before-Verlaufs aber hinter Button-Inhalt */
	opacity: .8;
}
/* Keyframes für die Rotationsanimation */
@keyframes rotateConicGradient {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
/* Keyframes für die Shadow-Pulse-Animation */
@keyframes fade-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
	70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}






/* Playlist Header */
#playlist-header {
	position: relative;
	flex-shrink: 0;
	margin-bottom: 1rem;
}
#playlist-dropdown-btn {
	user-select: none;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.75rem;
	& svg {
		height: 1.25rem;
		width: 1.25rem;
		margin-left: .5rem;
	}
}
#clear-playlist {
	opacity: .25;
	float: right;
	cursor: pointer;
	pointer-events: all;
	transition: all 150ms ease;

	&:hover,
	&.drag-over {
		opacity: 1;
		user-select: none;
	}
	&.drag-over {
		transform: scale(1.5);
	}
	& svg {
		height: 1.5rem;
		width: 1.5rem;
	}
}



/* Playlist Dropdown */
#playlist-dropdown { display: none; }
#playlist-dropdown.show { display: block; }
#playlist-dropdown-menu {
	position: absolute;
	background-color: #2d3748;
	border-radius: 0.5rem;
	padding: 0.5rem;
	z-index: 20;
	width: calc(100% - 2rem);
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
	& hr {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		border-color: var(--color-gray-600);
	}
	& div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.5rem;
		border-radius: 0.375rem;
		cursor: pointer;
		user-select: none;
		&:hover {
			background-color: var(--color-gray-600);
		}
	}
	& div:last-child {
		color: var(--color-red-400);
		&:hover {
			background-color: var(--color-red-800);
		}
	}
}
.playlist-dropdown-item {
	font-weight: 700;
	&.active-playlist svg { 
		display: block; 
		height: 1.25rem;
		width: 1.25rem;
	}
}





/* Modal */
.modal-backdrop {
	position: fixed;
	inset: 0;
	bottom: env(keyboard-inset-height, 0);
	transition: bottom 150ms ease-in-out;
	background-color: rgba(0,0,0,0.5);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-content {
	background-color: #2d3748;
	padding: 1.5rem;
	border-radius: 0.75rem;
	width: 90%;
	max-width: 400px;
	& h3 {
		font-size: 1.125rem;
		line-height: 1.75rem;
		font-weight: 700;
		margin-bottom: 1rem;
	}
	& p {
		margin-bottom: 1rem;
	}
	& form {
		& input {
			width: 100%;
			padding: 0.5rem;
			border-width: 1px;
			border-radius: 0.25rem;
			background-color: var(--color-gray-700);
			border-color: var(--color-gray-600);
			&:focus {
				box-shadow: 0 0 0 2px var(--color-indigo-500);
				outline: 2px solid transparent;
				outline-offset: 2px;
			}
		}
		& div {
			display: flex;
			justify-content: flex-end;
			margin-top: 1.5rem;
			& > :not([hidden]) ~ :not([hidden]) {
				--tw-space-x-reverse: 0;
				margin-right: calc(1rem * var(--tw-space-x-reverse));
				margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
			}
			& button {
				padding-inline: 1rem;
				padding-block: 0.5rem;
				border-radius: 0.25rem;
				background-color: var(--color-gray-600);
				&:hover {
					background-color: var(--color-gray-500);
				}
				&:last-child {
					background-color: var(--color-indigo-600);
					&:hover {
						background-color: var(--color-indigo-500);
					}
				}
			}
		}
	}
}