/* profile-tabs.css
   Keeps profile tabs on a single line, enables horizontal scroll, and applies neon styling tweaks.
   Load this from profile.html (or base.html) to make tab layout changes permanent.
*/

/* Tab bar: single-line, horizontally scrollable if needed */
.profile-tabs .tab-bar {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;                 /* force single-line */
  overflow-x: auto !important;                  /* allow horizontal scroll if needed */
  -webkit-overflow-scrolling: touch !important; /* smooth scrolling on iOS */
  padding: 6px !important;
  background: #0b0b0b;
  border-radius: 12px;
  border: 1px solid rgba(255,105,180,0.35);
  box-shadow: 0 0 12px rgba(255,105,180,0.12);
  white-space: nowrap !important;
}

/* subtle neon scrollbar for WebKit */
.profile-tabs .tab-bar::-webkit-scrollbar { height: 8px; }
.profile-tabs .tab-bar::-webkit-scrollbar-thumb {
  background: rgba(255,105,180,0.10);
  border-radius: 6px;
}
.profile-tabs .tab-bar::-webkit-scrollbar-track { background: transparent; }

/* Ensure tab buttons keep intrinsic size and don't wrap */
.profile-tabs .tab-bar .tab-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  font-size: 0.92rem !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  max-width: none !important;
  background: transparent;
  color: var(--color-accent);
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Active/hover visuals (keep matching neon theme) */
.profile-tabs .tab-bar .tab-btn:hover {
  box-shadow: 0 0 10px rgba(255,0,255,0.35);
  transform: translateY(1px);
}

.profile-tabs .tab-bar .tab-btn.active,
.profile-tabs .tab-bar .tab-btn[aria-selected="true"] {
  box-shadow: 0 6px 18px rgba(139,0,255,0.12), 0 0 12px rgba(255,105,180,0.18);
  background: linear-gradient(90deg,#ff69b4,#8b00ff);
  color: #000 !important;
  border-color: rgba(255,105,180,0.3) !important;
}

/* Click-and-drag scrolling cursor */
.profile-tabs .tab-bar { cursor: grab; }
.profile-tabs .tab-bar.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }

/* Compact adjustments for very small screens */
@media (max-width: 520px) {
  .profile-tabs .tab-bar { gap: 6px; padding: 6px; }
  .profile-tabs .tab-bar .tab-btn { padding: 6px 8px; font-size: 0.84rem; }
}

/* =======================================================
   Scoped: Make the Most Hated tab header/section labels red
   This targets only elements inside the .tab-hated panel
   so styles do not leak to other tabs.
   ======================================================= */

/* H3/H4 tab title in the Most Hated tab */
.tab-hated h3.tab-title,
.tab-hated h4.tab-title,
.tab-hated .tab-title {
  color: #ff495c !important;
  text-shadow: 0 0 8px rgba(255,73,92,0.45);
}

/* Small section labels such as "SONG" under the Most Hated tab */
.tab-hated .section-label,
.tab-hated .ratings-list-header .section-label {
  color: #ff495c !important;
  text-shadow: 0 0 6px rgba(255,73,92,0.25);
}

/* Column headers (Song / Score / Status) in the Most Hated tab's ratings list —
   match the glow strength of h4.tab-title (Albums / Artists) for visual consistency. */
.tab-hated .ratings-list-header .col-song,
.tab-hated .ratings-list-header .col-score,
.tab-hated .ratings-list-header .col-status {
  color: #ff495c !important;
  text-shadow: 0 0 8px rgba(255,73,92,0.45);
}

/* =======================================================
   Blurred cover-art background behind each row in the
   Most Loved / Most Hated tabs, matching the mobile app:
   a bright blurred image at ::before (z-index -2) and a
   single dark veil at ::after (z-index -1), keeping
   content readable while letting the cover colors show.
   ======================================================= */
.tab-loved .ratings-list-row,
.tab-hated .ratings-list-row,
.tab-loved .top-item,
.tab-hated .top-item,
.tab-takes .review-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tab-loved .ratings-list-row::before,
.tab-hated .ratings-list-row::before,
.tab-loved .top-item::before,
.tab-hated .top-item::before,
.tab-takes .review-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--row-bg);
  background-size: cover;
  background-position: center;
  filter: blur(25px);
  z-index: -2;
  pointer-events: none;
  /* Scale up so the blur's feathered edges don't expose the row bg */
  transform: scale(1.15);
}
.tab-loved .ratings-list-row::after,
.tab-hated .ratings-list-row::after,
.tab-loved .top-item::after,
.tab-hated .top-item::after,
.tab-takes .review-row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
  pointer-events: none;
}
/* Keep row content above the blur + veil so text stays readable */
.tab-loved .ratings-list-row .song-cell,
.tab-loved .ratings-list-row .score-cell,
.tab-hated .ratings-list-row .song-cell,
.tab-hated .ratings-list-row .score-cell,
.tab-loved .top-item .top-thumb,
.tab-loved .top-item .top-meta,
.tab-hated .top-item .top-thumb,
.tab-hated .top-item .top-meta {
  position: relative;
  z-index: 1;
}

/* Most Loved: add a visible pink glow on the section titles (Most Loved / Albums / Artists)
   so they match the red-glow treatment on Most Hated. */
.tab-loved h3.tab-title,
.tab-loved h4.tab-title,
.tab-loved .tab-title {
  text-shadow: 0 0 8px rgba(255,105,180,0.55), 0 0 16px rgba(255,0,255,0.35);
}

/* Column headers in the Most Loved tab — match the same pink glow. */
.tab-loved .ratings-list-header .col-song,
.tab-loved .ratings-list-header .col-score,
.tab-loved .ratings-list-header .col-status {
  text-shadow: 0 0 8px rgba(255,105,180,0.55), 0 0 16px rgba(255,0,255,0.35);
}

/* Align the "SONG" header flush with the section titles (Albums / Artists)
   that sit at the tab-panel edge, and render it in Title Case to match the
   h4 section titles (not uppercase). The default header has 16px left padding
   and text-transform:uppercase which both look inconsistent next to "Albums". */
.tab-hated .ratings-full .ratings-list-header,
.tab-loved .ratings-full .ratings-list-header {
  padding-left: 0;
  padding-right: 0;
  text-transform: none;
}

/* If a very specific selector elsewhere is still overriding, this is the strongest scoped rule you can use
   (only enable if you find the above not taking effect). Uncomment if needed.
*/
/*
.tab-hated .tab-title,
.tab-hated h3.tab-title,
.tab-hated h4.tab-title,
.tab-hated .section-label {
  color: #ff495c !important;
}
*/