/* Ratings overrides: ensure the filter is visible and aligned right */
/* All layout rules scoped to .ratings-full to avoid global !important cascade battles. */

/* Allow header controls to show (global had overflow:hidden) */
.ratings-full.ratings-list,
.ratings-full .ratings-list {
  overflow: visible;
}

/* Define the master grid for both header and rows */
/* This ensures consistent column sizing across the entire list */
.ratings-full .ratings-list-header,
.ratings-full .ratings-list-row {
  display: grid;
  /* Define columns: Cover | Song Title/Artist | Score | Status | Filter Button (for header) */
  /* Giving ample fixed width to Score and Status, and flexible/fixed for Filter */
  grid-template-columns: 72px 1fr 100px 100px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

/* Header specific styling */
.ratings-full .ratings-list-header {
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,105,180,0.04);
  position: relative;
}

/* Explicit header column placement and alignment */
.ratings-full .ratings-list-header .col-song {
  grid-column: 1 / 3; /* Spans cover and song columns */
  justify-self: start;
  text-align: left;
  font-weight: 700;
  color: var(--color-accent, #ff69b4);
}

.ratings-full .ratings-list-header .col-score {
  grid-column: 3; /* Aligns with score column */
  justify-self: center;
  text-align: center;
  font-weight: 700;
  color: var(--color-accent, #ff69b4);
}

.ratings-full .ratings-list-header .col-status {
  grid-column: 4; /* Aligns with status column */
  justify-self: center;
  text-align: center;
  font-weight: 700;
  color: var(--color-accent, #ff69b4);
}


/* Row specific styling */
.ratings-full .ratings-list-row {
  border-bottom: 1px solid rgba(255,105,180,0.04);
  padding: 14px 16px;
  color: var(--color-muted, #eee);
}

/* Song cell spans cover + song columns (1 & 2) */
.ratings-full .ratings-list-row .song-cell {
  grid-column: 1 / 3; /* Spans cover and song columns */
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Thumbnail sizing and spacing */
.ratings-full .ratings-list-row .song-cell img,
.ratings-full .ratings-list-row .song-cell .no-cover {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 56px;
  background: rgba(255,255,255,0.02);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Song text aligns under SONG header (left-aligned) */
.ratings-full .ratings-list-row .song-cell .song-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align to start for left-alignment */
  text-align: left; /* Ensure left-alignment */
  width: 100%;
  white-space: normal;
  word-wrap: break-word;
  hyphens: auto;
  justify-self: start; /* Explicitly align to start of its grid area */
}

/* Score & status explicit placement and centering */
.ratings-full .ratings-list-row .score-cell {
  grid-column: 3; /* Aligns with score header */
  justify-self: center; /* Center the entire cell */
  text-align: center; /* Center text within the cell */
  display: flex; /* Use flex to ensure content is truly centered */
  align-items: center;
  justify-content: center;
}

.ratings-full .ratings-list-row .status-cell {
  grid-column: 4; /* Aligns with status header */
  justify-self: center; /* Center the entire cell */
  text-align: center; /* Center text within the cell */
  display: flex; /* Use flex to ensure content is truly centered */
  align-items: center;
  justify-content: center;
}

/* Keep score-pill in normal flow (prevent transforms/absolute from other CSS) */
.ratings-full .ratings-list-row .score-pill {
  position: relative;
  transform: none;
  margin: 0;
  display: inline-block;
  z-index: 2;
}

/* Responsive: collapse filters under header */
@media (max-width: 640px) {
  .ratings-full .ratings-list-header {
    /* When collapsing, revert to 2 columns for header to stack filters below */
    grid-template-columns: 1fr 80px;
    align-items: start;
  }
  .ratings-full .ratings-list-header .ratings-filters {
    grid-column: 1 / -1; /* Make filters span all columns */
    justify-self: center;
    margin-top: 8px;
    flex-wrap: wrap;
  }
}

/* Dropdown / Filter menu positioning fixes */
.ratings-list-header .ratings-filters {
  position: relative; /* Establish a positioning context for dropdown menus */
}

/* Generic dropdown trigger */
.ratings-filters .filter-dropdown {
  cursor: pointer;
  position: relative;
  user-select: none;
}

/* The floating menu that appears when the Filter button is clicked */
.ratings-filters .filter-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  background: rgba(0,0,0,0.92);
  border: 1px solid rgba(255,105,180,0.12);
  padding: 8px;
  border-radius: 8px;
  z-index: 10000;
  min-width: 140px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.6), 0 0 10px rgba(255,105,180,0.05);
}

/* Ensure menu items stack vertically and match the pill style */
.ratings-filters .filter-menu .filter {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  text-align: left;
  background: transparent;
  border: none;
}

/* Hover/active for items in the menu */
.ratings-filters .filter-menu .filter:hover,
.ratings-filters .filter-menu .filter.active {
  background: linear-gradient(90deg, rgba(255,105,180,0.06), rgba(255,0,255,0.04));
  box-shadow: none;
}

/* Small-screen behavior: make menus static so they wrap with the layout */
@media (max-width: 640px) {
  .ratings-filters .filter-menu {
    position: static;
    right: auto;
    top: auto;
    display: none;
    min-width: auto;
    width: 100%;
    margin-top: 8px;
    padding: 6px;
  }
}

/* Accessibility: simple focus outline for keyboard users */
.ratings-filters .filter:focus {
  outline: 2px solid rgba(255,105,180,0.22);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   Report icon + tooltip styles (for discussion & comment report)
   Keeps button semantics and JS-compatible classes/IDs.
   ------------------------------------------------------------- */

/* Report icon button + small tooltip for discussion & comment report buttons */
.report-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 217, 247, 0.06);
  border-radius: 8px;
  border: 1px solid rgba(255,105,180,0.06);
  color: #ffd9f7;
  padding: 6px;
  min-width: 36px;
  height: 32px;
  cursor: pointer;
}

/* Icon color/size */
.report-icon-btn i {
  font-size: 14px;
  color: #ffb0c9;
}

/* Small tooltip that appears on hover / focus */
.report-icon-btn .report-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #ffd9f7;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  z-index: 60;
}

/* little arrow */
.report-icon-btn .report-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(0,0,0,0.85);
  z-index: 59;
  border-radius: 2px;
}

/* show on hover or keyboard focus */
.report-icon-btn:hover .report-tooltip,
.report-icon-btn:focus .report-tooltip,
.report-icon-btn:focus-within .report-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* screen-reader only helper (if you don't already have one) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}