/* === HALLOWEEN THEME FOR SONG LIST === */
/* Spooky seasonal styling for Halloween songs and page theme */

/* === HALLOWEEN HERO SECTION === */
.songlist-hero {
  background: linear-gradient(135deg, #1a0f0f 0%, #2d1810 50%, #1a0f0f 100%) !important;
  position: relative;
  overflow: hidden;
}

.songlist-hero::before {
  background: 
    linear-gradient(135deg, rgba(255,140,0,0.2) 0%, rgba(0,0,0,0.4) 100%),
    repeating-linear-gradient(45deg, rgba(255,140,0,0.05) 0px, rgba(255,140,0,0.05) 2px, transparent 2px, transparent 4px) !important;
}

.songlist-hero::after {
  background: radial-gradient(circle, rgba(255,140,0,0.15) 0%, rgba(255,140,0,0) 70%) !important;
}

.songlist-hero .page-title {
  color: #ff8c00 !important;
  text-shadow: 
    0 0 10px rgba(255,140,0,0.8),
    0 0 20px rgba(255,140,0,0.6),
    2px 4px 8px rgba(0, 0, 0, 0.8) !important;
}

.songlist-hero .page-subtitle {
  color: #ffa500 !important;
  text-shadow: 0 0 5px rgba(255,140,0,0.5), 1px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

.hero-cta-button {
  background: linear-gradient(45deg, #ff8c00, #ffa500) !important;
  box-shadow: 
    0 4px 15px rgba(255, 140, 0, 0.4),
    0 0 20px rgba(255, 140, 0, 0.3) !important;
}

.hero-cta-button:hover {
  box-shadow: 
    0 6px 20px rgba(255, 140, 0, 0.6),
    0 0 30px rgba(255, 140, 0, 0.5) !important;
  background: linear-gradient(45deg, #ffa500, #ffb52e) !important;
}

/* === HALLOWEEN SONG ROWS === */
/* Target specific Halloween songs by matching text content */
#songlist-table tbody tr:has(td:nth-child(2):is(
  [data-song="Creep"],
  [data-song="Bad Moon Rising"],
  [data-song="Psycho Killer"],
  [data-song="Zombie"],
  [data-song="Ghostbusters"],
  [data-song="Thriller"],
  [data-song="Monster Mash"],
  [data-song="Werewolves of London"],
  [data-song="I Put a Spell on You"]
)) {
  background-color: #000000 !important;
  color: #ff8c00 !important;
  font-weight: bold;
}

/* More specific targeting for Halloween songs */
.halloween-song {
  background-color: #000000 !important;
  color: #ff8c00 !important;
  font-weight: bold;
  border-left: 3px solid #ff8c00 !important;
  position: relative;
}

.halloween-song td {
  color: #ff8c00 !important;
  background-color: #000000 !important;
}

.halloween-song:hover {
  background-color: #1a1a1a !important;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.5) !important;
}

/* Add pumpkin emoji indicator */
.halloween-song td:first-child::before {
  content: '🎃 ';
  font-size: 1em;
  margin-right: 4px;
}

/* === PAGE BACKGROUND === */
.songlist-content-section {
  background: linear-gradient(to bottom, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
}

.section-container {
  background: rgba(0, 0, 0, 0.3);
  padding: 2rem;
  border-radius: 8px;
}

/* === TABLE STYLING === */
#songlist-table {
  background-color: #1a1a1a;
  border: 2px solid #333;
}

table#songlist-table thead {
  background-color: #2d1810;
  background: #2d1810;
}

table#songlist-table thead tr {
  background-color: #2d1810;
  background: #2d1810;
}

table#songlist-table thead tr th {
  background-color: #2d1810;
  background: #2d1810;
  color: #ff8c00;
  border-color: #ff8c00;
  text-shadow: 0 0 5px rgba(255, 140, 0, 0.5);
}

#songlist-table tbody tr {
  background-color: #2a2a2a;
}

#songlist-table tbody tr:nth-child(even) {
  background-color: #333333;
}

#songlist-table tbody tr:hover:not(.halloween-song) {
  background-color: #3a3a3a !important;
}

#songlist-table td {
  color: #cccccc;
  border-color: #444;
}

/* === SEARCH BOX === */
#songSearchInput {
  background-color: #2a2a2a !important;
  color: #ff8c00 !important;
  border: 2px solid #ff8c00 !important;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.3);
}

#songSearchInput::placeholder {
  color: #ffa500;
  opacity: 0.6;
}

#songSearchInput:focus {
  border-color: #ffa500 !important;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.5) !important;
}

/* === PRINT STYLES - KEEP HALLOWEEN THEME === */
@media print {
  .halloween-song {
    background-color: #000000 !important;
    color: #ff8c00 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .halloween-song td {
    color: #ff8c00 !important;
    background-color: #000000 !important;
  }

  .halloween-song td:first-child::before {
    content: '🎃 ';
  }
}