/* MUSIC INDEX --------------------------------------------- */
.music-index-wrapper {
    width: 100%;
    max-width: 1580px;
    margin: 6em auto 0 auto;
}

/* Category Section */
.category-section {
    margin-bottom: 2em;
}

.category-section > h2 {
    font-size: 1rem;
    margin-bottom: 1em;
    text-align: center;
}

/* Index Grid */
.category-section > .index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Adjusted to make items narrower */
    grid-gap: 1rem;
    padding: 0 1rem;
}

.category-section > .index-grid > .index-item {
    justify-self: center;
    width: 90%; /* Adjusted to make items narrower */
    max-width: 90%; /* Adjusted to make items narrower */
	margin-bottom: 1em;
}

/* Adjust image styles */
.category-section > .index-grid > .index-item img {
    width: 100%;
    height: auto;
}

/* Adjust playlist-title styles */
.category-section > .index-grid > .index-item > .playlist-title {
	text-align: center;
    font-size: 0.9em;
    font-weight: 700;
    margin-top: 0.2em; /* Adjust this value to reduce spacing */
    margin-bottom: 0.1em; /* Adjust this value to reduce spacing */
}

/* Playlist Year Styles */
.category-section > .index-grid > .index-item > .playlist-year {
    text-align: center;
    font-size: 0.6em;
    color: #999;
    margin-top: 0; /* Adjust this value to reduce spacing */
    padding-top: 0; /* Ensure no padding on top */
}

/* Playlist Page Styles */
.playlist-details .category-tag, .playlist-details .year-tag {
	display: block;
    font-size: 0.9em;
    color: #999;
}

.playlist-details .meta-data {
	margin: 1rem 0;
}

/* Media Queries */
@media (min-width: 480px) {
    .category-section > .index-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Narrower items */
    }
}

@media (min-width: 640px) {
    .category-section > .index-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Narrower items */
    }
}

@media (min-width: 1024px) {
    .category-section > .index-grid {
        grid-template-columns: repeat(5, 1fr); /* Increase to 8 items per row */
    }
}

@media (max-width: 639px) {
    .category-section > .index-grid {
        grid-template-columns: repeat(3, 1fr); /* Reduce item width on small screens */
    }
}
/* ------------------------------------------------------------ */


/* PLAYLIST PAGE */

.playlist {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5em;
    padding: 1em;
}

.playlist-header {
    display: flex;
    align-items: top;
    width: 100%;
    max-width: 1580px;
    margin-bottom: 2em;
}

.playlist-cover {
    flex: 0 0 auto;
    margin-right: 1em;
}

.playlist-cover img {
    width: 300px;
    height: auto;
}

.playlist-details {
    flex: 1;
}

.playlist-details h1 {
    margin-top: 0;
}

@media screen and (max-width: 600px) {
    .playlist-header {
        flex-direction: column;
        align-items: center;
    }

    .playlist-cover {
        margin-right: 0;
        width: 100%;
    }

    .playlist-cover img {
        width: 100%;
        height: auto;
    }

    .playlist-details {
        width: 100%;
        text-align: left;
    }
}

/* REMIX ICONS */

#playlist .remix {
  width: 32px;
  height: 32px;
  fill: #fff;
  filter: invert(1);
}

#playlist .remix-big {
  width: 48px;
  height: 48px;
  fill: #fff;
  filter: invert(1);
}

/* PLAYLIST */

.playlist-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 20px;
  margin-bottom: 20px;
}

.playlist-group-item {
  position: relative;
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: space-between; /* Ensures the play count is aligned right */
  height: 72px;
  padding: 0 24px;
  margin-bottom: 0;
  background-color: rgb(21, 21, 21);
  border-top: 1px solid rgb(31, 31, 31);
  opacity: 0.7;
  font-size: 0.9em;
  line-height: 1.3rem;
  width: 100%;
  max-width: 1580px;
}


.playlist-group-item .cover-art {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.playlist-group-item #songTitle {
  flex-grow: 1;


}

.playlist-group-item .play-count {
  text-align: right;
  min-width: 60px; /* Adjust the width to ensure it aligns properly */
  color: #ccc; /* Style as needed */
  font-size: 0.8em;
}




.playlist-group-item img.cover-art {
  width: 50px; /* Set the desired width for the cover art */
  height: 50px; /* Set the desired height for the cover art */
  object-fit: cover; /* Ensure the image covers the area without distortion */
  border-radius: 4px; /* Optional: Add rounded corners to the cover art */
}

.playlist-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.playlist-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.playlist-group-item.disabled,
.playlist-group-item.disabled:hover,
.playlist-group-item.disabled:focus {
  color: #fff;
  cursor: not-allowed;
  background-color: #eeeeee;
}

.playlist-group-item.disabled .playlist-group-item-heading,
.playlist-group-item.disabled:hover .playlist-group-item-heading,
.playlist-group-item.disabled:focus .playlist-group-item-heading {
  color: inherit;
}

.playlist-group-item.disabled .playlist-group-item-text,
.playlist-group-item.disabled:hover .playlist-group-item-text,
.playlist-group-item.disabled:focus .playlist-group-item-text {
  color: #fff;
}

.playlist-group-item.active,
.playlist-group-item.active:hover,
.playlist-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: rgb(37, 35, 30);
  border-color: rgb(37, 35, 30);
  opacity: 1;
}

.playlist-group-item.active .playlist-group-item-heading,
.playlist-group-item.active:hover .playlist-group-item-heading,
.playlist-group-item.active:focus .playlist-group-item-heading,
.playlist-group-item.active .playlist-group-item-heading > small,
.playlist-group-item.active:hover .playlist-group-item-heading > small,
.playlist-group-item.active:focus .playlist-group-item-heading > small,
.playlist-group-item.active .playlist-group-item-heading > .small,
.playlist-group-item.active:hover .playlist-group-item-heading > .small,
.playlist-group-item.active:focus .playlist-group-item-heading > .small {
  color: inherit;
}

.playlist-group-item.active .playlist-group-item-text,
.playlist-group-item.active:hover .playlist-group-item-text,
.playlist-group-item.active:focus .playlist-group-item-text {
  color: #c7ddef;
}

a.playlist-group-item,
button.playlist-group-item {
  color: #ccc;
}

a.playlist-group-item .playlist-group-item-heading,
button.playlist-group-item .playlist-group-item-heading {
  color: #333;
}

a.playlist-group-item:hover,
button.playlist-group-item:hover,
a.playlist-group-item:focus,
button.playlist-group-item:focus {
  color: #fff;
  text-decoration: none;
  background-color: rgb(25, 25, 25);
  opacity: 1;
}

button.playlist-group-item {
  width: 100%;
  text-align: left;
}

.playlist-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}

a.playlist-group-item-success,
button.playlist-group-item-success {
  color: #3c763d;
}

a.playlist-group-item-success .playlist-group-item-heading,
button.playlist-group-item-success .playlist-group-item-heading {
  color: inherit;
}

a.playlist-group-item-success:hover,
button.playlist-group-item-success:hover,
a.playlist-group-item-success:focus,
button.playlist-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}

a.playlist-group-item-success.active,
button.playlist-group-item-success.active,
a.playlist-group-item-success.active:hover,
button.playlist-group-item-success.active:hover,
a.playlist-group-item-success.active:focus,
button.playlist-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}

.playlist-group-item-info {
  color: #31708f;
  background-color: #d9edf7;
}

a.playlist-group-item-info,
button.playlist-group-item-info {
  color: #31708f;
}

a.playlist-group-item-info .playlist-group-item-heading,
button.playlist-group-item-info .playlist-group-item-heading {
  color: inherit;
}

a.playlist-group-item-info:hover,
button.playlist-group-item-info:hover,
a.playlist-group-item-info:focus,
button.playlist-group-item-info:focus {
  color: #31708f;
  background-color: #c4e3f3;
}

a.playlist-group-item-info.active,
button.playlist-group-item-info.active,
a.playlist-group-item-info.active:hover,
button.playlist-group-item-info.active:hover,
a.playlist-group-item-info.active:focus,
button.playlist-group-item-info.active:focus {
  color: #fff;
  background-color: #31708f;
  border-color: #31708f;
}

.playlist-group-item-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
}

a.playlist-group-item-warning,
button.playlist-group-item-warning {
  color: #8a6d3b;
}

a.playlist-group-item-warning .playlist-group-item-heading,
button.playlist-group-item-warning .playlist-group-item-heading {
  color: inherit;
}

a.playlist-group-item-warning:hover,
button.playlist-group-item-warning:hover,
a.playlist-group-item-warning:focus,
button.playlist-group-item-warning:focus {
  color: #8a6d3b;
  background-color: #faf2cc;
}

a.playlist-group-item-warning.active,
button.playlist-group-item-warning.active,
a.playlist-group-item-warning.active:hover,
button.playlist-group-item-warning.active:hover,
a.playlist-group-item-warning.active:focus,
button.playlist-group-item-warning.active:focus {
  color: #fff;
  background-color: #8a6d3b;
  border-color: #8a6d3b;
}

.playlist-group-item-danger {
  color: #a94442;
  background-color: #f2dede;
}

a.playlist-group-item-danger,
button.playlist-group-item-danger {
  color: #a94442;
}

a.playlist-group-item-danger .playlist-group-item-heading,
button.playlist-group-item-danger .playlist-group-item-heading {
  color: inherit;
}

a.playlist-group-item-danger:hover,
button.playlist-group-item-danger:hover,
a.playlist-group-item-danger:focus,
button.playlist-group-item-danger:focus {
  color: #a94442;
  background-color: #ebcccc;
}

a.playlist-group-item-danger.active,
button.playlist-group-item-danger.active,
a.playlist-group-item-danger.active:hover,
button.playlist-group-item-danger.active:hover,
a.playlist-group-item-danger.active:focus,
button.playlist-group-item-danger.active:focus {
  color: #fff;
  background-color: #a94442;
  border-color: #a94442;
}

.playlist-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}

.playlist-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}