/*
 * Profile overview module
 *
 * Extracted from pages/56-profile-shell.css during modular cleanup.
 * Keep after 56-profile-shell.css and before 58-profile-tabs.css to preserve cascade order.
 */

/* =========================================================
   Public UI P2.38 — profile overview hardening
   Fixes broken/stretching info tab layout and makes the
   overview shell deterministic on desktop/tablet/mobile.
========================================================= */
#profileOverview.profilePane{
  display:block;
}
.profileOverviewShell{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.profileOverviewHero{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap:14px;
  align-items:start;
}
.profileOverviewIdentity{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.profileOverviewIdentity__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.profileOverviewIdentity__name{
  margin:0;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.profileOverviewIdentity__sid{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.profileOverviewIdentity__meta,
.profileOverviewIdentity__chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.profileOverviewIdentity__meta > *,
.profileOverviewIdentity__chips > *{
  max-width:100%;
}
.profileOverviewHero__aside{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
.profileOverviewMode .modeSwitch{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width:100%;
  margin-top:0;
}
.profileOverviewMode .modeSwitch__btn{
  min-width:0;
  white-space:nowrap;
}
.profileOverviewActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.profileOverviewActions .btn{
  flex:1 1 140px;
  min-width:0;
  white-space:nowrap;
}
.profileOverviewStats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.profileOverviewStats .profileHeroStat{
  min-width:0;
}
.profileOverviewStats .profileHeroStat__value,
.statTiles--profile .statTile__value,
.profileInfoTile__value,
.profileMyShopName,
.profileMyShopMeta{
  word-break:break-word;
  overflow-wrap:anywhere;
}
.statTiles--profile{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
}
.profileInfoGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.profileInfoTile{
  min-width:0;
}
.profileInfoTile--wide{
  grid-column: span 2;
}
.profileSection--embedded{
  margin-top:0;
}
.profileSection--embedded .profileSection__head{
  margin-bottom:10px;
}
.profileMyShopsList{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
@media (max-width: 1180px){
  .profileOverviewHero{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px){
  .profileOverviewStats,
  .statTiles--profile,
  .profileInfoGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .profileOverviewHero{
    grid-template-columns: 1fr;
  }
  .profileOverviewIdentity{
    flex-direction:column;
  }
  .profileOverviewActions .btn{
    flex:1 1 100%;
  }
  .profileOverviewStats,
  .statTiles--profile,
  .profileInfoGrid,
  .profileMyShopsList{
    grid-template-columns: 1fr;
  }
  .profileInfoTile--wide{
    grid-column:auto;
  }
}


/* =========================================================
   Public UI P2.39 — profile viewport fit and full tab alignment
   Goal: make the whole profile block sit neatly in the
   remaining viewport area and stop any tab from stretching
   or collapsing into narrow columns.
========================================================= */
.sitePanel--profile{
  --profile-viewport-offset: 292px;
  --profile-pane-min-h: clamp(560px, calc(100vh - var(--profile-viewport-offset)), 860px);
  min-height: var(--profile-pane-min-h);
}
.sitePanel--profile .panel-body,
.profilePage__body,
.profilePage .profileLayout{
  min-width: 0;
  min-height: var(--profile-pane-min-h);
}
.profilePage .profileLayout{
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.profileAside,
.profileMain,
.profileMain > .pPanel,
.profileMain > .pPanel > .profilePane,
.profileOverviewShell,
.profileOverviewHero > *,
.profilePane > *{
  min-width: 0;
}
.profileMain > .pPanel.is-active > .profilePane,
#profileOverview.profilePane{
  min-height: var(--profile-pane-min-h);
}
.profilePane{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profilePane .card__head > *{
  min-width: 0;
}

.profileOverviewShell{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: min-content;
  align-content: start;
  gap: 12px;
}
.profileOverviewHero{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
  gap: 14px !important;
  align-items: start !important;
}
.profileOverviewIdentity{
  display: grid !important;
  grid-template-columns: 72px minmax(220px, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  min-width: 0 !important;
}
.profileOverviewIdentity__ava{
  align-self: start;
}
.profileOverviewIdentity__body{
  min-width: 220px !important;
  width: 100%;
  max-width: none;
}
.profileOverviewIdentity__name,
.profileOverviewIdentity__sid{
  max-width: none !important;
  writing-mode: horizontal-tb;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.profileOverviewIdentity__meta,
.profileOverviewIdentity__chips{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.profileOverviewIdentity__meta > *,
.profileOverviewIdentity__chips > *{
  flex: 0 0 auto;
  max-width: 100%;
}
.profileOverviewHero__aside{
  min-width: 260px !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.profileOverviewMode,
.profileOverviewMode .modeSwitch{
  width: 100%;
}
.profileOverviewActions{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.profileOverviewActions .btn{
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: center;
  white-space: normal;
  line-height: 1.2;
}

.profileOverviewStats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.statTiles--profile{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.profileInfoGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.profileMyShopsList{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.profileOverviewStats,
.statTiles--profile,
.profileInfoGrid,
.profileMyShopsList,
.profileSplit,
.profilePane .grid2,
.profileLikesToolbar,
.lvlTop,
.refSummary,
.refRewardsGrid{
  align-items: stretch;
}
.profileHeroStat,
.statTiles--profile .statTile,
.profileInfoTile,
.profileMyShopRow,
.lvlCard,
.invSlot,
.achItem,
.likeUserRow,
.refRow,
.baseMiniRow,
.baseInviteRow,
.toggleRow,
.profileSection--embedded,
.profileBox,
.profilePane .panel{
  min-width: 0;
}
.profileHeroStat__value,
.statTile__value,
.profileInfoTile__value,
.profileMyShopName,
.profileMyShopMeta,
.likeUserRow__title,
.likeUserRow__meta,
.baseMiniRow__title,
.baseMiniRow__meta,
.baseInviteRow__title,
.baseInviteRow__meta,
.achItem__name,
.achItem__meta,
.achItem__sub,
.refRow__name,
.refRow__id,
.evMeta,
.evWhere{
  word-break: break-word;
  overflow-wrap: anywhere;
}
.profileSection--embedded{
  margin-top: 0;
}
.profileSection--embedded .profileSection__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
}
#profileRadsDaily .miniTable,
#profileRadsEvents .eventsTable,
.profileNav--side{
  scrollbar-gutter: stable;
}

@media (max-width: 1260px){
  .sitePanel--profile{
    --profile-viewport-offset: 300px;
  }
  .profileOverviewHero{
    grid-template-columns: 1fr !important;
  }
  .profileOverviewHero__aside{
    min-width: 0 !important;
  }
  .profileOverviewStats,
  .statTiles--profile{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1100px){
  .sitePanel--profile{
    --profile-viewport-offset: 330px;
    --profile-pane-min-h: auto;
    min-height: 0;
  }
  .sitePanel--profile .panel-body,
  .profilePage__body,
  .profilePage .profileLayout,
  .profileMain > .pPanel.is-active > .profilePane,
  #profileOverview.profilePane{
    min-height: 0;
  }
  .profilePage .profileLayout{
    grid-template-columns: 1fr;
  }
  .profileAside{
    position: static;
  }
  .profileNav--side{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    max-height: none;
    overflow: visible;
  }
}
@media (max-width: 860px){
  .profileOverviewIdentity{
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }
  .profileOverviewStats,
  .statTiles--profile,
  .profileInfoGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profileMyShopsList,
  .profileSplit,
  .profilePane .grid2,
  .profileLikesToolbar,
  .lvlTop,
  .refSummary,
  .refRewardsGrid,
  .profileOverviewActions{
    grid-template-columns: 1fr !important;
  }
  .profileLikesSearch{
    width: 100%;
  }
}
@media (max-width: 640px){
  .profilePane,
  .profileBox,
  .profileSection--embedded,
  .profileOverviewHero{
    padding: 12px;
  }
  .profileNav--side{
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .pTab{
    min-width: max-content;
  }
  .profileOverviewIdentity{
    grid-template-columns: 1fr !important;
  }
  .profileOverviewIdentity__ava{
    width: 60px;
    height: 60px;
  }
  .profileOverviewStats,
  .statTiles--profile,
  .profileInfoGrid,
  .profileMyShopsList,
  .lvlGrid,
  .invGrid{
    grid-template-columns: 1fr;
  }
  .profileInfoTile--wide{
    grid-column: auto;
  }
  .baseMiniRowWrap{
    flex-direction: column;
  }
  .likeUserRow__actions,
  .baseInviteActions,
  .profilePanel__footerActions{
    width: 100%;
    justify-content: space-between;
  }
}