/* Music Player Styles - HTML5 audio player with responsive playlist
 * Adapted from player/style.css and optimized for Rails app theme
 */

/* Audio Player Wrapper */
#music-player-wrap {
  max-width: 900px;
  margin: 0 auto 40px;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
}

/* Now Playing Bar */
#nowPlay {
  background: var(--bg-tertiary);
  padding: 21px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

#npAction {
  color: var(--text-secondary);
  font-size: 16px;
}

#npTitle {
  color: var(--text-primary);
  font-size: 16px;
  flex: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 20px;
}

/* Audio Controls Wrapper */
#audiowrap {
  background: var(--bg-tertiary);
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
}

#audio0 {
  margin-bottom: 10px;
}

audio {
  width: 100%;
  outline: none;
}

/* Previous/Next Buttons */
#tracks {
  min-height: 60px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
}

a[id^="btn"] {
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 24px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
}

#btnDownload {
  font-size: 20px;
}

a[id^="btn"]:hover,
a[id^="btn"]:active {
  background: var(--border-color);
  transform: scale(1.05);
}

/* Playlist Wrapper */
#plwrap {
  max-height: calc(100vh - 450px);
  overflow-y: auto;
  scrollbar-width: thin;
}

#plwrap::-webkit-scrollbar {
  width: 8px;
}

#plwrap::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

#plwrap::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

#plwrap::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Playlist */
#plList {
  margin: 0;
  padding: 0;
  list-style: none;
}

#plList li {
  background: var(--bg-secondary);
  cursor: pointer;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s;
}

#plList li:hover {
  background: var(--bg-tertiary);
}

#plList li:last-child {
  border-bottom: none;
}

/* Playlist Item */
.plItem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 21px;
}

.plNum {
  width: 40px;
  color: var(--text-secondary);
  font-size: 16px;
  flex-shrink: 0;
}

.plTitle {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 16px;
}

.plTags {
  color: var(--text-secondary);
  font-size: 13px;
  flex-shrink: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected Track */
.plSel,
.plSel:hover {
  background: var(--accent) !important;
  cursor: default !important;
}

.plSel .plNum,
.plSel .plTitle,
.plSel .plTags {
  color: #0d1824 !important;
  font-weight: 500;
}

/* Responsive Design */
@media only screen and (max-width: 768px) {
  #music-player-wrap {
    margin: 0 0 40px;
  }

  #nowPlay {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  #npTitle {
    text-align: left;
    margin-left: 0;
  }

  .plTags {
    display: none;
  }

  a[id^="btn"] {
    font-size: 40px;
    padding: 0 20px 8px;
  }

  #tracks {
    min-height: 50px;
  }
}

@media only screen and (max-width: 480px) {
  .plItem {
    padding: 0 15px;
  }

  .plNum {
    width: 35px;
    font-size: 14px;
  }

  .plTitle {
    font-size: 14px;
  }

  a[id^="btn"] {
    font-size: 35px;
    padding: 0 15px 6px;
  }
}

/* ==========================================================================
   Admin in-player curation (Trello 345/374)

   Hide/restore + tag editing, on the player page itself instead of in Avo.
   Shared by musics/index.html.erb (mobile) and musics/desktop.html.erb, which
   both link this stylesheet — the per-view <style> blocks hold only what
   actually differs between the two layouts.

   ⚠️ COLOURS COME FROM THE THEME TOKENS, never from a literal. `--accent` is
   #ecc879 (gold) on the dark theme and #ff6b35 on the light one — see the two
   blocks at the top of application.css — so a hardcoded gold would be wrong for
   one of them exactly as the blue it replaced was wrong for both. The patterns
   below are the ones the rest of the player already uses:
     filled/active  -> background: var(--accent); color: #0d1824
     hover on gold  -> background: var(--accent-hover); filter: brightness(.92)
     focus          -> border-color: var(--accent)
     panel chrome   -> var(--bg-secondary) / var(--bg-tertiary) / var(--border-color)
   `#0d1824` stays a literal on purpose: it is the app-wide "ink on accent"
   constant (.plSel .plTitle, .tag-chip.active, .clear-filters-btn:hover all use
   it), not a theme value.
   ========================================================================== */

/* Per-row admin buttons, sitting next to the favourite heart. Same chrome as
   .music-like-btn, which is why the resting colour is the same token. */
.music-admin-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.1s ease, color 0.15s ease;
}

.music-admin-btn:hover { transform: scale(1.15); color: var(--accent); }
.music-admin-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.music-admin-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Hidden-from-users state: the eye is filled in and the row is dimmed. */
.music-hide-btn.is-hidden-track { color: var(--accent); }
.plSel .music-admin-btn { color: #0d1824; }

.plHidden { opacity: 0.45; }
.plHidden .plTitle { text-decoration: line-through; }
.plSel.plHidden { opacity: 0.75; }

/* "Hidden" quick-filter, alongside Trending / Favourites. Mirrors
   .favourites-btn: the icon carries the colour while idle, and inherits the
   dark ink once .trending-btn.active paints the button accent. */
.show-hidden-btn i { color: var(--accent); }
.show-hidden-btn.active i { color: inherit; }

/* --------------------------------------------------------------------------
   Tag editor

   Fixed-position and hoisted out of the playlist (see _admin_tag_editor
   .html.erb) so a playlist rebuild can't destroy it and an overflow:hidden
   ancestor can't clip it. Chrome matches #music-player-wrap: a surface panel
   inside a var(--border-color) border.
   -------------------------------------------------------------------------- */
.music-tag-editor {
  position: fixed;
  z-index: 10000;
  width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 460px);
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 12px;
  color: var(--text-primary);
  font-size: 13px;
}

.music-tag-editor .mte-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.music-tag-editor .mte-track {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-tag-editor .mte-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.music-tag-editor .mte-close:hover { color: var(--accent); }

.music-tag-editor .mte-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
  margin-bottom: 10px;
}

.music-tag-editor .mte-empty { color: var(--text-secondary); font-style: italic; }

/* An applied tag. Same treatment as .tag-chip.active in the filter bar — this
   IS the same idea, one row down. */
.music-tag-editor .mte-chip {
  background: var(--accent);
  border: none;
  color: #0d1824;
  border-radius: 12px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.music-tag-editor .mte-chip .mte-x { opacity: 0.75; margin-left: 2px; }

/* Clicking removes it, so hover goes to the danger token rather than to a
   darker accent — the colour is saying what the click does, not that the
   control is hot. The ink stays dark for both. */
.music-tag-editor .mte-chip:hover { background: var(--danger-color); color: #0d1824; }

.music-tag-editor .mte-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 7px 9px;
  font-size: 13px;
  margin-bottom: 8px;
}

.music-tag-editor .mte-input:focus { outline: none; border-color: var(--accent); }

.music-tag-editor .mte-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 10px;
}

/* Not-yet-applied, so it reads as the filter bar's idle .tag-item-compact and
   only fills with accent on hover — the same before/after the chips above show. */
.music-tag-editor .mte-suggestion {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
}

.music-tag-editor .mte-suggestion:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0d1824;
}

.music-tag-editor .mte-foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.music-tag-editor .mte-save {
  background: var(--accent);
  border: none;
  color: #0d1824;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* --accent-hover EQUALS --accent on the dark theme, so the brightness step is
   what actually gives the button a hover state there. Same pair as
   #quick-create-btn:hover in videos.css. */
.music-tag-editor .mte-save:hover {
  background: var(--accent-hover);
  filter: brightness(0.92);
}

.music-tag-editor .mte-save:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.music-tag-editor .mte-status { font-size: 12px; color: var(--text-secondary); }
.music-tag-editor .mte-status.is-error { color: var(--danger-color); }

/* ==========================================================================
   Per-track score badges (Trello: "2 scores next to songs")

   "Clips found" and "viral clips" for each track, between the informational
   badges and the interactive controls. Shared by both views, like the admin
   block above — the per-view <style> blocks only carry what differs.

   ⚠️ NOT the fire icon. .plDate already owns fa-fire for "trending on", and two
   flame-coloured numbers on one row would read as one metric split in two.
   ========================================================================== */

.plScores {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.plScore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}

.plScore i { font-size: 11px; color: var(--accent); }

/* Zero is a real answer here ("we found none"), not an empty state — so it is
   dimmed rather than hidden. See _row_scores.html.erb. */
.plScore.is-zero,
.plScore.is-zero i { color: var(--text-secondary); opacity: 0.4; }

.plSel .plScore,
.plSel .plScore i { color: #0d1824; }
.plSel .plScore.is-zero,
.plSel .plScore.is-zero i { color: #0d1824; opacity: 0.55; }

/* The row is tight on a phone: .plTags is already display:none there, and the
   glyph alone carries the meaning once the tooltip is a long-press away. */
@media only screen and (max-width: 768px) {
  .plScores { gap: 8px; }
  .plScore { font-size: 12px; }
}