/* Grid View Styles */
.az-listing.grid-view-active .az-header-row,
.az-listing.grid-view-active .custom-header {
	display: none !important;
}

/* Hide favorites header in grid view */
.az-listing.grid-view-active ~ #favorite-songs-section .favorites-header,
body.grid-view-active .favorites-header {
	display: none !important;
}

/* Hide album art in list view */
.az-listing:not(.grid-view-active) .song-album-art,
#favorite-songs-list:not(.grid-view) .song-album-art {
	display: none;
}

.az-columns.grid-view {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	padding: 0;
	list-style: none;
}

.az-columns.grid-view li.song-item {
	background: #1a1a1a;
	border: 1px solid #444;
	border-radius: 25px;
	overflow: hidden;
	margin-bottom: 0;
	position: relative;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	aspect-ratio: 1;
}

.az-columns.grid-view li.song-item:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	border-color: #666;
}

.az-columns.grid-view .custom-container {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin-bottom: 0;
	border: none;
	background: none;
	text-decoration: none;
}

/* Album Art fills entire card */
.az-columns.grid-view .song-album-art {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #1a1a1a;
	z-index: 0;
}

.az-columns.grid-view .song-album-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	backface-visibility: hidden;
}

.az-columns.grid-view li.song-item:hover .song-album-art img {
	transform: scale(1.05);
	filter: brightness(1.08) contrast(1.03) !important;
	opacity: 1 !important;
}

/* Gradient overlay for readability */
.az-columns.grid-view .song-album-art::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0, 0, 0, 0.5) 50%,
		rgba(0, 0, 0, 0.85) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Play button for grid view */
.az-columns.grid-view .song-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.85);
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: #1a1a1a;
	font-size: 22px;
	cursor: pointer;
	z-index: 5;
	opacity: 0;
	transition:
		opacity 0.3s ease,
		background 0.3s ease,
		box-shadow 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	will-change: opacity;
	backface-visibility: hidden;
}

.az-columns.grid-view .song-play-button i {
	margin-left: 7px; /* Visual centering for play icon */
}

.az-columns.grid-view li.song-item:hover .song-play-button {
	opacity: 1;
}

/* Keep pause button visible when song is actively playing (not when paused) */
.az-columns.grid-view li.song-item.song-playing:not(.song-paused) .song-play-button {
	opacity: 1;
}

.az-columns.grid-view li.song-item.song-playing .song-play-button i {
	margin-left: 4px; /* Pause icon offset */
}

.az-columns.grid-view .song-play-button:hover {
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.az-columns.grid-view .song-play-button:active {
	opacity: 0.8;
}

/* Title at the top left */
.az-columns.grid-view .link-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px 39px 10px 12px;
	z-index: 2;
	border-bottom: none;
	background: rgba(0, 0, 0, 0.5);
	display: block; /* Override flex from default styles to allow wrapping */
	pointer-events: auto;
}

/* Override theme hover effects for grid view */
.az-columns.grid-view .custom-container:hover .link-part,
.az-columns.grid-view .song-item:hover .song-title,
.az-columns.grid-view .song-title a:hover {
	color: #ffffff !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.az-columns.grid-view .song-title {
	font-size: 0.9em;
	font-weight: 600;
	color: #ffffff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.3;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal; /* Ensure text can wrap */
	hyphens: auto;
	margin-bottom: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
	width: 100%;
	pointer-events: auto;
}

/* Icons before song title in grid view */
.az-columns.grid-view .song-title i {
	color: #d4a44a;
	margin-right: 5px;
	font-size: 0.9em;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
	display: inline-block;
	vertical-align: middle;
}

.az-columns.grid-view .song-title i.fa-gamepad {
	color: #9b59b6; /* Purple for Symphoria game */
}

.az-columns.grid-view .song-title i.fa-headphones {
	color: #3498db; /* Blue for Practice Mode */
}

.az-columns.grid-view .list-only {
	display: none !important;
}

.az-columns.grid-view .private-lock {
	display: inline-block !important;
	color: #ccc;
}

/* Metadata at very bottom - horizontal layout */
.az-columns.grid-view .metadata-row {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	padding: 8px 12px 10px;
	font-size: 0.85em;
	color: #ddd;
	z-index: 2;
	background: rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	overflow: visible;
	max-width: 100%;
	text-align: center;
	pointer-events: none;
	border-radius: 15px 15px 0 0;
}

.az-columns.grid-view .metadata-row > div {
	display: inline;
	color: #ddd;
}

/* Remove all labels - just show values */
.az-columns.grid-view .metadata-row > div::before {
	display: none;
}

/* Add separators between items */
.az-columns.grid-view .metadata-row > div:not(:last-child)::after {
	content: " - ";
	color: #999;
}

/* Hide beginner in grid view */
.az-columns.grid-view .metadata-row > .beginner-part {
	display: none;
}

/* Favorite star */
.az-columns.grid-view .favorite-part {
	position: absolute;
	top: 3px;
	right: -2px;
	z-index: 10;
}

.az-columns.grid-view .favorite-star {
	font-size: 1.1em;
	color: #ddd;
	line-height: 1.3;
	display: inline-block;
	cursor: pointer;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.az-columns.grid-view .favorite-star:hover {
	color: #fff;
	transform: scale(1.2);
}

.az-columns.grid-view .favorite-star.fas {
	color: #d4a44a;
}

/* View Toggle Button */
.view-toggle-compact {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.18) 0%,
		rgba(255, 255, 255, 0.12) 100%
	);
	border: 1px solid rgba(140, 130, 115, 0.4);
	color: #e0e0e0;
	padding: 0.8em 1.3em;
	border-radius: 30px;
	cursor: pointer;
	font-size: 0.9em;
	/* margin-left: 8px; */
	transition:
		background 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease,
		box-shadow 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	justify-content: center;
}

.view-toggle-compact i {
	margin-right: 0 !important;
	line-height: 1.18;
}

.view-toggle-compact .new-label {
	position: absolute;
	top: -8px;
	right: -8px;
	background: #d4a44a;
	color: #1a1a1a;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 5px;
	border-radius: 4px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.view-toggle-compact.active {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.22) 0%,
		rgba(255, 255, 255, 0.15) 100%
	);
	border-color: rgba(140, 130, 115, 0.6);
	color: #fff;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translateY(1px);
}

/* Collections grid in grid view */
body.grid-view-active .collections-grid,
body.grid-view-active #collections-section .collections-grid {
	grid-template-columns: repeat(auto-fill, 242px);
	gap: 6px;
}

body.grid-view-active .collection-card {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 25px;
	overflow: hidden;
	transition:
		box-shadow 0.2s,
		border-color 0.2s;
}

body.grid-view-active .collection-card:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	border-color: #666;
}

body.grid-view-active .collection-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	z-index: 0;
}

body.grid-view-active .collection-icon img,
body.grid-view-active .collection-icon i {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition:
		transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	backface-visibility: hidden;
}

body.grid-view-active .collection-card:hover .collection-icon img,
body.grid-view-active .collection-card:hover .collection-icon i {
	transform: scale(1.05);
	filter: brightness(1.08) contrast(1.03) !important;
	opacity: 1 !important;
}

body.grid-view-active .collection-icon i {
	font-size: 80px;
}

body.grid-view-active .collection-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 10px 12px;
	background: rgba(0, 0, 0, 0.5);
	margin: 0 12px 10px 12px;
	border-radius: 10px;
	width: auto;
}

body.grid-view-active .collection-title {
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

body.grid-view-active .collection-link {
	background: none;
	border: none;
	padding: 0;
}

body.grid-view-active .collection-arrow {
	display: none;
}

body.grid-view-active .collection-card:hover .collection-title {
	color: #fff !important;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Responsive adjustments */
@media (max-width: 600px) {
	.az-columns.grid-view {
		grid-template-columns: repeat(2, 1fr);
	}

	body.grid-view-active .collections-grid,
	body.grid-view-active #collections-section .collections-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 360px) {
	.az-columns.grid-view {
		grid-template-columns: 1fr;
	}

	body.grid-view-active .collections-grid,
	body.grid-view-active #collections-section .collections-grid {
		grid-template-columns: 1fr;
	}
}