/*
 * Verso Data Hub 8.7.7
 * Radio Play History tablet override.
 * Separate asset deliberately avoids stale in-app-browser/CDN copies of frontend.css.
 */

/* Tablet, including 1024px iPads and in-app browser viewports. */
@media screen and (min-width: 600px) and (max-width: 1199px) {
  .radio-play-history-page {
    position: relative !important;
    left: auto !important;
    transform: none !important;

    /* Use the full tablet viewport without shifting the section off-screen. */
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .radio-play-history-page #radio-play-history,
  .radio-play-history-page .vdh-radio-public,
  .radio-play-history-page .radio-history-hero,
  .radio-play-history-page .radio-v2-contact,
  .radio-play-history-page .vdh-rp-public-stats,
  .radio-play-history-page .vdh-rp-public-search,
  .radio-play-history-page .vdh-rp-public-browse,
  .radio-play-history-page .vdh-rp-stat-story,
  .radio-play-history-page .vdh-rp-nerd-stats,
  .radio-play-history-page .vdh-rp-deep-dive,
  .radio-play-history-page .vdh-rp-year-strip,
  .radio-play-history-page .vdh-rp-extra-tops {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Search: two tidy rows, never a rigid four-item desktop row. */
  .radio-play-history-page .vdh-rp-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .radio-play-history-page .vdh-rp-filter-search {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .radio-play-history-page .vdh-rp-filter-grid label,
  .radio-play-history-page .vdh-rp-filter-grid input,
  .radio-play-history-page .vdh-rp-filter-grid select,
  .radio-play-history-page .vdh-rp-filter-grid button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .radio-play-history-page .vdh-rp-filter-grid button {
    grid-column: 1 / -1 !important;
  }

  /* Tablet card layouts. */
  .radio-play-history-page .vdh-rp-public-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .radio-play-history-page .vdh-rp-public-browse,
  .radio-play-history-page .vdh-rp-extra-tops,
  .radio-play-history-page .vdh-rp-stat-story,
  .radio-play-history-page .vdh-rp-deep-cards,
  .radio-play-history-page .vdh-rp-nerd-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Wide history table: swipe this region, never the whole page. */
  .radio-play-history-page .vdh-rp-public-tablewrap,
  .radio-play-history-page .vdh-rp-public-history {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
    box-sizing: border-box !important;
  }

  .radio-play-history-page .vdh-rp-public-tablewrap table,
  .radio-play-history-page .vdh-rp-public-history table {
    width: 1040px !important;
    min-width: 1040px !important;
    max-width: none !important;
    table-layout: auto !important;
  }
}

/* Preserve the already-working phone layout. */
@media screen and (max-width: 599px) {
  .radio-play-history-page {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}