.modalOverlay {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 70%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: auto;
}

.modal {
  background: var(--spice-card);
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
  position: relative;
  animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--spice-button-disabled);
}

.modalTitle {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--spice-text);
}

.headerActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.headerButton {
  background: var(--spice-card);
  border: 1px solid var(--spice-button-disabled);
  color: var(--spice-text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.headerButton:hover {
  background: var(--spice-button);
  border-color: var(--spice-accent);
  transform: translateY(-1px);
}

.headerButton:active {
  transform: translateY(0);
}

.exportButton {
  border-color: rgb(34 197 94 / 30%);
}

.exportButton:hover {
  background: rgb(34 197 94 / 10%);
  border-color: rgb(34 197 94 / 50%);
}

.importButton {
  border-color: rgb(59 130 246 / 30%);
}

.importButton:hover {
  background: rgb(59 130 246 / 10%);
  border-color: rgb(59 130 246 / 50%);
}

.modalBody {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 70px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.emptyIcon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.playlistList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.playlistItem {
  background: var(--spice-player);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--spice-button-disabled);
  transition: all 0.2s ease;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  min-height: 180px;
}

.playlistItem:hover {
  border-color: var(--spice-accent);
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  transform: translateY(-1px);
}

.playlistItem.inactive {
  opacity: 0.6;
  border-color: var(--spice-button-disabled);
}

.playlistItem.inactive:hover {
  opacity: 0.8;
}

.playlistHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
  gap: 16px;
}

.playlistTitleSection {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.playlistName {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--spice-text);
  cursor: pointer;
  transition: color 0.2s ease;
  line-height: 1.3;
}

.playlistName:hover {
  color: var(--spice-accent);
}

.playlistStatus {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inactiveLabel {
  background: var(--spice-button-disabled);
  color: var(--spice-subtext);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.playlistStatsRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--spice-card);
  border-radius: 8px;
  border: 1px solid var(--spice-button-disabled);
}

.trackRowItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-left: 10px;
  margin-right: 10px;
}

.trackCountNumber {
  font-size: 20px;
  font-weight: 700;
  color: var(--spice-text);
  font-family: "Spotify Circular", monospace;
}

.trackCountLabel {
  font-size: 11px;
  color: var(--spice-subtext);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.criteriaSection {
  margin-bottom: 0;
}

.criteriaHeader {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.criteriaTitle {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--spice-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.criteriaList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.criteriaItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--spice-card);
  border-radius: 6px;
  border: 1px solid var(--spice-button-disabled);
}

.criteriaLabel {
  font-weight: 600;
  color: var(--spice-text);
  font-size: 12px;
  min-width: 80px;
  flex-shrink: 0;
}

.criteriaValue {
  color: var(--spice-subtext);
  font-size: 12px;
  line-height: 1.4;
  flex: 1;
}

.noCriteria {
  padding: 16px;
  text-align: center;
  color: var(--spice-subtext);
  font-style: italic;
  background: var(--spice-card);
  border-radius: 6px;
  border: 1px dashed var(--spice-button-disabled);
  opacity: 0.7;
}

.playlistActions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: auto;
}

.syncToggleButton {
  background: var(--spice-card);
  color: var(--spice-text);
  border: 1px solid var(--spice-button-disabled);
}

.syncToggleButton:not(.inactive):hover:not(:disabled) {
  background: rgb(255 99 71 / 10%);
  border-color: rgb(255 99 71 / 40%);
  color: tomato;
}

.syncToggleButton.inactive {
  border-color: var(--spice-button-disabled);
  color: var(--spice-subtext);
}

.syncToggleButton.inactive:hover:not(:disabled) {
  background: rgb(29 185 84 / 10%);
  border-color: rgb(29 185 84 / 40%);
  color: #1db954;
}

.syncButtonUrgent {
  background: linear-gradient(135deg, orange, #ff8c00);
  color: #fff;
  border: 1px solid orange;
  box-shadow: 0 0 20px rgb(255 165 0 / 40%), 0 4px 15px rgb(255 165 0 / 30%);
  animation: urgentGlow 2s ease-in-out infinite alternate;
  font-weight: 600;
}

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

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

.syncButton.syncButtonUrgent:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgb(255 165 0 / 60%),
    rgb(255 140 0 / 60%)
  );
  border-color: rgb(255 165 0 / 80%);
  box-shadow: 0 4px 12px rgb(255 165 0 / 40%);
}

.syncButton.syncing.syncButtonUrgent::before {
  display: none;
}

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

  50% {
    opacity: 0.7;
  }
}

@keyframes urgentGlow {
  0% {
    box-shadow: 0 0 20px rgb(255 165 0 / 40%), 0 4px 15px rgb(255 165 0 / 30%);
  }

  100% {
    box-shadow: 0 0 30px rgb(255 165 0 / 60%), 0 4px 20px rgb(255 165 0 / 40%);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.syncButton {
  background: linear-gradient(
    135deg,
    rgb(79 172 254 / 15%),
    rgb(13 110 253 / 15%)
  );
  color: #fff;
  border: 1px solid rgb(79 172 254 / 30%);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

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

.syncButton.syncButtonUrgent:hover::before {
  left: 100%;
}

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

.syncButton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgb(79 172 254 / 8%);
  border-color: rgb(79 172 254 / 15%);
  transform: none;
  box-shadow: none;
}

.syncButton:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgb(79 172 254 / 25%),
    rgb(13 110 253 / 25%)
  );
  border-color: rgb(79 172 254 / 50%);
  box-shadow: 0 4px 12px rgb(79 172 254 / 30%);
}

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

.syncIndicator {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
}

.syncIndicator.synced {
  color: #1db954;
  background-color: rgb(29 185 84 / 10%);
  border-color: rgb(29 185 84 / 20%);
}

.syncIndicator.needsSync {
  color: orange;
  background-color: rgb(255 165 0 / 10%);
  border-color: rgb(255 165 0 / 20%);
  animation: pulse 2s infinite;
}

.syncIndicator.unknown {
  color: var(--spice-subtext);
  background-color: var(--spice-button-disabled);
  border-color: var(--spice-button-disabled);
}

.syncButton.syncing {
  background: linear-gradient(
    135deg,
    rgb(79 172 254 / 20%),
    rgb(13 110 253 / 20%)
  );
  border-color: rgb(79 172 254 / 40%);
  position: relative;
  padding-left: 28px;
}

.syncButton.syncing::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid transparent;
  border-top: 2px solid rgb(79 172 254 / 80%);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.syncButton.syncing.syncButtonUrgent {
  background: linear-gradient(
    135deg,
    rgb(255 165 0 / 20%),
    rgb(255 140 0 / 20%)
  );
  border-color: rgb(255 165 0 / 40%);
  box-shadow: 0 4px 12px rgb(255 165 0 / 30%);
  animation: none;
}

.syncButton.syncing.syncButtonUrgent::after {
  border-top: 2px solid rgb(255 165 0 / 90%);
}

.syncButton.syncing::before {
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.actionButton {
  border: 1px solid var(--spice-button-disabled);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--spice-card);
  color: var(--spice-text);
}

.actionButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@media (width <= 600px) {
  .modal {
    margin: 10px;
    max-height: 90vh;
  }

  .modalHeader {
    padding: 16px;
  }

  .modalBody {
    padding: 16px;
  }

  .playlistHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .criteriaItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .criteriaLabel {
    min-width: auto;
  }
}

.controlsSection {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--spice-card);
  border-bottom: 1px solid var(--spice-button-disabled);
  flex-wrap: wrap;
}

.searchSection {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.searchInput {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--spice-button-disabled);
  border-radius: 6px;
  background: var(--spice-main);
  color: var(--spice-text);
  font-size: 14px;
  outline: 0;
  transition: border-color 0.2s ease;
}

.searchInput:focus {
  border-color: var(--spice-accent);
}

.searchInput::placeholder {
  color: var(--spice-subtext);
}

.clearSearchButton {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: 0 0;
  border: none;
  color: var(--spice-subtext);
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  font-size: 16px;
  line-height: 1;
}

.clearSearchButton:hover {
  background: var(--spice-button-disabled);
  color: var(--spice-text);
}

.sortSection {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sortLabel {
  color: var(--spice-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.sortSelect {
  padding: 6px 8px;
  border: 1px solid var(--spice-button-disabled);
  border-radius: 4px;
  background: var(--spice-main);
  color: var(--spice-text);
  font-size: 14px;
  cursor: pointer;
  outline: 0;
  transition: border-color 0.2s ease;
}

.sortSelect:focus {
  border-color: var(--spice-accent);
}

.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: 700;
  transition: background-color 0.2s ease;
}

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

.emptyState {
  text-align: center;
  padding: 40px 20px;
  color: var(--spice-subtext);
}

.emptyState p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
}

.emptyState h3 {
  margin: 0 0 12px;
  font-size: 20px;
  color: var(--spice-text);
}

.emptyState .clearSearchButton {
  position: static;
  transform: none;
  background: var(--spice-button);
  color: var(--spice-text);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  width: auto;
  height: auto;
}

.emptyState .clearSearchButton:hover {
  background: var(--spice-button-active);
}

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

  .searchSection {
    min-width: unset;
  }

  .sortSection {
    justify-content: space-between;
  }
}

.playlistMetadata {
  margin-top: 4px;
}

.timeStamp {
  font-size: 12px;
  color: var(--spice-subtext);
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 4px;
}
