frontend/src/components/SavedPlaylists.css

.saved-playlists-container {
  padding: 20px;
  background-color: var(--foreground-1);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.saved-playlists-table {
  width: 100%; /* Make table width 100% */
  border-collapse: collapse; /* Collapse borders for better appearance */
}

.saved-playlists-table th,
.saved-playlists-table td {
  padding: 10px;
  text-align: left; /* Align text to the left */
  border-bottom: 1px solid var(--border-color);
}

.saved-playlists-table th {
  background-color: var(--background-secondary); /* Optional: Add background to header */
  color: var(--text-color); /* Set text color for header */
}

.playlist-controls {
  display: flex;
  gap: 5px;
}

.play-button,
.edit-button,
.remove-button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--foreground-secondary);
}

.play-button:hover {
  color: green; /* Change color on hover */
}

.edit-button:hover {
  color: blue; /* Change color on hover */
}

.remove-button:hover {
  color: red; /* Change color on hover */
}

.delete-all-button {
  margin-bottom: 10px;
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.delete-all-button:hover {
  background-color: darkred; /* Darker shade on hover */
}