/* =====================================================
   WILDVERSE MOBILE ROW MENU
   File: public_html/wildverse/Styles/wildverse-library/wildverse-mobile-row-menu.css

   ROLE:
   - Mobile Spotify-like rows
   - 3-dot details menu
   - Scrollable compact mobile details panel
   - Loaded AFTER wildverse-library.css, stats.css, actions.css
===================================================== */

.wv-mobile-row-menu-toggle,
.wv-mobile-row-details {
  display: none;
}

@media (max-width: 760px) {
  /* =====================================================
     MOBILE TABLE MODE
  ===================================================== */

  .wv-table-shell {
    overflow-x: hidden !important;
  }

  .wv-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .wv-table thead {
    display: none !important;
  }

  .wv-table tbody {
    display: block !important;
    width: 100% !important;
  }

  /* =====================================================
     MAIN MOBILE TRACK ROW
  ===================================================== */

  .wv-table .wv-track-row {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 74px !important;

    border-bottom: 1px solid rgba(120, 247, 255, 0.13);
    background:
      linear-gradient(90deg, rgba(120, 247, 255, 0.035), transparent 45%),
      rgba(255, 255, 255, 0.018);

    transition:
      background 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  .wv-table .wv-track-row.is-playing,
  .wv-table .wv-track-row.is-main-playing {
    background:
      linear-gradient(90deg, rgba(120, 247, 255, 0.13), rgba(255, 79, 216, 0.045)),
      rgba(255, 255, 255, 0.026);
    box-shadow:
      inset 3px 0 0 var(--wv-cyan),
      0 0 20px rgba(120, 247, 255, 0.08);
  }

  .wv-table .wv-track-row > td {
    display: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 14px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .wv-table .wv-track-row > td[data-label="Track"] {
    display: block !important;
    grid-column: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .wv-table .wv-track-title {
    display: block !important;
    max-width: 100% !important;

    color: #f5fbff;
    font-size: 15.5px !important;
    font-weight: 950;
    line-height: 1.15 !important;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wv-table .wv-muted {
    margin-top: 5px !important;
    color: rgba(210, 230, 240, 0.68);
    font-size: 12px !important;
    line-height: 1.2 !important;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* =====================================================
     3-DOT BUTTON
  ===================================================== */

  .wv-mobile-row-menu-toggle {
    display: inline-grid !important;
    place-items: center;

    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
      rgba(3, 10, 18, 0.88);

    color: rgba(240, 250, 255, 0.9);
    font-size: 16px;

    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);

    cursor: pointer;
    transition:
      transform 160ms ease,
      border-color 160ms ease,
      color 160ms ease,
      background 160ms ease,
      box-shadow 160ms ease;
  }

  .wv-mobile-row-menu-toggle:hover,
  .wv-mobile-row-menu-toggle:focus-visible {
    outline: none;
    transform: translateY(-50%) scale(1.04);
    border-color: rgba(120, 247, 255, 0.52);
    color: #9ffcff;
  }

  .wv-mobile-row-menu-toggle.is-open {
    border-color: rgba(120, 247, 255, 0.7);
    color: #9ffcff;
    background:
      radial-gradient(circle at 35% 25%, rgba(120, 247, 255, 0.22), transparent 58%),
      linear-gradient(135deg, rgba(120, 247, 255, 0.17), rgba(255, 79, 216, 0.09)),
      rgba(3, 10, 18, 0.94);

    box-shadow:
      0 0 20px rgba(120, 247, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }

  .wv-mobile-row-menu-toggle.is-open i {
    animation: wvMobileMenuDotsPop 280ms ease both;
  }

  @keyframes wvMobileMenuDotsPop {
    0% {
      transform: scale(0.86) rotate(-8deg);
      opacity: 0.5;
    }

    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }

  /* =====================================================
     DETAILS ROW CONTAINER
  ===================================================== */

  .wv-table .wv-mobile-row-details,
  .wv-table .wv-mobile-row-details > td,
  .wv-table .wv-mobile-row-details__panel,
  .wv-table .wv-mobile-row-card,
  .wv-table .wv-mobile-row-card__body,
  .wv-table .wv-mobile-row-card__body > td,
  .wv-table .wv-mobile-row-card__body > td > * {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
/*     overflow: hidden !important; */
  }

  .wv-table .wv-mobile-row-details {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: #02080e !important;
  }

  .wv-table .wv-mobile-row-details[hidden] {
    display: none !important;
  }

  .wv-table .wv-mobile-row-details > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 10px 12px 14px !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(120, 247, 255, 0.18) !important;

    background:
      linear-gradient(180deg, rgba(120, 247, 255, 0.045), rgba(255, 79, 216, 0.025)),
      #02080e !important;

    box-shadow: none !important;
  }

  /* =====================================================
     POP / SLIDE PANEL
  ===================================================== */

  .wv-table .wv-mobile-row-details__panel {
    position: relative !important;
    z-index: 5 !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;

    width: 100% !important;
    box-sizing: border-box !important;

    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;

    padding: 12px !important;
    margin: 0 !important;

    border: 1px solid rgba(120, 247, 255, 0.28) !important;
    border-radius: 20px !important;

    background:
      radial-gradient(circle at 12% 0%, rgba(120, 247, 255, 0.18), transparent 42%),
      radial-gradient(circle at 100% 0%, rgba(255, 79, 216, 0.14), transparent 36%),
      linear-gradient(180deg, #071620, #02080e) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.11),
      0 18px 38px rgba(0, 0, 0, 0.58),
      0 0 24px rgba(120, 247, 255, 0.08) !important;

    animation: wvMobileRowPanelPop 260ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
  }

  .wv-table .wv-mobile-row-details__panel::before {
    content: "";
    position: sticky;
    top: -12px;
    z-index: 2;

    display: block;
    height: 3px;
    width: 46px;
    margin: 0 auto 4px;

    border-radius: 999px;
    background: rgba(120, 247, 255, 0.42);
    box-shadow: 0 0 14px rgba(120, 247, 255, 0.28);
  }

  @keyframes wvMobileRowPanelPop {
    0% {
      opacity: 0;
      transform: translateY(-8px) scale(0.975);
      filter: blur(4px);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }


  /* =====================================================
     CARD STYLE
  ===================================================== */

  .wv-table .wv-mobile-row-card {
    display: grid !important;
    gap: 9px !important;

    width: 100% !important;
    box-sizing: border-box !important;

    padding: 12px !important;

    border: 1px solid rgba(120, 247, 255, 0.2) !important;
    border-radius: 16px !important;

    background:
      linear-gradient(135deg, rgba(120, 247, 255, 0.08), rgba(255, 79, 216, 0.045)),
      rgba(7, 18, 26, 0.98) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.075),
      0 10px 24px rgba(0, 0, 0, 0.22) !important;

    animation: wvMobileCardRise 260ms ease both;
  }

  .wv-table .wv-mobile-row-card:nth-child(1) {
    animation-delay: 20ms;
  }

  .wv-table .wv-mobile-row-card:nth-child(2) {
    animation-delay: 55ms;
  }

  .wv-table .wv-mobile-row-card:nth-child(3) {
    animation-delay: 90ms;
  }

  .wv-table .wv-mobile-row-card:nth-child(4) {
    animation-delay: 125ms;
  }

  @keyframes wvMobileCardRise {
    0% {
      opacity: 0;
      transform: translateY(7px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .wv-table .wv-mobile-row-card h5 {
    margin: 0 !important;

    color: #bff8ff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 0.14em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
  }

  .wv-table .wv-mobile-row-card__body {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
  }

  .wv-table .wv-mobile-row-card__body > td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* =====================================================
     CARD CONTENT FIXES
  ===================================================== */

  .wv-table .wv-mobile-row-card .wv-persona,
  .wv-table .wv-mobile-row-card .wv-type,
  .wv-table .wv-mobile-row-card .wv-pill {
    max-width: 100% !important;
    white-space: normal !important;
  }

  .wv-table .wv-mobile-row-card .wv-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .wv-table .wv-mobile-row-card .wv-type + .wv-muted,
  .wv-table .wv-mobile-row-card .wv-muted {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    color: rgba(220, 238, 246, 0.7) !important;
  }

  /* =====================================================
     ACTIONS CARD
  ===================================================== */

  .wv-table .wv-mobile-row-card .wv-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .wv-table .wv-mobile-row-card .wv-actions > button,
  .wv-table .wv-mobile-row-card .wv-actions > a {
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: none !important;
    border-radius: 14px !important;
  }

  /* =====================================================
     STATS CARD
  ===================================================== */

  .wv-table .wv-mobile-row-card .wv-stats-panel {
    width: 100% !important;
    max-width: none !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .wv-table .wv-mobile-row-card .wv-stat-date strong {
    font-size: 11px !important;
  }

  /* =====================================================
     REDUCED MOTION
  ===================================================== */

  @media (prefers-reduced-motion: reduce) {
    .wv-mobile-row-menu-toggle,
    .wv-table .wv-mobile-row-details__panel,
    .wv-table .wv-mobile-row-card {
      animation: none !important;
      transition: none !important;
    }
  }
}
/* =====================================================
   WILDVERSE MOBILE ROW MENU — FULL WIDTH OVERRIDE
   Fixes table-cell width inheritance from <td colspan="6">
   Must stay at the very bottom of this file.
===================================================== */

@media (max-width: 760px) {
  .wv-table .wv-mobile-row-details {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .wv-table .wv-mobile-row-details > td {
    display: block !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
    padding: 10px 12px 14px !important;
  }

  .wv-table .wv-mobile-row-details__panel {
    display: grid !important;
    grid-template-columns: 1fr !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  .wv-table .wv-mobile-row-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .wv-table .wv-mobile-row-card__body,
  .wv-table .wv-mobile-row-card__body > td {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .wv-table .wv-mobile-row-card td[data-label="Actions"] .wv-actions,
  .wv-table .wv-mobile-row-card .wv-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .wv-table .wv-mobile-row-card td[data-label="Stats"] .wv-stats-panel,
  .wv-table .wv-mobile-row-card .wv-stats-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/* =====================================================
   WILDVERSE MOBILE ROW MENU — ROW TAP + MINI BARS
   Must stay at bottom of wildverse-mobile-row-menu.css
===================================================== */

@media (max-width: 760px) {
  /* Make mobile rows feel tappable */
  .wv-table .wv-track-row {
    cursor: pointer;
    grid-template-columns: minmax(0, 1fr) 52px !important;
  }

  .wv-table .wv-track-row:active {
    transform: scale(0.992);
    background:
      linear-gradient(90deg, rgba(255, 79, 216, 0.12), rgba(120, 247, 255, 0.06)),
      rgba(255, 255, 255, 0.03);
  }

  /* Re-enable only the preview cell as a tiny visualizer holder */
  .wv-table .wv-track-row > td[data-label="Preview"] {
    display: flex !important;
    position: absolute !important;
    top: 75% !important;
    right: 66px !important;
    transform: translateY(-50%) !important;

    width: 42px !important;
    height: 34px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  /* Hide the actual play button on mobile rows */
  .wv-table .wv-track-row > td[data-label="Preview"] .wv-play {
    display: none !important;
  }

  .wv-table .wv-track-row > td[data-label="Preview"] audio {
    display: none !important;
  }

  /* Show only the tiny bars */
  .wv-table .wv-track-row > td[data-label="Preview"] .wv-wave {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;

    width: 34px !important;
    height: 24px !important;
    padding: 4px 6px !important;

    border-radius: 10px !important;
    background:
      radial-gradient(circle at 0% 50%, rgba(120, 247, 255, 0.12), transparent 62%),
      rgba(3, 10, 18, 0.42) !important;

    opacity: 0.5;
  }

  .wv-table .wv-track-row > td[data-label="Preview"] .wv-wave span {
    width: 3px !important;
    height: 7px !important;
    border-radius: 999px !important;

    background: rgba(120, 247, 255, 0.52) !important;
    opacity: 0.55 !important;

    animation: none !important;
    transform-origin: bottom center !important;
  }

  /* Active mobile row: neon purple/cyan state */
  .wv-table .wv-track-row.is-playing,
  .wv-table .wv-track-row.is-main-playing {
    background:
      radial-gradient(circle at 72% 50%, rgba(255, 79, 216, 0.18), transparent 28%),
      linear-gradient(90deg, rgba(120, 247, 255, 0.12), rgba(155, 108, 255, 0.16)),
      rgba(255, 255, 255, 0.03) !important;

    box-shadow:
      inset 3px 0 0 #ff4fd8,
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 0 22px rgba(255, 79, 216, 0.12) !important;
  }

  .wv-table .wv-track-row.is-playing .wv-track-title,
  .wv-table .wv-track-row.is-main-playing .wv-track-title {
    color: #ffeaff !important;
    text-shadow:
      0 0 10px rgba(255, 79, 216, 0.3),
      0 0 16px rgba(120, 247, 255, 0.12);
  }

  .wv-table .wv-track-row.is-playing .wv-muted,
  .wv-table .wv-track-row.is-main-playing .wv-muted {
    color: rgba(236, 220, 255, 0.78) !important;
  }

  .wv-table .wv-track-row.is-playing > td[data-label="Preview"] .wv-wave,
  .wv-table .wv-track-row.is-main-playing > td[data-label="Preview"] .wv-wave {
    opacity: 1;
    background:
      radial-gradient(circle at 0% 50%, rgba(120, 247, 255, 0.28), transparent 64%),
      linear-gradient(90deg, rgba(120, 247, 255, 0.12), rgba(255, 79, 216, 0.16)),
      rgba(3, 10, 18, 0.78) !important;

    box-shadow:
      0 0 14px rgba(255, 79, 216, 0.2),
      0 0 18px rgba(120, 247, 255, 0.12);
  }

  .wv-table .wv-track-row.is-playing > td[data-label="Preview"] .wv-wave span,
  .wv-table .wv-track-row.is-main-playing > td[data-label="Preview"] .wv-wave span,
  .wv-table .wv-track-row .wv-play.is-playing ~ .wv-wave span {
    background:
      linear-gradient(
        to top,
        rgba(120, 247, 255, 1),
        rgba(255, 79, 216, 0.95)
      ) !important;

    opacity: 1 !important;
    animation: wv-mobile-row-wave-bars 760ms ease-in-out infinite !important;
  }

  .wv-table .wv-track-row.is-playing > td[data-label="Preview"] .wv-wave span:nth-child(2),
  .wv-table .wv-track-row.is-main-playing > td[data-label="Preview"] .wv-wave span:nth-child(2),
  .wv-table .wv-track-row .wv-play.is-playing ~ .wv-wave span:nth-child(2) {
    animation-delay: 95ms !important;
  }

  .wv-table .wv-track-row.is-playing > td[data-label="Preview"] .wv-wave span:nth-child(3),
  .wv-table .wv-track-row.is-main-playing > td[data-label="Preview"] .wv-wave span:nth-child(3),
  .wv-table .wv-track-row .wv-play.is-playing ~ .wv-wave span:nth-child(3) {
    animation-delay: 190ms !important;
  }

  .wv-table .wv-track-row.is-playing > td[data-label="Preview"] .wv-wave span:nth-child(4),
  .wv-table .wv-track-row.is-main-playing > td[data-label="Preview"] .wv-wave span:nth-child(4),
  .wv-table .wv-track-row .wv-play.is-playing ~ .wv-wave span:nth-child(4) {
    animation-delay: 285ms !important;
  }

  @keyframes wv-mobile-row-wave-bars {
    0%, 100% {
      height: 5px;
      opacity: 0.65;
      transform: scaleY(0.78);
    }

    45% {
      height: 18px;
      opacity: 1;
      transform: scaleY(1);
    }

    70% {
      height: 10px;
      opacity: 0.86;
      transform: scaleY(0.9);
    }
  }

  @media (max-width: 390px) {
    .wv-table .wv-track-row > td[data-label="Preview"] {
      right: 60px !important;
      width: 36px !important;
    }

    .wv-table .wv-track-row > td[data-label="Preview"] .wv-wave {
      width: 30px !important;
      padding-inline: 4px !important;
    }
  }
}
/* =====================================================
   WILDVERSE MOBILE ROW MENU — RESPECT PAGINATION HIDING
   JS pagination uses row.style.display = "none".
   This must override mobile display:grid !important.
===================================================== */

@media (max-width: 760px) {
  .wv-table .wv-track-row[style*="display: none"] {
    display: none !important;
  }

  .wv-table .wv-track-row[style*="display:none"] {
    display: none !important;
  }
}