/* R7.10.96 — Inventory/Depot usability + refine badges. */

/* BAG/DEPOT use neutral slots. Equipment-type silhouettes stay ONLY on paperdoll. */
#infoModal.inventory-mode .bag-slot{
  background-image:url('assets/ui/inventory_v95/slot_neutral.png')!important;
}
#infoModal.inventory-mode .bag-slot.filled:hover{
  background-image:url('assets/ui/inventory_v95/slot_neutral_selected.png')!important;
}
#infoModal.inventory-mode .equip-slot.filled{
  background-image:url('assets/ui/inventory_v95/slot_neutral.png')!important;
}
#infoModal.inventory-mode .equip-slot.filled:hover{
  background-image:url('assets/ui/inventory_v95/slot_neutral_selected.png')!important;
}

/* Refinement is an overlay/status, never baked into item sprites. */
#infoModal .refine-badge{
  position:absolute!important;
  left:3px!important;
  top:3px!important;
  min-width:20px!important;
  height:17px!important;
  padding:0 4px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:8!important;
  pointer-events:none!important;
  border:1px solid #ffd05a!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,#482800f2,#171005f2)!important;
  color:#ffe57a!important;
  font:900 10px/1 'Segoe UI',Arial,sans-serif!important;
  font-style:normal!important;
  text-shadow:0 1px 1px #000,0 0 4px #ffad1b88!important;
  box-shadow:0 0 4px #ffb51f66!important;
}
#infoModal.inventory-mode .equip-slot,
#infoModal.inventory-mode .bag-slot,
#infoModal.depot-mode .depot-slot{position:relative!important}
#infoModal.depot-mode .depot-slot .refine-badge{left:2px!important;top:2px!important;font-size:9px!important;min-width:18px!important;height:15px!important}

/* Double-click affordance on equipped items. */
#infoModal.inventory-mode .equip-slot.filled{cursor:pointer!important}
#infoModal.inventory-mode .equip-slot.filled::after{
  content:'2×';
  position:absolute;
  right:4px;
  top:4px;
  z-index:7;
  color:#75d9ff;
  font:800 9px/1 'Segoe UI',Arial,sans-serif;
  opacity:.55;
  pointer-events:none;
  text-shadow:0 1px 2px #000;
}
#infoModal.inventory-mode .equip-slot.filled:hover::after{opacity:.95}

/* Capacity: the label remains from the asset; the real value and bar are dynamic HTML. */
#infoModal.inventory-mode .capacity-track{
  height:54px!important;
  border:0!important;
  border-image:none!important;
  overflow:hidden!important;
  background:url('assets/ui/inventory_v95/capacity_frame_dynamic.png') center/100% 100% no-repeat!important;
  box-shadow:none!important;
}
#infoModal.inventory-mode .capacity-track b{display:none!important}
#infoModal.inventory-mode .capacity-track i{
  position:absolute!important;
  left:33.2%!important;
  top:21px!important;
  bottom:auto!important;
  height:11px!important;
  max-width:34%!important;
  border-radius:2px!important;
  background:linear-gradient(90deg,#69e33d,#d7dc32)!important;
  box-shadow:0 0 6px #76df3c88!important;
  opacity:.98!important;
}
#infoModal.inventory-mode .capacity-track span{
  position:absolute!important;
  right:5.4%!important;
  top:17px!important;
  height:20px!important;
  line-height:20px!important;
  font-size:13px!important;
  font-weight:800!important;
  color:#f4f7ff!important;
  text-shadow:0 1px 2px #000!important;
  z-index:3!important;
}
#infoModal.inventory-mode .inventory-footer{align-items:center!important}
#infoModal.inventory-mode .capacity-box{height:54px!important;min-height:54px!important}

@media (max-height:760px), (max-width:1100px){
  #infoModal.inventory-mode .capacity-track{height:48px!important}
  #infoModal.inventory-mode .capacity-box{height:48px!important;min-height:48px!important}
  #infoModal.inventory-mode .capacity-track i{top:19px!important;height:9px!important}
  #infoModal.inventory-mode .capacity-track span{top:14px!important;font-size:12px!important}
}