/* songs.css */
/* Layout and table styles specific to the "Vote for Songs" page */

.songs-section {
  padding: 2rem 0 3rem;
}

/* .songs-section p.intro {
  margin-bottom: 1.5rem;
  max-width: 54rem;
} */

.songs-table-wrapper {
  overflow-x: auto;
}

table.songs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

table.songs-table thead tr {
  background: var(--bg-card, #f5f5f5);
}

table.songs-table th,
table.songs-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--card-border, #ddd);
  text-align: left;
}

table.songs-table th.numeric,
table.songs-table td.numeric {
  text-align: right;
  white-space: nowrap;
}

table.songs-table td.song-score {
  font-weight: 600;
}

/* Vote buttons */
.song-actions {
  white-space: nowrap;
}

.vote-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  margin: 0 0.15rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vote-btn:focus-visible {
  outline: 2px solid var(--brand-primary, #650000);
  outline-offset: 2px;
}

.vote-btn.vote-up.is-active {
  background: var(--brand-primary, #650000);
  color: #fff;
}

.vote-btn.vote-down.is-active {
  background: #333;
  color: #fff;
}

/* Dark mode: lighten active downvote pill */
body.theme-dark .vote-btn.vote-down.is-active {
  background: #898989; /* or #666 if you want it even lighter */
}

/* Dark mode tweaks */
body.theme-dark table.songs-table thead tr {
  background: #222;
}

body.theme-dark table.songs-table th,
body.theme-dark table.songs-table td {
  border-bottom-color: #333;
}

/* ---------------------------------------------------------
   Admin action button container
   --------------------------------------------------------- */
.admin-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

/* Same width for both buttons */
.admin-actions .song-verify-btn,
.admin-actions .song-delete-btn {
  width: 90px; /* adjust if needed */
  text-align: center;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   Admin delete button
   --------------------------------------------------------- */
.song-delete-btn {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #c62828;
  background: #ffffff;
  color: #c62828;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}

.song-delete-btn:hover {
  background: #c62828;
  color: #ffffff;
  border-color: #b71c1c;
}

/* ---------------------------------------------------------
   Admin verify button
   --------------------------------------------------------- */
.song-verify-btn {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #2e7d32; /* dark-ish green */
  background: #ffffff;
  color: #2e7d32;
  cursor: pointer;
  white-space: nowrap;
  margin-right: 6px; /* small gap before Delete */
  transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}

.song-verify-btn:hover {
  background: #2e7d32;
  color: #ffffff;
  border-color: #1b5e20;
}

/* ---------------------------------------------------------
   SONGS SEARCH BOX STYLING
   --------------------------------------------------------- */

.songs-search-form {
  margin: 0 0 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.songs-search-form__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#songs-search-input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
}

#songs-search-input:focus {
  outline: none;
  border-color: #650000; /* your choir maroon */
  box-shadow: 0 0 0 2px rgba(101, 0, 0, 0.2);
}

.songs-search-form button {
  padding: 10px 16px;
  background-color: #650000;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.songs-search-form button:hover {
  opacity: 0.85;
}

.songs-search-form__clear {
  padding: 10px 16px;
  background-color: #bbb;
  color: #222;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  transition: opacity 0.2s ease-in-out;
}

.songs-search-form__clear:hover {
  opacity: 0.7;
}

.songs-search-form__summary {
  font-size: 14px;
  color: #555;
}

.songs-search-hint {
  font-size: 1rem; /* same as normal paragraph text */
  color: #cc0000; /* nice bright red */
  margin: 4px 0 8px;
  line-height: 1.4;
  padding-top: 18px; /* NEW — tiny breathing room */
}

/* Tighten padding at top of the songs results wrapper */
.songs-results.songs-section {
  padding-top: 0.5rem; /* was effectively 2rem */
  padding-bottom: 10px; /* was 70px via .songs-section */
}

.songs-table th.sortable {
  cursor: pointer;
  white-space: nowrap;
}

.songs-table th.sortable::after {
  content: "";
  margin-left: 4px;
  font-size: 0.8em;
}

/* Sortable but not currently sorted */
.songs-table th.sortable:not(.is-sorted-asc):not(.is-sorted-desc)::after {
  content: "⇅";
  opacity: 0.4;
  margin-left: 0.35em;
}

.songs-table th.sortable.is-sorted-asc::after {
  content: "↑";
}

.songs-table th.sortable.is-sorted-desc::after {
  content: "↓";
}

/* ---------------------------------------------------------
   Medium screens: hide YEAR column below 700px
   --------------------------------------------------------- */
@media (max-width: 700px) {
  .songs-table th.col-year,
  .songs-table td.col-year {
    display: none;
  }
}

/* ---------------------------------------------------------
   Responsive: on small screens, show only Title + Vote columns
   --------------------------------------------------------- */
@media (max-width: 600px) {
  /* Hide Artist, Year, Added, Score */
  .songs-table th.col-artist,
  .songs-table td.col-artist,
  .songs-table th.col-year,
  .songs-table td.col-year,
  .songs-table th.col-added,
  .songs-table td.col-added,
  .songs-table th.col-score,
  .songs-table td.col-score,
  .songs-table th.col-admin,
  .songs-table td.col-admin {
    display: none;
  }

  /* Let the title take most of the width */
  .songs-table th.col-title,
  .songs-table td.col-title {
    width: 70%;
  }

  /* Vote column on the right, a bit narrower */
  .songs-table th.col-vote,
  .songs-table td.col-vote {
    width: 30%;
    text-align: right;
  }

  /* Optional: tighten padding a bit for small screens */
  .songs-table td,
  .songs-table th {
    padding: 6px 8px;
    font-size: 14px;
  }
}

/* ---------------------------------------------------------
   Highlight top voted songs (for all users)
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   Top voted songs: gold badge before the title
   --------------------------------------------------------- */

.song-row--top .col-title {
  position: relative;
  padding-left: 28px; /* make room for the badge */
}

/* ---------------------------------------------------------
   Top 20 popular songs – gold row highlight
   --------------------------------------------------------- */

/* Light mode: soft gold background */
tr.song-row--top {
  background: linear-gradient(90deg, #fff6d8 0%, #fff1c2 50%, #fff6d8 100%);
}

/* Dark mode: muted warm gold (subtle, not shouty) */
body.theme-dark tr.song-row--top {
  background: linear-gradient(90deg, #3a3422 0%, #4a4026 50%, #3a3422 100%);
}

/* Create a simple rosette-style badge entirely in CSS */
.song-row--top .col-title::before {
  content: "★";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff; /* white star */
  background: radial-gradient(circle at 30% 30%, #ffeec0, #d4a017);
  border-radius: 50%; /* circular badge */
  box-shadow: 0 0 0 2px #f5d880; /* outer ring */
}

/* Optional: slightly smaller on very small screens */
@media (max-width: 600px) {
  .song-row--top .col-title {
    padding-left: 24px;
  }

  .song-row--top .col-title::before {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 11px;
    left: 4px;
  }
}

/* ---------------------------------------------------------
   iTunes suggestion panel
   --------------------------------------------------------- */

.songs-itunes-panel {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #333;
}

.songs-itunes-panel__inner {
  max-width: 800px;
  margin: 0 auto;
}

.songs-itunes-panel__heading {
  font-weight: 600;
  margin-bottom: 6px;
}

.songs-itunes-panel__subheading {
  margin: 0 0 10px;
  font-size: 13px;
  color: #666;
}

.songs-itunes-panel__note {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid #a2a2a2; /* subtle divider */
  font-size: 14px;
  line-height: 1.45;
  color: #777;
}

body.theme-dark .songs-itunes-panel__note {
  color: #bbb;
  border-top-color: #747474;
}

.songs-itunes-panel__status {
  font-size: 13px;
  color: #777;
}

/* Results list */

.songs-itunes-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.songs-itunes-panel__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
}

.songs-itunes-panel__item:first-child {
  border-top: none;
}

.songs-itunes-panel__title {
  font-weight: 600;
}

.songs-itunes-panel__artist {
  font-size: 13px;
  color: #555;
}

.songs-itunes-panel__meta {
  font-size: 12px;
  color: #777;
}

.songs-itunes-panel__meta span + span::before {
  content: " · ";
}

.songs-itunes-panel__select-btn {
  margin-top: 4px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #650000;
  background: #ffffff;
  color: #650000;
  cursor: pointer;
  transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}

.songs-itunes-panel__select-btn:hover {
  background: #650000;
  color: #ffffff;
  border-color: #650000;
}

/* ---------------------------------------------------------
   Extra bottom space so sticky bar doesn't cover last rows
   --------------------------------------------------------- */
.songs-section {
  padding-bottom: 70px; /* Adjust if sticky bar height changes */
}

/* ---------------------------------------------------------
   Manual suggestion form (when iTunes unavailable)
   --------------------------------------------------------- */

.songs-manual-form {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.songs-manual-form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.songs-manual-form__label {
  font-size: 14px;
  font-weight: 600;
  color: #444;
}

.songs-manual-form__field-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.songs-manual-form__input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
}

.songs-manual-form__input:focus {
  outline: none;
  border-color: #650000; /* choir maroon */
  box-shadow: 0 0 0 2px rgba(101, 0, 0, 0.2);
}

/* Clear button – match search clear styling */

.songs-manual-form__clear {
  padding: 10px 16px;
  background-color: #650000; /* choir brand colour */
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out;
}

.songs-manual-form__clear:hover {
  opacity: 0.85;
}

/* Dark mode tweak */
body.theme-dark .songs-manual-form__clear {
  background-color: #ab0000; /* slightly lighter maroon in dark mode */
  color: #ffffff;
}

/* Send button – match main search button styling */

.songs-manual-form__actions {
  margin-top: 4px;
  display: flex;
  justify-content: flex-start;
}

.songs-manual-form__send {
  padding: 10px 16px;
  background-color: #650000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out;
  width: 170px; /* bigger target */
  text-align: center;
}

.songs-manual-form__send:hover {
  opacity: 0.85;
}

/* Small tweak for dark mode */

body.theme-dark .songs-manual-form__label {
  color: #ddd;
}

/* ---------------------------------------------------------
   Dark mode: iTunes panel readability
   --------------------------------------------------------- */
body.theme-dark .songs-itunes-panel {
  color: #ddd;
  border-top-color: #333;
}

body.theme-dark .songs-itunes-panel__subheading,
body.theme-dark .songs-itunes-panel__note,
body.theme-dark .songs-itunes-panel__status,
body.theme-dark .songs-itunes-panel__artist,
body.theme-dark .songs-itunes-panel__meta {
  color: #bbb;
}

body.theme-dark .songs-itunes-panel__item {
  border-top-color: #333;
}