/* ================================================================
   PlaylistMap UI polish — 2026-07-15
   Site-wide, additive design-system overrides (all viewports).
   Currently: the Spotify artist-autocomplete dropdown (.spotify-list),
   used in the register modal, profile modal and profile page — was a
   white jQuery-UI box over the dark theme. !important is required to
   beat inline styles injected by public/js/script.js (75px imgs) and
   the bg-white utility class on the <ul>.
   ================================================================ */

ul.spotify-list {
  background: #181818 !important;
  border: 1px solid #2c2c2c !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  color: #fff !important;
  padding: 6px !important;
  height: auto !important;          /* was a forced 275-300px box even for 2 results */
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  list-style: none;
  min-width: 260px;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
}

ul.spotify-list::-webkit-scrollbar { width: 8px; }
ul.spotify-list::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 8px; }
ul.spotify-list::-webkit-scrollbar-track { background: transparent; }

ul.spotify-list li {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 2px !important;
  padding: 8px 10px !important;
  border-radius: 9px;
  border: 1px solid transparent !important;
  color: #ececec !important;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease;
}

ul.spotify-list li:hover {
  background: #232323 !important;   /* was #C0C0C0 gray with a 1px gray border */
  border: 1px solid #e13f32 !important;
  cursor: pointer;
}

ul.spotify-list li img {
  width: 40px !important;           /* script.js injects inline 75px */
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex: 0 0 auto;
  margin-right: 0 !important;
  background: #232323;
}

ul.spotify-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}