/*!
 * admin-analytics-mobile.css  v1
 * Mobile fix: no horizontal scroll on Analytics tables.
 * - <=640px: User Video Activity + Video Analytics tables become stacked cards.
 * - All columns that desktop shows are shown here (nothing hidden on phone).
 * - Must be loaded AFTER admin-analytics-page.min.css (so it wins specificity).
 */
@media (max-width:640px){

/* ======================================================= */
/* 0.  COMMON: kill the horizontal scroll on both tables    */
/* ======================================================= */
#userActivitySection .table-wrap,
#videoAnalyticsSection .table-wrap,
#uaDetailPanel .table-wrap{overflow-x:visible!important;overflow-y:visible!important}

/* un-hide columns that desktop used class-based hiding for */
.ua-hide-phone{display:block!important}
.vid-watch-col,.vid-avg-col,.vid-rate-col{display:flex!important}

/* force filter bar to wrap neatly */
.va-filter-bar{flex-direction:column;align-items:stretch}
.va-filter-bar .va-search-wrap{width:100%}
.va-filter-bar .va-dd,
.va-filter-bar .ua-tier-btns{width:100%}
.va-filter-bar .va-count{text-align:center;margin-top:4px}

/* top bar range + refresh cluster: one tidy row */
.page-header .range-bar{flex:1 1 auto}
.page-header .refresh-btn{flex:0 0 auto}


/* ======================================================= */
/* 1.  USER VIDEO ACTIVITY TABLE  ->  CARD LIST             */
/* ======================================================= */
.ua-table,
.ua-table tbody,
.ua-table tr,
.ua-table td{display:block!important;width:100%!important}
.ua-table{min-width:0!important;table-layout:auto!important;border-collapse:separate!important}
.ua-table thead{display:none!important}

/* each row becomes a self-contained card */
#uaTbody tr.ua-clickrow{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "user   user"
    "tier   ago"
    "videos pgns"
    "time   done"
    "rate   rate"
    "pages  pages";
  gap:10px 12px;
  padding:14px 16px!important;
  margin-bottom:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid #ff8c00;
  border-radius:12px;
  position:relative;
}
#uaTbody tr.ua-clickrow:hover td{background:transparent!important}
#uaTbody tr > td{padding:0!important;border:none!important;white-space:normal!important}

#uaTbody td.ua-col-user  {grid-area:user;padding-bottom:8px!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
#uaTbody td.ua-col-tier  {grid-area:tier;text-align:left!important}
#uaTbody td.ua-col-num:nth-of-type(3){grid-area:videos}
#uaTbody td.ua-col-pgn   {grid-area:pgns;text-align:left!important;padding-left:0!important;padding-right:0!important}
#uaTbody td.ua-col-time  {grid-area:time;text-align:left!important}
#uaTbody td.ua-col-num:nth-of-type(6){grid-area:done}
#uaTbody td.ua-col-rate  {grid-area:rate;text-align:left!important}
#uaTbody td.ua-col-pages {grid-area:pages;text-align:left!important}
#uaTbody td.ua-col-ago   {grid-area:ago;text-align:right!important;color:#888!important;font-size:11px!important}

/* key/label chip before each stat */
#uaTbody td.ua-col-num:nth-of-type(3)::before{content:"Videos";}
#uaTbody td.ua-col-pgn::before              {content:"PGNs";}
#uaTbody td.ua-col-time::before             {content:"Watch time";}
#uaTbody td.ua-col-num:nth-of-type(6)::before{content:"Completed";}
#uaTbody td.ua-col-rate::before             {content:"Success rate";}
#uaTbody td.ua-col-pages::before            {content:"Pages";}
#uaTbody td.ua-col-user::before,
#uaTbody td.ua-col-tier::before,
#uaTbody td.ua-col-ago::before{content:none}
#uaTbody td.ua-col-num::before,
#uaTbody td.ua-col-pgn::before,
#uaTbody td.ua-col-time::before,
#uaTbody td.ua-col-rate::before,
#uaTbody td.ua-col-pages::before{
  display:block;font-size:9px;color:#666;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:3px;font-weight:600;
}

/* user header tidied up */
#uaTbody .ua-user-cell{gap:10px}
#uaTbody .ua-username{font-size:14px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word}
#uaTbody .ua-joined{font-size:10px!important;white-space:normal!important}
#uaTbody .ua-expand{margin-left:auto;color:#ff8c00;font-size:11px}

/* rate bar: take full width of its grid cell */
#uaTbody .va-rate-bar{width:100%;justify-content:flex-start}
#uaTbody .va-rate-track{flex:1}
#uaTbody .va-rate-pct{min-width:38px;text-align:right}

/* pagination wrap on small screens */
.va-pagination{flex-wrap:wrap;gap:8px;justify-content:center;padding:10px 8px}


/* ======================================================= */
/* 2.  VIDEO ANALYTICS TABLE  ->  CARD LIST                 */
/* ======================================================= */
.va-video-table,
.va-video-table tbody,
.va-video-table tr,
.va-video-table td{display:block!important;width:100%!important}
.va-video-table{min-width:0!important;table-layout:auto!important;border-collapse:separate!important}
.va-video-table thead{display:none!important}

/* only non-expansion rows become cards */
#videoStatsTbody > tr:not(.va-viewers-row):not(.va-pgn-row){
  display:grid!important;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "video    video"
    "location location"
    "views    unique"
    "pgns     done"
    "watch    avg"
    "rate     rate"
    "viewers  viewers";
  gap:10px 12px;
  padding:14px 16px!important;
  margin-bottom:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-left:3px solid #f472b6;
  border-radius:12px;
}
#videoStatsTbody > tr > td{padding:0!important;border:none!important;white-space:normal!important;text-align:left!important}

/* grid areas by column position (indexed against desktop td order) */
#videoStatsTbody > tr > td:nth-of-type(1) {grid-area:video;padding-bottom:8px!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
#videoStatsTbody > tr > td:nth-of-type(2) {grid-area:location}
#videoStatsTbody > tr > td:nth-of-type(3) {grid-area:views}
#videoStatsTbody > tr > td:nth-of-type(4) {grid-area:pgns;text-align:left!important}
#videoStatsTbody > tr > td:nth-of-type(5) {grid-area:unique}
#videoStatsTbody > tr > td:nth-of-type(6) {grid-area:watch}   /* vid-watch-col */
#videoStatsTbody > tr > td:nth-of-type(7) {grid-area:avg}     /* vid-avg-col   */
#videoStatsTbody > tr > td:nth-of-type(8) {grid-area:done}
#videoStatsTbody > tr > td:nth-of-type(9) {grid-area:rate}    /* vid-rate-col  */
#videoStatsTbody > tr > td:nth-of-type(10){grid-area:viewers;text-align:left!important}

/* labels */
#videoStatsTbody > tr > td:nth-of-type(2)::before{content:"Location";}
#videoStatsTbody > tr > td:nth-of-type(3)::before{content:"Views";}
#videoStatsTbody > tr > td:nth-of-type(4)::before{content:"PGNs";}
#videoStatsTbody > tr > td:nth-of-type(5)::before{content:"Unique";}
#videoStatsTbody > tr > td:nth-of-type(6)::before{content:"Watch";}
#videoStatsTbody > tr > td:nth-of-type(7)::before{content:"Avg";}
#videoStatsTbody > tr > td:nth-of-type(8)::before{content:"Done";}
#videoStatsTbody > tr > td:nth-of-type(9)::before{content:"Completion";}
#videoStatsTbody > tr > td:nth-of-type(10)::before{content:"Viewers";}
#videoStatsTbody > tr > td:nth-of-type(n+2)::before{
  display:block;font-size:9px;color:#666;text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:3px;font-weight:600;
}

/* rate bar spans full width */
#videoStatsTbody .va-rate-bar{width:100%;min-width:0}

/* expansion rows (viewers list, pgn list) — single column */
#videoStatsTbody > tr.va-viewers-row > td,
#videoStatsTbody > tr.va-pgn-row > td{
  display:block!important;width:100%!important;
  padding:0 0 12px 0!important;border:none!important;
}


/* ======================================================= */
/* 3.  USER DETAIL PANEL INNER TABLES                       */
/* ======================================================= */
#uaDetailHistoryTable,
#uaDetailPgnTable{min-width:0!important;table-layout:auto!important}
#uaDetailHistoryTable,
#uaDetailHistoryTable tbody,
#uaDetailHistoryTable tr,
#uaDetailHistoryTable td,
#uaDetailPgnTable,
#uaDetailPgnTable tbody,
#uaDetailPgnTable tr,
#uaDetailPgnTable td{display:block!important;width:100%!important}
#uaDetailHistoryTable thead,
#uaDetailPgnTable thead{display:none!important}
#uaDetailHistoryTable tbody tr,
#uaDetailPgnTable tbody tr{
  padding:10px 12px!important;margin-bottom:8px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
}
#uaDetailHistoryTable td,
#uaDetailPgnTable td{
  padding:2px 0!important;border:none!important;
  white-space:normal!important;text-align:left!important;
  font-size:12px!important;
}


/* ======================================================= */
/* 4.  TOP PAGES / RECENT SUBSCRIBERS — keep as table, just  */
/*     make sure path+email text wraps instead of scrolling  */
/* ======================================================= */
#topPagesTable,
#subsTable{min-width:0!important;table-layout:auto!important}
#topPagesTable td,
#subsTable td{word-break:break-word;white-space:normal!important}
#topPagesTable .bar-wrap{flex-wrap:wrap}
#topPagesTable .bar-wrap span{min-width:0!important;flex:1 1 100%;text-align:left!important}

} /* end @media */


/* ======================================================= */
/* 5.  Extra squeeze for very narrow phones                 */
/* ======================================================= */
@media (max-width:380px){
  #uaTbody tr.ua-clickrow,
  #videoStatsTbody > tr:not(.va-viewers-row):not(.va-pgn-row){
    padding:12px!important;
  }
  #uaTbody .ua-username,
  #videoStatsTbody > tr > td:nth-of-type(1) span{font-size:13px!important}
  .ua-tier-btn{font-size:9px!important;padding:6px 2px!important}
}