/*
 * Stats page module
 *
 * Extracted from pages/50-pages-core.css during modular cleanup.
 * Keep after 50-pages-core.css and before 56-profile-shell.css to preserve cascade order.
 */

/* =========================================================
   Public UI P2.32 — stats page compact viewport fit
========================================================= */
body.page-stats .grid{
  grid-template-columns:minmax(0,1fr) clamp(286px,20vw,320px);
  align-items:stretch;
}
body.page-stats .grid > section.stack,
body.page-stats .grid > aside.stack{
  min-height:0;
}
body.page-stats .sitePanel--stats{
  display:flex;
  flex-direction:column;
  min-height:0;
  height:var(--stats-fit-h, auto);
  max-height:var(--stats-fit-h, none);
}
body.page-stats .sitePanel--stats > .panel-body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  padding-top:8px;
}
body.page-stats .statsViewport{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
body.page-stats .sitePanel__head--compact{
  align-items:center;
  gap:10px;
  padding:10px 14px 8px;
}
body.page-stats .statsIntro .h1{
  margin:0;
  font-size:clamp(18px,1.35vw,24px);
}
body.page-stats .statsIntro .hint{
  display:none;
}
body.page-stats .sitePanel--stats .panel__actions{
  margin-left:auto;
}
body.page-stats .modeSwitch{
  gap:6px;
}
body.page-stats .modeSwitch__btn{
  min-height:34px;
  padding:7px 12px;
  border-radius:12px;
  font-size:12px;
}
body.page-stats .statsRoleGrid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:0;
}
body.page-stats .roleCard{
  min-height:56px;
  padding:9px 11px;
  border-radius:14px;
  gap:8px;
}
body.page-stats .roleCard__icon{
  width:28px;
  height:28px;
  flex-basis:28px;
}
body.page-stats .roleCard__label{
  font-size:12px;
}
body.page-stats .roleCard__desc{
  display:none;
}
body.page-stats .statsTopRole{
  margin-top:0;
  padding:10px 10px 8px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:0;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:rgba(0,0,0,.16);
}
body.page-stats .topRole__head{
  margin-bottom:8px;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
body.page-stats .topRole__kicker{
  display:none;
}
body.page-stats .topRole__name{
  font-size:clamp(17px,1.2vw,20px);
  line-height:1.05;
}
body.page-stats .topRole__meta{
  margin-top:3px;
  font-size:11px;
  line-height:1.25;
  color:rgba(255,255,255,.68);
}
body.page-stats .topRole__actions{
  margin-left:auto;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
body.page-stats .topSearch{
  min-width:min(260px,100%);
  max-width:min(300px,100%);
}
body.page-stats .topSearch__input{
  min-height:36px;
  font-size:12px;
}
body.page-stats .topRole__podium{
  gap:8px;
  margin-top:0;
}
body.page-stats .podiumCard{
  min-height:68px;
  padding:8px 9px 8px 54px;
  border-radius:14px;
}
body.page-stats .podiumCard__rank{
  left:12px;
  font-size:24px;
}
body.page-stats .podiumCard__ava{
  width:38px;
  height:38px;
  flex-basis:38px;
  border-radius:11px;
}
body.page-stats .podiumCard__name{
  font-size:12px;
}
body.page-stats .podiumCard__id,
body.page-stats .podiumCard__lbl{
  display:none;
}
body.page-stats .podiumCard__sub{
  margin-top:4px;
}
body.page-stats .podiumCard__num{
  font-size:16px;
}
body.page-stats .topRole__list{
  margin-top:8px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-right:2px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
body.page-stats .rankTiles{
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:8px;
}
body.page-stats .rankTile{
  min-height:58px;
  padding:8px 9px;
  border-radius:13px;
  gap:8px;
}
body.page-stats .rankTile__pos{
  padding:3px 7px;
  font-size:11px;
}
body.page-stats .rankTile__ava{
  width:30px;
  height:30px;
  flex-basis:30px;
  border-radius:10px;
}
body.page-stats .rankTile__name{
  font-size:12px;
}
body.page-stats .rankTile__id,
body.page-stats .rankTile__bar{
  display:none;
}
body.page-stats .rankTile__sub{
  margin-top:4px;
}
body.page-stats .rankTile__val{
  width:64px;
}
body.page-stats .rankTile__num{
  font-size:15px;
}
body.page-stats .likeMini,
body.page-stats .likeMini--tiny{
  padding:2px 6px;
  font-size:10px;
  gap:5px;
}
body.page-stats .topRole__more{
  margin-top:8px;
  padding-top:0;
}

body.page-stats aside.stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  height:var(--stats-aside-fit-h, auto);
  max-height:var(--stats-aside-fit-h, none);
  overflow:auto;
  padding-right:2px;
}
body.page-stats aside.stack > .sitePanel{
  min-height:0;
}
body.page-stats aside.stack > .sitePanel:first-child{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
body.page-stats aside.stack > .sitePanel:first-child > .panel-body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:10px;
}
body.page-stats aside.stack > .sitePanel .panel__head,
body.page-stats aside.stack > .sitePanel .panel-head{
  gap:8px;
  padding:9px 11px;
}
body.page-stats aside.stack .panel-title{
  font-size:14px;
}
body.page-stats aside.stack .btn,
body.page-stats aside.stack .btn-primary,
body.page-stats aside.stack .btn-ghost{
  min-height:34px;
  padding:7px 10px;
  font-size:12px;
}
body.page-stats #monitor-refresh,
body.page-stats #eco-refresh{
  padding:6px 9px;
}
body.page-stats .monitorActions{
  gap:8px;
  margin-top:10px;
}
body.page-stats .monitorActions .btn-primary,
body.page-stats .monitorActions .btn-ghost{
  flex:1 1 140px;
}
body.page-stats .telemetryHead{
  margin-top:0;
}
body.page-stats .telemetryList{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  max-height:none;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  margin-top:8px;
  gap:6px;
  padding-right:2px;
}
body.page-stats .telemetryRow{
  padding:7px 8px;
  border-radius:12px;
  gap:8px;
}
body.page-stats .telemetryAvatar{
  width:26px;
  height:26px;
  border-radius:9px;
}
body.page-stats .telemetryName{
  font-size:13px;
}
body.page-stats .telemetryMeta{
  font-size:11px;
}
body.page-stats .sitePanel--sidebarLinks .homeActionsList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-content:start;
  padding:10px;
}
body.page-stats .sitePanel--sidebarLinks .btn-ghost{
  width:100%;
  min-width:0;
  min-height:36px;
  padding:8px 10px;
  justify-content:center;
  text-align:center;
  line-height:1.2;
  overflow-wrap:anywhere;
  white-space:normal;
}

@media (max-width: 1500px){
  body.page-stats .statsRoleGrid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  body.page-stats .rankTiles{
    grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  }
}
@media (max-width: 1200px){
  body.page-stats .grid{
    grid-template-columns:1fr;
  }
  body.page-stats .sitePanel--stats,
  body.page-stats aside.stack{
    height:auto;
    max-height:none;
  }
  body.page-stats .sitePanel--stats > .panel-body,
  body.page-stats .statsViewport,
  body.page-stats .statsTopRole,
  body.page-stats .topRole__list,
  body.page-stats aside.stack,
  body.page-stats .telemetryList{
    overflow:visible;
  }
  body.page-stats .statsRoleGrid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body.page-stats .topRole__podium{
    grid-template-columns:1fr;
  }
}
@media (max-width: 820px){
  body.page-stats .sitePanel__head--compact{
    align-items:flex-start;
  }
  body.page-stats .sitePanel--stats .panel__actions{
    width:100%;
    margin-left:0;
  }
  body.page-stats .statsRoleGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.page-stats .topRole__actions{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }
  body.page-stats .topSearch{
    min-width:100%;
    max-width:100%;
  }
}
@media (max-width: 560px){
  body.page-stats .statsRoleGrid{
    grid-template-columns:1fr;
  }
  body.page-stats .roleCard{
    min-height:54px;
  }
  body.page-stats .statsTopRole{
    padding:10px;
    border-radius:14px;
  }
  body.page-stats .rankTiles,
  body.page-stats .sitePanel--sidebarLinks .homeActionsList{
    grid-template-columns:1fr;
  }
}