/* =========================================================
   nav-20-shop-inventory-bubbles.css

   Extracted top-contiguous section from frontend/poker-nav.css.

   Ownership:
   - inventory avatar grid/cards
   - inventory bubble sizing fixes
   - shop bubble layout
   - avatar shop 3-column layout
   - shop inner panel width fixes
   - shop modal cleanup

   Production rule:
   This file must load AFTER nav-10-bubbles-tables.css
   and immediately BEFORE poker-nav.css.
   It preserves original cascade order by owning the former next top section.
========================================================= */

/* =========================
   Inventory bubble avatars
   ========================= */

.inventoryAvatarGrid{
  display:grid;
  grid-template-columns:repeat(3, 88px);
  gap:10px;
  margin-top:8px;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
}

.inventoryAvatarCard{
  width:88px;
  height:88px;
  min-width:88px;
  max-width:88px;
  position:relative;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  padding:8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:all .15s ease;
  box-sizing:border-box;
}

.inventoryAvatarCard:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.35);
}

.inventoryAvatarImg{
  width:70px;
  height:70px;
  object-fit:contain;
  display:block;
}

.inventoryAvatarName{
  font-size:11px;
  margin-top:4px;
  text-align:center;
  color:#f2f6ff;
  opacity:.95;
}

.inventoryAvatarPrice{
  margin-top:2px;
  font-size:11px;
  text-align:center;
  color:#cfe3ff;
  font-weight:700;
}

.inventoryAvatarBadge{
  position:absolute;
  top:4px;
  right:5px;
  font-size:9px;
  color:#ffd66b;
  max-width:50px;
  white-space:nowrap;
}

.inventoryEmpty{
  opacity:.7;
  font-size:13px;
}

.inventoryUnequipBtn{
  margin-top:6px;
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
}

.inventoryUnequipBtn:hover{
  background:rgba(255,255,255,.16);
}

/* Inventory bubble must fit 3 avatar cards */
#inventoryBubble{
  width:auto !important;
  min-width:260px !important;
  max-width:min(92vw, 340px) !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}

@media (max-width:520px){
  .inventoryAvatarGrid{
    grid-template-columns:repeat(2, 88px) !important;
  }
}

/* === FINAL FIX: make inventory bubble wide enough for 3 avatars === */
#inventoryBubble {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#inventoryAvatarGrid.inventoryAvatarGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 88px) !important;
  gap: 10px !important;
  width: 284px !important;
  max-width: 284px !important;
  box-sizing: border-box !important;
}

#inventoryBubble .inventoryAvatarCard {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  #inventoryBubble {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
  }

  #inventoryAvatarGrid.inventoryAvatarGrid {
    grid-template-columns: repeat(2, 88px) !important;
    width: 186px !important;
    max-width: 186px !important;
  }
}

/* Keep Equipped badge inside avatar card */
#inventoryBubble .inventoryAvatarBadge {
  top: 7px !important;
  right: 6px !important;
  max-width: 42px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 8px !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* === REAL FIX: Inventory popup inner box must fit 3 avatar cards === */
#inventoryBubble,
#inventoryBubble .tablesBubbleInner {
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#inventoryBubble #inventoryAvatarGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 88px) !important;
  gap: 10px !important;
  width: 284px !important;
  min-width: 284px !important;
  max-width: 284px !important;
  box-sizing: border-box !important;
}

#inventoryBubble .inventoryAvatarCard {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  box-sizing: border-box !important;
}

#inventoryBubble .inventoryAvatarBadge {
  top: 7px !important;
  right: 6px !important;
  max-width: 42px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 8px !important;
}

/* === Avatar Shop professional 3-column auto-height layout === */
#shopBubble {
  width: auto !important;
  min-width: 292px !important;
  max-width: 360px !important;
  height: auto !important;
  max-height: min(78vh, 640px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 16px !important;
  box-sizing: border-box !important;

  background: rgba(7, 11, 22, 0.97) !important;
  border: 1px solid rgba(130, 160, 255, 0.30) !important;
  border-radius: 13px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.50) !important;
}

#shopBubble #shopAvatarGrid.inventoryAvatarGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 82px) !important;
  gap: 10px !important;
  width: calc((82px * 3) + (10px * 2)) !important;
  max-width: calc((82px * 3) + (10px * 2)) !important;
  overflow: visible !important;
  align-items: start !important;
}

#shopBubble .inventoryAvatarCard {
  width: 82px !important;
  min-width: 82px !important;
  height: 104px !important;
  min-height: 104px !important;

  padding: 7px 5px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(170, 190, 240, 0.28) !important;
}

#shopBubble .inventoryAvatarCard:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(94, 225, 255, 0.65) !important;
  background: rgba(255, 255, 255, 0.085) !important;
}

#shopBubble .inventoryAvatarImg {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  margin: 0 0 5px 0 !important;
  display: block !important;
}

#shopBubble .inventoryAvatarMeta {
  width: 100% !important;
  text-align: center !important;
}

#shopBubble .inventoryAvatarName {
  font-size: 10.5px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  text-align: center !important;

  min-height: 23px !important;
  max-height: 23px !important;
  overflow: hidden !important;
}

#shopBubble .inventoryAvatarPrice {
  margin-top: 3px !important;
  font-size: 10.5px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  text-align: center !important;
  color: #e5edff !important;
}

#shopBubble .inventoryEmpty {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Very narrow phones: drop to 2 columns instead of overflowing */
@media (max-width: 360px) {
  #shopBubble {
    max-width: 260px !important;
  }

  #shopBubble #shopAvatarGrid.inventoryAvatarGrid {
    grid-template-columns: repeat(2, 82px) !important;
    width: calc((82px * 2) + 10px) !important;
    max-width: calc((82px * 2) + 10px) !important;
  }
}

/* === Avatar Shop inner panel width fix === */
#shopBubble .tablesBubbleInner {
  width: 286px !important;
  min-width: 286px !important;
  max-width: 286px !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#shopBubble {
  min-width: 326px !important;
  max-width: 326px !important;
}

#shopBubble #shopAvatarGrid.inventoryAvatarGrid {
  grid-template-columns: repeat(3, 82px) !important;
  width: 266px !important;
  min-width: 266px !important;
  max-width: 266px !important;
  gap: 10px !important;
}

#shopBubble .inventoryAvatarCard {
  height: 112px !important;
  min-height: 112px !important;
  overflow: hidden !important;
}

#shopBubble .inventoryAvatarName {
  min-height: 25px !important;
  max-height: 25px !important;
}

#shopBubble .inventoryAvatarPrice {
  margin-top: 2px !important;
  padding-bottom: 2px !important;
}

/* === Avatar Shop: remove outer modal look, keep only inner modal === */
#shopBubble {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  min-width: auto !important;
  max-width: none !important;
  width: auto !important;

  overflow: visible !important;
}

#shopBubble::before,
#shopBubble::after {
  display: none !important;
}

#shopBubble .tablesBubbleInner {
  width: 286px !important;
  min-width: 286px !important;
  max-width: 286px !important;

  padding: 14px !important;
  border-radius: 13px !important;

  background: rgba(7, 11, 22, 0.97) !important;
  border: 1px solid rgba(130, 160, 255, 0.30) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.50) !important;

  box-sizing: border-box !important;
}