.container {
  background: var(--spice-card);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Container for title and count */
.titleSection {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 5px;
}

.title {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
}

.trackCount {
  font-size: 12px;
  color: var(--spice-subtext);
  margin-top: -2px;
}

.searchBox {
  position: relative;
  max-width: 300px;
  width: 100%;
  min-width: 200px;
}

.searchInput {
  width: 100%;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid rgb(255 255 255 / 10%);
  background: rgb(0 0 0 / 20%);
  color: var(--spice-text);
  font-size: 14px;
}

.searchInput:focus {
  outline: none;
  border-color: rgb(255 255 255 / 30%);
}

.filterToggle {
  background: rgb(0 0 0 / 20%);
  color: var(--spice-text);
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.filterToggle:hover {
  background: rgb(255 255 255 / 10%);
}

/* Active filter toggle style */
.filterToggleActive {
  background: rgb(255 255 255 / 10%);
}

.filterToggleActive:hover {
  background: rgb(0 0 0 / 20%);
}

.filterBadge {
  background: #1e90ff;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.clearFilters {
  background: transparent;
  color: var(--spice-text);
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 12px;
  opacity: 0.8;
}

.clearFilters:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Filter options panel */
.filterOptions {
  background: rgb(0 0 0 / 20%);
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.filterSectionsRow {
  display: flex;
  flex-wrap: wrap;
}

.filterSection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 150px;
}

.filterSectionTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--spice-text);
}

.trackItemRating {
  display: flex;
  align-items: center;
}

/* Rating filters */
.ratingFilter {
  background: rgb(0 0 0 / 30%);
  color: var(--spice-text);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ratingFilter:hover {
  background: rgb(255 255 255 / 10%);
}

.ratingFilter.active {
  background: #1e90ff;
}

.ratingFilter.active:hover {
  background: #1a7ee0;
}

/* Range filters */
.rangeFilter {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Tag filters */
.tagFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 225px;
  overflow-y: auto;
}

.tagFilter {
  background: rgb(0 0 0 / 30%);
  color: var(--spice-text);
  border: none;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tagFilter:hover {
  background: rgb(255 255 255 / 10%);
}

.tagFilter.active {
  background-color: #1e40af;
  font-weight: 600;
}

.tagFilter.active:hover {
  background-color: #1e3a8a;
}

.tagFilter.excluded {
  background: #b91c1c;
  color: white;
}

.tagFilter.excluded:hover {
  background: #991b1b;
}

.excludedTagFilter {
  background-color: #e74c3c !important;
  color: white !important;
  font-weight: 600 !important;
  text-decoration: line-through;
}

.excludedTagFilter:hover {
  background-color: #c0392b !important;
  opacity: 0.95 !important;
}

.filterSectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.tagSearch {
  width: auto;
  margin-left: 12px;
}

.tagSearchInput {
  width: 200px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid rgb(255 255 255 / 10%);
  background: rgb(0 0 0 / 20%);
  color: var(--spice-text);
  font-size: 13px;
}

.tagSearchInput:focus {
  outline: none;
  border-color: rgb(255 255 255 / 30%);
}

/* Track list */
.trackList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.noTracks {
  color: var(--spice-subtext);
  text-align: center;
  margin: 32px 0;
  font-style: italic;
}

.trackItem {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: 4px;
  background: rgb(0 0 0 / 20%);
  transition: background 0.2s ease;
  position: relative;
}

.trackItem:hover {
  background: rgb(255 255 255 / 10%);
}

.trackItemInfo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.trackItemTitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--spice-text);
  margin-bottom: 2px;
}

.trackItemArtist {
  font-size: 13px;
  color: var(--spice-subtext);
}

/* MODIFIED: The metadata section is now better structured to handle many tags */
.trackItemMetaContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Top row with fixed-width elements and action buttons */
.trackItemMetaTop {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 0;
}

.trackItemFixedMeta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--spice-subtext);
  flex-shrink: 0;
}

/* Filter stars */

.trackItemEnergy {
  background: rgb(0 0 0 / 30%);
  color: var(--spice-text);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
  margin-left: 4px;
}

/* Separate row for tags that can wrap */
.trackItemTags {
  font-size: 12px;
  color: var(--spice-subtext);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-right: 8px;
}

.trackItemTag {
  display: inline-flex;
  background: rgb(0 0 0 / 30%);
  border-radius: 12px;
  padding: 2px 8px;
  max-width: 100%;
  cursor: pointer;
}

.trackItemTag:hover {
  background: rgb(255 255 255 / 10%);
}

.noTags {
  color: var(--spice-button-disabled);
  font-style: italic;
}

.noTagFilters {
  color: var(--spice-subtext);
  font-style: italic;
  opacity: 0.8;
}

/* Action buttons stay at fixed position */
.trackItemActions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
  align-self: flex-start;
}

.trackItemTextInfo {
  display: flex;
  flex-direction: column;
}

.actionButton {
  background: rgb(0 0 0 / 30%);
  color: var(--spice-text);
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.actionButton:hover {
  background: rgb(255 255 255 / 10%);
}

.activeTagFilter {
  background: #1e40af;
  color: white;
  font-weight: 550;
}

.activeTagFilter:hover {
  background: #1e3a8a;
  opacity: 0.95;
}

/* Filter mode toggle styles */
.filterModeToggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filterModeButton {
  background: rgb(0 0 0 / 30%);
  color: var(--spice-text);
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.filterModeButton:hover {
  background: rgb(255 255 255 / 10%);
}

.activeFilterMode {
  background: #1e90ff;
  color: var(--spice-text);
}

.playAllButton,
.createPlaylistButton,
.smartPlaylistButton {
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 36px;
  justify-content: center;
}

.playAllButton,
.smartPlaylistButton {
  width: 3em;
}

.createPlaylistButton {
  background: rgb(0 0 0 / 30%);
  color: white;
  border: 1px solid rgb(255 255 255 / 15%);
  backdrop-filter: blur(10px);
  width: 10em;
}

.createPlaylistButton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgb(255 255 255 / 5%);
  border-color: rgb(255 255 255 / 10%);
  transform: none;
  box-shadow: none;
}

.createPlaylistButton:hover:not(:disabled) {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 30%);
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}

.smartPlaylistButton {
  background: linear-gradient(
    135deg,
    rgb(255 193 7 / 15%),
    rgb(255 152 0 / 15%)
  );
  color: white;
  border: 1px solid rgb(255 193 7 / 15%);
  position: relative;
  overflow: hidden;
}

.smartPlaylistButton::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 193 7 / 20%),
    transparent
  );
  transition: left 0.5s ease;
}

.smartPlaylistButton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgb(255 193 7 / 8%);
  transform: none;
  box-shadow: none;
}

.smartPlaylistButton:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgb(255 193 7 / 25%),
    rgb(255 152 0 / 25%)
  );
  box-shadow: 0 4px 12px rgb(255 193 7 / 30%);
}

.smartPlaylistButton:hover::before {
  left: 100%;
}

.smartPlaylistButton svg {
  color: #ffd700;
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgb(255 215 0 / 50%));
  animation: sparkle 2s ease-in-out infinite;
}

.smartPlaylistButton:hover svg {
  color: #fff;
  filter: drop-shadow(0 0 6px rgb(255 215 0 / 80%));
}

/* ANIMATION ON LIGHTNING ICON */
@keyframes sparkle {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgb(255 215 0 / 50%));
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgb(255 215 0 / 80%));
  }
}

.smartPlaylistButton:disabled svg {
  animation: none;
  filter: none;
}

.clickable {
  cursor: pointer;
  transition: color 0.2s ease;
}

.clickable:hover {
  color: rgb(255 255 255 / 97.7%);
  text-decoration: underline;
}

.clickableArtist {
  cursor: pointer;
  transition: color 0.2s ease;
}

.clickableArtist:hover {
  color: rgb(255 255 255 / 97.7%);
  text-decoration: underline;
}

/* Active Track Highlighting Styles */
.activeTrackItem {
  background: rgb(30 144 255 / 15%) !important;
  border: 1px solid rgb(30 144 255 / 40%) !important;
  position: relative;
  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
}

.activeTrackItem:hover {
  background: rgb(30 144 255 / 20%) !important;
}

.activeTrackTitle {
  font-weight: 700 !important;
  color: #1e90ff !important;
}

.activeTagButton {
  background: #1e90ff !important;
  color: white !important;
  cursor: default !important;
}

.activeTagButton:hover {
  background: #1e90ff !important;
  opacity: 1 !important;
}

/* Load more elements... */
.loadMoreContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  margin-top: 8px;
  height: 60px;
}

.loadMoreButton {
  background: rgb(0 0 0 / 30%);
  color: var(--spice-text);
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.loadMoreButton:hover {
  background: rgb(255 255 255 / 10%);
}

.incompleteBullet {
  color: #ffa500;
  margin-right: 4px;
  font-size: 12px;
  display: inline-block;
}

.activeFiltersDisplay {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: rgb(0 0 0 / 20%);
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
  min-height: 40px;
  margin-right: 4px;
}

.activeFilterTag {
  display: inline-flex;
  align-items: center;
  background: #1e40af;
  color: white;
  border-radius: 16px;
  padding: 3px 10px;
  font-size: 12px;
  gap: 6px;
  max-width: 100%;
  cursor: pointer;
}

.activeFilterTag:hover {
  background-color: #1e3a8a;
}

.excludedFilterTag {
  display: inline-flex;
  align-items: center;
  background: #b91c1c;
  color: white;
  border-radius: 16px;
  padding: 3px 10px;
  font-size: 12px;
  gap: 6px;
  max-width: 100%;
  text-decoration: line-through;
  cursor: pointer;
}

.excludedFilterTag:hover {
  background: #991b1b;
}

.removeFilterButton {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  width: 16px;
  opacity: 0.7;
}

.removeFilterButton:hover {
  opacity: 1;
}

.trackItemBpm {
  background: rgb(0 0 0 / 30%);
  color: var(--spice-text);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
  margin-left: 6px;
}

.playAllButton {
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
  color: white;
  box-shadow: 0 2px 6px rgb(30 64 175 / 25%);
  border: 1px solid rgb(255 193 7 / 15%);
}

.playAllButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: #64748b;
}

.playAllButton:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  box-shadow: 0 3px 10px rgb(30 64 175 / 35%);
}

.playAllButton::before {
  font-family: "Font Awesome 5 Free";
  content: "\f04b";
  font-size: 10px;
  font-weight: 900;
}

/* Sort controls */
.sortOrderButton {
  background: rgb(0 0 0 / 20%);
  color: var(--spice-text);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.2s ease;
}

.sortOrderButton:hover {
  background: rgb(255 255 255 / 10%);
}

/* Timestamp styles */

.trackItemTimestamp {
  display: inline;
  font-size: 10px;
  opacity: 0.8;
}

.trackItemTimestampsInline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 10px;
  color: var(--spice-subtext);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.trackItemTimestampsInline:hover {
  opacity: 1;
}

.timestampWithIcon {
  display: flex;
  align-items: center;
  gap: 2px;
}

.timestampIcon {
  font-size: 8px;
  opacity: 0.7;
}

.trackItemTimestampsInline .trackItemTimestamp {
  font-size: 10px;
}

/* Using CSS Grid for centering!! */
.filterControlsGrid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "left center right";
  align-items: center;
  gap: 12px;
  width: 100%;
}

.filterControlsLeftGrid {
  grid-area: left;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}

.filterControlsCenterGrid {
  grid-area: center;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: center;
  white-space: nowrap;
}

.filterControlsRightGrid {
  grid-area: right;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  width: 210px;
  margin-right: 5px;
}

@media (width <= 768px) {
  .header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
}
