/* ==========================================================================
   ccbSayIt Setlists — Section-specific styles
   Shared components (nav, aside, headings, stats, player) are in shared.css
   ========================================================================== */

/* --- Setlist nav extras (year bar chart) --- */
/* Year grid in sidebar */
.sl-nav-year-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin: var(--cs-space-xs) var(--cs-space-md);
}
.sl-nav-year-cell {
  display: block; text-align: center;
  padding: 3px 0; font-size: var(--cs-font-xs);
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.5); text-decoration: none;
  border-radius: 2px;
  transition: background 0.1s, color 0.1s;
}
.sl-nav-year-cell:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sl-nav-year-cell.active { background: var(--cs-gold); color: #000; font-weight: 600; }

/* ==========================================================================
   SHOW DETAIL PAGE
   ========================================================================== */

.sl-show-at { font-weight: 400; }
.sl-show-location { margin-top: 1px; }
.sl-show-bands { margin-top: 6px; }

/* Setlist tracklist */
.sl-tracklist { margin-top: var(--cs-space-xs); }
.sl-track { display: flex; align-items: baseline; gap: 10px; padding: var(--cs-space-xs) 0; border-bottom: 1px solid var(--cs-border); }
.sl-track:last-child { border-bottom: none; }
.sl-track-title { font-size: var(--cs-font-base); }
.sl-track-title a { color: var(--cs-link); text-decoration: none; }
.sl-track-title a:hover { color: var(--cs-gold); }

/* Show notes */
.sl-show-notes { padding: var(--cs-space-md) 0; font-size: var(--cs-font-sm); color: var(--cs-text-secondary); line-height: 1.6; margin-top: var(--cs-space-lg); border-top: 1px solid var(--cs-border); }
.sl-no-setlist { color: var(--cs-text-muted); font-size: var(--cs-font-sm); padding: var(--cs-space-md) 0; }

/* Venue info (below map in sidebar) */
.sl-venue-info { margin-top: var(--cs-space-sm); font-size: var(--cs-font-sm); line-height: 1.4; }
.sl-venue-info a { color: var(--cs-link); }
.sl-venue-info-loc { color: var(--cs-text-secondary); }
.sl-venue-info-link { color: var(--cs-text-muted) !important; margin-left: 2px; }
.sl-venue-info-link:hover { color: var(--cs-gold) !important; }
.sl-venue-info-count { font-size: var(--cs-font-sm); color: var(--cs-text-muted); margin-top: 2px; }

.sl-venue-other { display: flex; flex-wrap: wrap; gap: var(--cs-space-xs); margin-top: var(--cs-space-sm); }
.sl-venue-other a { font-size: var(--cs-font-sm); color: var(--cs-text-secondary); text-decoration: none; background: var(--cs-bg-card); padding: 2px var(--cs-space-md); border-radius: var(--cs-radius-md); }
.sl-venue-other a:hover { color: var(--cs-gold); background: var(--cs-bg-card-hover); }

/* Show facts */
.sl-show-fact { font-size: var(--cs-font-sm); color: var(--cs-text); padding: 3px 0; line-height: 1.4; }
.sl-show-fact .fa-bolt { color: var(--cs-gold); margin-right: var(--cs-space-xs); }

/* Map popups */
.sl-map-popup { max-height: 200px; overflow-y: auto; font-size: var(--cs-font-sm); font-family: var(--cs-font); }
.sl-map-popup-count { color: var(--cs-text-muted); }
.sl-map-popup-link { color: var(--cs-link); text-decoration: none; display: block; padding: 2px 0; }
.sl-map-popup-link:hover { color: var(--cs-gold); }

/* Maps */
.sl-overview-map { height: 280px; border-radius: var(--cs-radius-lg); overflow: hidden; margin-bottom: var(--cs-space-2xl); }
.sl-aside-map { width: 100%; height: 160px; border-radius: var(--cs-radius-lg); margin-bottom: var(--cs-space-sm); overflow: hidden; }

/* Stat rows */
.sl-aside-stat { display: flex; align-items: center; gap: var(--cs-space-sm); padding: var(--cs-space-xs) 0; font-size: var(--cs-font-sm); }
.sl-aside-stat-label { color: var(--cs-text-secondary); flex-shrink: 0; }
.sl-aside-stat-name { flex-shrink: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-aside-stat-value { font-weight: 600; color: var(--cs-text); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: auto; }

/* ==========================================================================
   SHOW LISTINGS (year, downloads, etc.)
   ========================================================================== */
.sl-show-row {
  display: flex; align-items: center; padding: 5px var(--cs-space-sm);
  text-decoration: none; color: inherit; cursor: pointer;
  border-bottom: 1px solid var(--cs-border); border-left: 3px solid transparent;
  font-size: var(--cs-font-sm);
}
.sl-show-row:hover { background: var(--cs-bg-aside); border-left-color: var(--cs-gold); }
.sl-show-row-date { width: 50px; flex-shrink: 0; color: var(--cs-text-muted); font-variant-numeric: tabular-nums; }
.sl-show-row-icons { display: flex; gap: var(--cs-space-sm); width: 58px; min-width: 58px; flex-shrink: 0; color: var(--cs-text-muted); font-size: var(--cs-font-sm); margin-right: var(--cs-space-md); }
.sl-show-row-icons a { color: var(--cs-text-muted); text-decoration: none; }
.sl-show-row-icons a:hover { color: var(--cs-gold); }
.sl-show-row-venue { font-weight: 600; color: var(--cs-text); font-size: var(--cs-font-base); }
.sl-show-row-loc { color: var(--cs-text-secondary); font-weight: normal; }

.sl-show-row.no-setlist .sl-show-row-venue { font-weight: normal; }
.sl-no-setlist-label { font-size: var(--cs-font-sm); color: var(--cs-text-muted); margin-left: var(--cs-space-sm); }

/* Year browse row (homepage) */
.sl-year-row { gap: 10px; }
.sl-year-row-label { width: 50px; flex-shrink: 0; font-weight: 600; color: var(--cs-text); font-variant-numeric: tabular-nums; }
.sl-year-row-bar { width: 80px; flex-shrink: 0; display: flex; align-items: center; }

/* ==========================================================================
   STATS TABLE
   ========================================================================== */
.sl-stats-table { width: 100%; border-collapse: collapse; font-size: var(--cs-font-base); }
.sl-stats-table th {
  text-align: left; font-size: var(--cs-font-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cs-text-muted); padding: var(--cs-space-sm) var(--cs-space-md); border-bottom: 2px solid var(--cs-border);
}
.sl-stats-table .col-played { width: 70px; }
.sl-stats-table .col-freq { width: 55px; }
.sl-stats-table .col-bar { width: 80px; }
.sl-stats-table td { padding: 5px var(--cs-space-md); border-bottom: 1px solid var(--cs-border); }
.sl-stats-table a { color: var(--cs-link); text-decoration: none; }
.sl-stats-table a:hover { color: var(--cs-gold); }
.sl-stats-table .sl-num { text-align: right; color: var(--cs-text-muted); font-variant-numeric: tabular-nums; }
.sl-freq-bar { height: 5px; background: var(--cs-gold); border-radius: var(--cs-radius-sm); display: inline-block; vertical-align: middle; }

/* ==========================================================================
   VENUE MAP + DIRECTORY
   ========================================================================== */
.sl-venue-nav { margin-bottom: var(--cs-space-2xl); display: flex; gap: var(--cs-space-xl); align-items: flex-start; }
.sl-venue-nav-map { max-width: 480px; width: 100%; flex-shrink: 0; }
.sl-venue-nav-map object { width: 100%; height: auto; aspect-ratio: 959 / 593; display: block; }
.sl-venue-nav-intl { display: flex; flex-wrap: wrap; gap: var(--cs-space-xs); align-content: flex-start; }
.sl-venue-nav-intl-pill {
  padding: 2px var(--cs-space-md); border-radius: var(--cs-radius-md); text-decoration: none;
  font-size: var(--cs-font-xs); color: var(--cs-text-secondary); display: flex; align-items: baseline; gap: 3px;
  border: 1px solid var(--cs-border);
  background: color-mix(in srgb, var(--cs-gold) calc(var(--pill-opacity, 0.5) * 100%), transparent);
}
.sl-venue-nav-intl-pill:hover { border-color: var(--cs-gold-dark); color: var(--cs-text); }
.sl-venue-nav-intl-pill span { color: var(--cs-text-muted); }

.sl-venue-grid-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px var(--cs-space-md); color: var(--cs-link); text-decoration: none;
  font-size: var(--cs-font-sm); border-radius: var(--cs-radius-md); border-bottom: 1px solid var(--cs-border);
}
.sl-venue-grid-item:hover { background: var(--cs-bg-card); color: var(--cs-gold); }
.sl-venue-grid-loc { color: var(--cs-text-muted); }
.sl-venue-grid-count { color: var(--cs-text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: var(--cs-space-md); }

.sl-band-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; font-size: var(--cs-font-base); }
.sl-band-grid a { display: block; padding: 5px var(--cs-space-md); color: var(--cs-link); text-decoration: none; border-radius: var(--cs-radius-md); }
.sl-band-grid a:hover { background: var(--cs-bg-card); color: var(--cs-gold); }
.sl-band-count { color: var(--cs-text-muted); margin-left: var(--cs-space-xs); }

/* Sort controls — segmented toggle */
.sl-sort-controls {
  display: inline-flex;
  margin-left: var(--cs-space-lg);
  vertical-align: middle;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  position: relative;
  top: -1px;
}
.sl-sort-controls .sl-sort-btn {
  font-size: var(--cs-font-xs);
  padding: 3px 11px;
  background: transparent;
  color: var(--cs-text-muted);
  cursor: pointer;
  border: none;
  font-family: var(--cs-font);
  letter-spacing: 0.02em;
  transition: color 0.15s, background 0.15s;
  position: relative;
}
.sl-sort-controls .sl-sort-btn + .sl-sort-btn {
  border-left: 1px solid var(--cs-border);
}
.sl-sort-controls .sl-sort-btn:hover {
  color: var(--cs-gold-dark);
  background: var(--cs-bg-aside);
}
.sl-sort-controls .sl-sort-btn.active {
  color: var(--cs-bg);
  background: var(--cs-gold);
  font-weight: 600;
  text-shadow: 0 0.5px 0 rgba(0,0,0,0.12);
}

/* ==========================================================================
   SONG STATS DETAIL
   ========================================================================== */

/* Heatmap — uses shared cs-heatmap-* from shared.css */

/* Album card (art + title) in stats sidebar */
.sl-album-card { display: flex; align-items: center; gap: 10px; padding: var(--cs-space-xs) 0; text-decoration: none; color: var(--cs-link); font-size: var(--cs-font-sm); }
.sl-album-card:hover { color: var(--cs-gold); }
.sl-album-art { width: 40px; height: 40px; border-radius: var(--cs-radius-md); object-fit: cover; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .sl-venue-nav { flex-direction: column; }
  .sl-venue-nav-map { max-width: 100%; }
}