/* R7.10.95 — Inventário + Depot usando o kit visual Zenkai gerado nesta conversa.
   Visual only: não altera loot, equipamento, peso, slots, drag/drop, depot ou save. */

/* -------------------------------------------------------------------------- */
/* INVENTÁRIO                                                                  */
/* -------------------------------------------------------------------------- */
#infoModal.inventory-mode{
  place-items:center!important;
  background:rgba(0,5,13,.66)!important;
}
#infoModal.inventory-mode .modal.compact{
  position:relative!important;
  width:min(780px,94vw)!important;
  height:min(650px,88vh)!important;
  max-height:none!important;
  overflow:visible!important;
  border:0!important;
  background:#071426!important;
  box-shadow:0 26px 80px #000d,0 0 28px rgba(0,153,255,.16)!important;
}
#infoModal.inventory-mode .modal.compact::before{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:2;
  pointer-events:none;
  background:url('assets/ui/inventory_v95/frame.png') center/100% 100% no-repeat;
}
#infoModal.inventory-mode .modal-head{
  position:absolute!important;
  left:50%!important;
  top:-2px!important;
  transform:translateX(-50%)!important;
  width:84%!important;
  height:64px!important;
  z-index:8!important;
  padding:0!important;
  border:0!important;
  font-size:0!important;
  color:transparent!important;
  background:url('assets/ui/inventory_v95/header.png') center/100% 100% no-repeat!important;
  overflow:visible!important;
}
#infoModal.inventory-mode .modal-head .x{
  position:absolute!important;
  top:3px!important;
  right:-62px!important;
  width:58px!important;
  height:54px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  font-size:0!important;
  color:transparent!important;
  cursor:pointer!important;
  background:url('assets/ui/inventory_v95/close.png') center/contain no-repeat!important;
  filter:drop-shadow(0 3px 4px #000a)!important;
}
#infoModal.inventory-mode .modal-head .x:hover{filter:brightness(1.16) drop-shadow(0 0 8px #ffc23399)!important}
#infoModal.inventory-mode .modal-body{
  position:absolute!important;
  z-index:4!important;
  left:25px!important;
  right:25px!important;
  top:61px!important;
  bottom:23px!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
  padding:0!important;
  background:transparent!important;
}
#infoModal.inventory-mode .modal-body>.modal-actions{display:none!important}
#infoModal.inventory-mode #infoContent{height:100%!important;min-height:0!important;overflow:hidden!important}

#infoModal.inventory-mode .tibia-inventory{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:300px minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) 56px!important;
  gap:12px!important;
  padding:13px 10px 6px!important;
  border:0!important;
  background:transparent!important;
  color:#dbe9ff!important;
}

/* Painel de equipamento: o asset é apenas painel/guia. Os sprites reais continuam dinâmicos. */
#infoModal.inventory-mode .equip-pane{
  grid-column:1!important;
  grid-row:1!important;
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
}
#infoModal.inventory-mode .equip-pane::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('assets/ui/inventory_v95/equipment_panel.png') center/contain no-repeat;
  opacity:.42;filter:saturate(.85) brightness(.9);
}

#infoModal.inventory-mode .equipment-paperdoll{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:238px!important;
  height:320px!important;
  transform:translate(-50%,-48%)!important;
  z-index:2!important;
}

#infoModal.inventory-mode .equip-slot{
  position:absolute!important;
  width:58px!important;
  height:58px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  cursor:default;
}
#infoModal.inventory-mode .equip-slot::after{display:none!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="head"]{background-image:url('assets/ui/inventory_v95/slot_head.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="necklace"]{background-image:url('assets/ui/inventory_v95/slot_necklace.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="backpack"]{background-image:url('assets/ui/inventory_v95/slot_backpack.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="weapon"]{background-image:url('assets/ui/inventory_v95/slot_weapon.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="armor"]{background-image:url('assets/ui/inventory_v95/slot_armor.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="offhand"]{background-image:url('assets/ui/inventory_v95/slot_offhand.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="ring"]{background-image:url('assets/ui/inventory_v95/slot_ring.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="legs"]{background-image:url('assets/ui/inventory_v95/slot_legs.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="ammo"]{background-image:url('assets/ui/inventory_v95/slot_ammo.png')!important}
#infoModal.inventory-mode .equip-slot:not(.filled)[data-equip="boots"]{background-image:url('assets/ui/inventory_v95/slot_boots.png')!important}
#infoModal.inventory-mode .equip-slot.filled{background-image:url('assets/ui/inventory_v95/slot_empty.png')!important;cursor:pointer!important}
#infoModal.inventory-mode .equip-slot.filled:hover{background-image:url('assets/ui/inventory_v95/slot_selected.png')!important;filter:none!important}
#infoModal.inventory-mode .equip-slot img{
  width:43px!important;
  height:43px!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  filter:drop-shadow(0 2px 2px #000a);
}
/* 1 + 3 + 3 + 3: mesma leitura do paperdoll original, sem inventar slots. */
#infoModal.inventory-mode .equip-slot[data-equip="head"]{left:90px!important;top:0!important}
#infoModal.inventory-mode .equip-slot[data-equip="necklace"]{left:10px!important;top:72px!important}
#infoModal.inventory-mode .equip-slot[data-equip="armor"]{left:90px!important;top:72px!important}
#infoModal.inventory-mode .equip-slot[data-equip="backpack"]{right:10px!important;top:72px!important}
#infoModal.inventory-mode .equip-slot[data-equip="weapon"]{left:10px!important;top:144px!important}
#infoModal.inventory-mode .equip-slot[data-equip="legs"]{left:90px!important;top:144px!important}
#infoModal.inventory-mode .equip-slot[data-equip="offhand"]{right:10px!important;top:144px!important}
#infoModal.inventory-mode .equip-slot[data-equip="ring"]{left:10px!important;top:216px!important}
#infoModal.inventory-mode .equip-slot[data-equip="boots"]{left:90px!important;top:216px!important}
#infoModal.inventory-mode .equip-slot[data-equip="ammo"]{right:10px!important;top:216px!important}

/* Mochila — slots continuam HTML/dinâmicos; o asset fornece a moldura visual. */
#infoModal.inventory-mode .storage-pane{
  grid-column:2!important;
  grid-row:1!important;
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr)!important;
  overflow:hidden!important;
  border:18px solid transparent!important;
  border-image:url('assets/ui/inventory_v95/frame.png') 56 stretch!important;
  background:linear-gradient(180deg,#07182d 0%,#061223 100%)!important;
}
#infoModal.inventory-mode .storage-section{
  min-height:0!important;
  padding:5px 10px 10px!important;
  position:relative!important;
  z-index:1!important;
}
#infoModal.inventory-mode .backpack-section.backpack-only{height:100%!important;display:flex!important;flex-direction:column!important}
#infoModal.inventory-mode .storage-title{
  height:38px!important;
  flex:0 0 38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 4px 7px!important;
  border-bottom:1px solid rgba(34,149,255,.33)!important;
  color:#dbe8ff!important;
  text-shadow:0 1px 2px #000!important;
}
#infoModal.inventory-mode .storage-title b{font-size:17px!important;color:#e7efff!important}
#infoModal.inventory-mode .storage-title small{font-size:11px!important;color:#8da9d3!important;letter-spacing:.1px!important}
#infoModal.inventory-mode .backpack-scroll{
  flex:1!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:9px 5px 6px 3px!important;
}
#infoModal.inventory-mode .backpack-scroll .bag-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(5,56px)!important;
  grid-auto-rows:56px!important;
  gap:7px!important;
  justify-content:center!important;
  align-content:start!important;
}
#infoModal.inventory-mode .bag-slot{
  position:relative!important;
  width:56px!important;
  height:56px!important;
  border:0!important;
  box-shadow:none!important;
  background:url('assets/ui/inventory_v95/slot_empty.png') center/contain no-repeat!important;
  display:grid!important;
  place-items:center!important;
}
#infoModal.inventory-mode .bag-slot.filled{cursor:pointer!important}
#infoModal.inventory-mode .bag-slot.filled:hover{background-image:url('assets/ui/inventory_v95/slot_selected.png')!important;filter:none!important}
#infoModal.inventory-mode .bag-slot img{width:43px!important;height:43px!important;object-fit:contain!important;image-rendering:pixelated!important}
#infoModal.inventory-mode .bag-slot span{right:5px!important;bottom:4px!important;font-size:11px!important;background:#050a12d9!important;padding:0 2px!important;border-radius:2px!important}

/* Rodapé dinâmico; os assets são usados como bordas, sem números baked. */
#infoModal.inventory-mode .inventory-footer{
  grid-column:1/3!important;
  grid-row:2!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 205px!important;
  gap:12px!important;
  align-items:center!important;
  border:0!important;
  background:transparent!important;
}
#infoModal.inventory-mode .capacity-box{padding:0!important}
#infoModal.inventory-mode .capacity-track{
  position:relative!important;
  height:44px!important;
  overflow:hidden!important;
  border:13px solid transparent!important;
  border-image:url('assets/ui/inventory_v95/capacity_frame.png') 20 stretch!important;
  background:#071326!important;
  box-shadow:none!important;
}
#infoModal.inventory-mode .capacity-track i{
  position:absolute!important;
  left:8px!important;right:auto!important;top:16px!important;bottom:auto!important;
  height:9px!important;
  max-width:calc(100% - 16px)!important;
  background:linear-gradient(90deg,#74e93c,#d3db30)!important;
  box-shadow:0 0 6px #77df3c88!important;
  opacity:.95!important;
}
#infoModal.inventory-mode .capacity-track b,
#infoModal.inventory-mode .capacity-track span{top:10px!important;font-size:12px!important;line-height:18px!important}
#infoModal.inventory-mode .capacity-track b{left:12px!important;color:#f1dd62!important}
#infoModal.inventory-mode .capacity-track span{right:12px!important;color:#edf4ff!important}
#infoModal.inventory-mode .inventory-money{
  justify-self:stretch!important;
  height:44px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 8px!important;
  border:13px solid transparent!important;
  border-image:url('assets/ui/inventory_v95/currency_frame.png') 18 stretch!important;
  background:#071326!important;
  color:#ffd047!important;
  font-size:18px!important;
}
#infoModal.inventory-mode .inventory-money img{width:24px!important;height:24px!important}

#infoModal.inventory-mode .backpack-scroll::-webkit-scrollbar{width:11px!important}
#infoModal.inventory-mode .backpack-scroll::-webkit-scrollbar-track{background:#04101f!important;border:1px solid #12396f!important}
#infoModal.inventory-mode .backpack-scroll::-webkit-scrollbar-thumb{background:linear-gradient(#0aa8ff,#075ee9)!important;border:2px solid #05244f!important;border-radius:7px!important}

/* -------------------------------------------------------------------------- */
/* DEPOT                                                                       */
/* -------------------------------------------------------------------------- */
#infoModal.depot-mode{place-items:center!important;background:rgba(0,5,13,.66)!important}
#infoModal.depot-mode .modal.compact{
  position:relative!important;
  width:min(980px,95vw)!important;
  height:min(660px,89vh)!important;
  max-height:none!important;
  overflow:visible!important;
  border:0!important;
  background:#071426!important;
  box-shadow:0 26px 80px #000d,0 0 28px rgba(0,153,255,.16)!important;
}
#infoModal.depot-mode .modal.compact::before{
  content:"";position:absolute;inset:-7px;z-index:2;pointer-events:none;
  background:url('assets/ui/depot_v95/frame.png') center/100% 100% no-repeat;
}
#infoModal.depot-mode .modal-head{
  position:absolute!important;left:50%!important;top:-2px!important;transform:translateX(-50%)!important;
  width:72%!important;height:64px!important;z-index:8!important;padding:0!important;border:0!important;
  font-size:0!important;color:transparent!important;
  background:url('assets/ui/depot_v95/header.png') center/100% 100% no-repeat!important;
  overflow:visible!important;
}
#infoModal.depot-mode .modal-head .x{
  position:absolute!important;top:2px!important;right:-74px!important;width:62px!important;height:58px!important;
  padding:0!important;border:0!important;font-size:0!important;color:transparent!important;cursor:pointer!important;
  background:url('assets/ui/depot_v95/close.png') center/contain no-repeat!important;
  filter:drop-shadow(0 3px 4px #000a)!important;
}
#infoModal.depot-mode .modal-head .x:hover{filter:brightness(1.16) drop-shadow(0 0 8px #ffc23399)!important}
#infoModal.depot-mode .modal-body{
  position:absolute!important;z-index:4!important;left:24px!important;right:24px!important;top:61px!important;bottom:22px!important;
  width:auto!important;height:auto!important;max-height:none!important;padding:12px!important;overflow:hidden!important;background:transparent!important;
}
#infoModal.depot-mode .modal-body>.modal-actions{display:none!important}
#infoModal.depot-mode #infoContent{height:100%!important;min-height:0!important;overflow:hidden!important}
#infoModal.depot-mode .depot-view{
  width:100%!important;height:100%!important;min-width:0!important;
  display:grid!important;grid-template-columns:minmax(320px,.85fr) minmax(430px,1.15fr)!important;
  gap:16px!important;overflow:hidden!important;
}
#infoModal.depot-mode .depot-pane,
#infoModal.depot-mode .depot-chest{
  min-width:0!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;
  border:20px solid transparent!important;
  border-image:url('assets/ui/depot_v95/frame.png') 58 stretch!important;
  background:linear-gradient(180deg,#07182d,#061223)!important;
}
#infoModal.depot-mode .depot-panel-head{
  height:44px!important;flex:0 0 44px!important;padding:0 10px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  border:0!important;border-bottom:1px solid rgba(45,155,255,.36)!important;
  background:linear-gradient(180deg,#0c2342,#07172c)!important;
  color:#e6efff!important;font-size:15px!important;text-shadow:0 1px 2px #000!important;
}
#infoModal.depot-mode .depot-panel-head.chest{color:#ffd25b!important;background:linear-gradient(180deg,#102748,#07172c)!important;border-color:rgba(255,169,35,.4)!important}
#infoModal.depot-mode .depot-panel-head span{font-size:11px!important;color:#8eacd5!important}
#infoModal.depot-mode .depot-slot-grid{
  padding:12px 7px!important;display:grid!important;grid-template-columns:repeat(5,58px)!important;grid-auto-rows:58px!important;
  gap:7px!important;align-content:start!important;justify-content:center!important;overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;flex:1!important;
}
#infoModal.depot-mode .depot-slot{
  position:relative!important;width:58px!important;height:58px!important;padding:0!important;border:0!important;box-shadow:none!important;
  display:grid!important;place-items:center!important;background:url('assets/ui/depot_v95/slot_empty.png') center/contain no-repeat!important;
}
#infoModal.depot-mode .depot-slot.filled{cursor:pointer!important}
#infoModal.depot-mode .depot-slot.filled:hover{background-image:url('assets/ui/depot_v95/slot_selected.png')!important;filter:none!important}
#infoModal.depot-mode .depot-slot img{width:44px!important;height:44px!important;object-fit:contain!important;image-rendering:pixelated!important}
#infoModal.depot-mode .depot-slot span{right:4px!important;bottom:3px!important;font-size:10px!important;background:#050a12df!important;padding:0 2px!important;border-radius:2px!important}
#infoModal.depot-mode .depot-help{
  flex:0 0 auto!important;padding:8px 9px!important;border:0!important;border-top:1px solid rgba(45,155,255,.25)!important;
  color:#8fa8ca!important;background:#06101f!important;font-size:11px!important;text-align:center!important;
}
#infoModal.depot-mode .depot-slot-grid::-webkit-scrollbar{width:11px!important}
#infoModal.depot-mode .depot-slot-grid::-webkit-scrollbar-track{background:#04101f!important;border:1px solid #12396f!important}
#infoModal.depot-mode .depot-slot-grid::-webkit-scrollbar-thumb{background:linear-gradient(#0aa8ff,#075ee9)!important;border:2px solid #05244f!important;border-radius:7px!important}

/* Notebook: mantém proporção, reduz tudo como conjunto sem voltar ao layout cru antigo. */
@media (max-width:1100px),(max-height:760px){
  #infoModal.inventory-mode .modal.compact{width:min(700px,95vw)!important;height:min(590px,88vh)!important}
  #infoModal.inventory-mode .tibia-inventory{grid-template-columns:265px minmax(0,1fr)!important;gap:9px!important;padding-top:9px!important}
  #infoModal.inventory-mode .equipment-paperdoll{transform:translate(-50%,-48%) scale(.88)!important}
  #infoModal.inventory-mode .backpack-scroll .bag-grid{grid-template-columns:repeat(5,50px)!important;grid-auto-rows:50px!important;gap:5px!important}
  #infoModal.inventory-mode .bag-slot{width:50px!important;height:50px!important}
  #infoModal.inventory-mode .bag-slot img{width:39px!important;height:39px!important}
  #infoModal.depot-mode .modal.compact{width:min(900px,96vw)!important;height:min(600px,90vh)!important}
  #infoModal.depot-mode .depot-slot-grid{grid-template-columns:repeat(5,52px)!important;grid-auto-rows:52px!important;gap:5px!important}
  #infoModal.depot-mode .depot-slot{width:52px!important;height:52px!important}
  #infoModal.depot-mode .depot-slot img{width:40px!important;height:40px!important}
}
@media (max-width:760px){
  #infoModal.inventory-mode .modal.compact{width:96vw!important;height:88vh!important}
  #infoModal.inventory-mode .modal-head{width:76%!important}
  #infoModal.inventory-mode .tibia-inventory{grid-template-columns:210px minmax(0,1fr)!important}
  #infoModal.inventory-mode .equip-pane{background-size:95% auto!important}
  #infoModal.inventory-mode .equipment-paperdoll{transform:translate(-50%,-48%) scale(.74)!important}
  #infoModal.inventory-mode .backpack-scroll .bag-grid{grid-template-columns:repeat(4,48px)!important;grid-auto-rows:48px!important}
  #infoModal.inventory-mode .bag-slot{width:48px!important;height:48px!important}
  #infoModal.depot-mode .modal.compact{width:97vw!important;height:91vh!important}
  #infoModal.depot-mode .depot-view{grid-template-columns:1fr!important;overflow-y:auto!important}
  #infoModal.depot-mode .depot-pane,#infoModal.depot-mode .depot-chest{min-height:420px!important}
}