/* profile-ratings.css
   Scoped layout & date styles for the profile page Ratings tab only.
   Use flexible columns (avoid huge fixed 4th column) so the date stays inside
   the profile container and lines up with the Filter without overflowing.
*/

/* Ensure the list fits its container */
#tab-ratings .ratings-list.ratings-full {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Use a flexible 4-column grid:
     cover | song (flex) | score (fixed-ish) | status/date (auto)
     The `minmax(0, 1fr)` for the song column prevents overflow when text is long.
  */
  #tab-ratings .ratings-list-header,
  #tab-ratings .ratings-list-row {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) 120px 140px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
  }
  
  /* Header styling */
  #tab-ratings .ratings-list-header {
    color: var(--color-accent, #ff69b4) !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255,105,180,0.04) !important;
  }
  
  /* Header column placement */
  #tab-ratings .ratings-list-header .col-song { grid-column: 1 / 3; justify-self: start; }
  #tab-ratings .ratings-list-header .col-score { grid-column: 3; justify-self: center; text-align: center; }
  
  /* Row base styles */
  #tab-ratings .ratings-list-row {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,105,180,0.04);
    color: var(--color-muted, #eee);
    text-decoration: none;
    background: transparent;
    box-sizing: border-box;
  }
  
  /* Song cell spans cover + title */
  #tab-ratings .ratings-list-row .song-cell {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0; /* allow truncation */
  }
  
  /* Thumbnail */
  #tab-ratings .ratings-list-row .song-cell img,
  #tab-ratings .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);
  }
  
  /* Song text: single-line truncate by default */
  #tab-ratings .ratings-list-row .song-cell .song-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    min-width: 0;
  }
  #tab-ratings .ratings-list-row .song-cell .song-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  
  /* Score cell (column 3) */
  #tab-ratings .ratings-list-row .score-cell {
    grid-column: 3;
    justify-self: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  
  /* Ensure pill stays in flow */
  #tab-ratings .ratings-list-row .score-pill {
    display: inline-block;
    position: relative;
    z-index: 2;
  }
  
  /* Status cell (right-most column) — date placed here.
     'auto' column plus justify-self:end keeps the date inside the container
     but aligned to the right edge where the Filter sits. */
  #tab-ratings .ratings-list-row .status-cell {
    grid-column: 4;
    justify-self: center;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  
  /* Date style */
  #tab-ratings .ratings-list-row .status-cell .rating-date {
    font-size: 0.95rem;
    color: #ff9ad9; /* neon pink */
    font-weight: 700;
    text-shadow: 0 4px 10px rgba(139,0,255,0.12);
    white-space: nowrap;
    line-height: 1;
    margin-left: 8px;
  }
  
  /* --- Song row hover tint to match album/artist --- */
  .ratings-list-row:hover, .ratings-list-row:focus {
    background: rgba(139,0,255,0.10) !important;
    box-shadow: none;
    outline: none;
    text-decoration: none;
    color: inherit;
    transform: none;
  }
  .ratings-list-row:active {
    background: rgba(255,105,180,0.13) !important;
    transform: none;
  }
  
  /* Responsive: collapse to 3 columns and stack the date under the score on small screens */
  @media (max-width: 640px) {
    #tab-ratings .ratings-list-header,
    #tab-ratings .ratings-list-row {
      grid-template-columns: 56px 1fr 96px;
    }
  
    #tab-ratings .ratings-list-row .status-cell {
      grid-column: 3 / -1;
      justify-self: center;
      text-align: center;
    }
  
    #tab-ratings .ratings-list-row .status-cell .rating-date {
      color: #bfb0c2;
      font-weight: normal;
      text-shadow: none;
      white-space: normal;
      margin-left: 0;
    }
  
    #tab-ratings .ratings-list-row .song-cell .song-text strong {
      white-space: normal; /* allow wrapping on small screens */
    }
  }