/* R7.10.97 — Inventário/Depot compactos.
   Objetivo: footprint pequeno como as outras janelas do jogo, sem alterar lógica, itens, slots ou saves. */

/* Menos escurecimento global: janela continua em foco sem apagar o jogo inteiro. */
#infoModal.inventory-mode,
#infoModal.depot-mode{
  background:rgba(0,5,13,.46)!important;
}

/* -------------------------------------------------------------------------- */
/* INVENTÁRIO — ~620x527, próximo da proporção nativa do frame.                */
/* -------------------------------------------------------------------------- */
#infoModal.inventory-mode .modal.compact{
  width:min(620px,92vw)!important;
  height:min(527px,84vh)!important;
  box-shadow:0 20px 58px #000c,0 0 20px rgba(0,153,255,.14)!important;
}
#infoModal.inventory-mode .modal.compact::before{
  inset:-4px!important;
}
#infoModal.inventory-mode .modal-head{
  top:-1px!important;
  width:520px!important;
  max-width:calc(100% - 78px)!important;
  height:67px!important;
  background-size:100% 100%!important;
}
#infoModal.inventory-mode .modal-head .x{
  top:8px!important;
  right:-49px!important;
  width:46px!important;
  height:44px!important;
}
#infoModal.inventory-mode .modal-body{
  left:18px!important;
  right:18px!important;
  top:58px!important;
  bottom:17px!important;
}
#infoModal.inventory-mode .tibia-inventory{
  grid-template-columns:205px minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr) 42px!important;
  gap:7px!important;
  padding:7px 6px 3px!important;
}

#infoModal.inventory-mode .equip-pane::before{
  inset:2px!important;
  background-size:contain!important;
  opacity:.36!important;
}
#infoModal.inventory-mode .equipment-paperdoll{
  top:50%!important;
  width:174px!important;
  height:212px!important;
  transform:translate(-50%,-50%)!important;
}
#infoModal.inventory-mode .equip-slot{
  width:42px!important;
  height:42px!important;
}
#infoModal.inventory-mode .equip-slot img{
  width:31px!important;
  height:31px!important;
}
#infoModal.inventory-mode .equip-slot[data-equip="head"]{left:66px!important;top:0!important}
#infoModal.inventory-mode .equip-slot[data-equip="necklace"]{left:6px!important;top:54px!important}
#infoModal.inventory-mode .equip-slot[data-equip="armor"]{left:66px!important;top:54px!important}
#infoModal.inventory-mode .equip-slot[data-equip="backpack"]{right:6px!important;top:54px!important}
#infoModal.inventory-mode .equip-slot[data-equip="weapon"]{left:6px!important;top:108px!important}
#infoModal.inventory-mode .equip-slot[data-equip="legs"]{left:66px!important;top:108px!important}
#infoModal.inventory-mode .equip-slot[data-equip="offhand"]{right:6px!important;top:108px!important}
#infoModal.inventory-mode .equip-slot[data-equip="ring"]{left:6px!important;top:162px!important}
#infoModal.inventory-mode .equip-slot[data-equip="boots"]{left:66px!important;top:162px!important}
#infoModal.inventory-mode .equip-slot[data-equip="ammo"]{right:6px!important;top:162px!important}

/* Badges acompanham o slot menor. */
#infoModal.inventory-mode .equip-slot .refine-badge,
#infoModal.inventory-mode .bag-slot .refine-badge{
  left:1px!important;
  top:1px!important;
  min-width:16px!important;
  height:13px!important;
  padding:0 2px!important;
  font-size:8px!important;
  border-radius:3px!important;
}
#infoModal.inventory-mode .equip-slot.filled::after{
  right:2px!important;
  top:2px!important;
  font-size:7px!important;
}

/* Mochila compacta: 5 x 6 continua dinâmica, só reduz footprint. */
#infoModal.inventory-mode .storage-pane{
  border-width:12px!important;
}
#infoModal.inventory-mode .storage-section{
  padding:3px 7px 7px!important;
}
#infoModal.inventory-mode .storage-title{
  height:31px!important;
  flex-basis:31px!important;
  padding:0 3px 5px!important;
}
#infoModal.inventory-mode .storage-title b{font-size:14px!important}
#infoModal.inventory-mode .storage-title small{font-size:9px!important}
#infoModal.inventory-mode .backpack-scroll{
  padding:6px 3px 4px!important;
}
#infoModal.inventory-mode .backpack-scroll .bag-grid{
  grid-template-columns:repeat(5,42px)!important;
  grid-auto-rows:42px!important;
  gap:4px!important;
}
#infoModal.inventory-mode .bag-slot{
  width:42px!important;
  height:42px!important;
}
#infoModal.inventory-mode .bag-slot img{
  width:32px!important;
  height:32px!important;
}
#infoModal.inventory-mode .bag-slot span{
  right:3px!important;
  bottom:2px!important;
  font-size:9px!important;
}
#infoModal.inventory-mode .backpack-scroll::-webkit-scrollbar{width:8px!important}

/* Rodapé enxuto: capacidade e Zeni não roubam altura da janela. */
#infoModal.inventory-mode .inventory-footer{
  grid-template-columns:minmax(250px,315px) 145px!important;
  justify-content:space-between!important;
  gap:7px!important;
}
#infoModal.inventory-mode .capacity-box,
#infoModal.inventory-mode .capacity-track{
  height:42px!important;
  min-height:42px!important;
}
#infoModal.inventory-mode .capacity-track i{
  top:17px!important;
  height:8px!important;
}
#infoModal.inventory-mode .capacity-track span{
  top:11px!important;
  font-size:11px!important;
  line-height:18px!important;
}
#infoModal.inventory-mode .inventory-money{
  height:40px!important;
  border-width:10px!important;
  font-size:15px!important;
  gap:4px!important;
}
#infoModal.inventory-mode .inventory-money img{width:18px!important;height:18px!important}

/* -------------------------------------------------------------------------- */
/* DEPOT — largo o bastante para 2 painéis, mas deixa de dominar a tela.       */
/* -------------------------------------------------------------------------- */
#infoModal.depot-mode .modal.compact{
  width:min(770px,94vw)!important;
  height:min(520px,86vh)!important;
  box-shadow:0 20px 58px #000c,0 0 20px rgba(0,153,255,.14)!important;
}
#infoModal.depot-mode .modal.compact::before{
  inset:-4px!important;
  /* corners/edge art stays crisp; only the scalable center stretches */
  background:none!important;
  border:28px solid transparent!important;
  border-image:url('assets/ui/depot_v95/frame.png') 76 fill stretch!important;
}
#infoModal.depot-mode .modal-head{
  top:-1px!important;
  width:525px!important;
  max-width:calc(100% - 82px)!important;
  height:70px!important;
}
#infoModal.depot-mode .modal-head .x{
  top:9px!important;
  right:-52px!important;
  width:48px!important;
  height:45px!important;
}
#infoModal.depot-mode .modal-body{
  left:15px!important;
  right:15px!important;
  top:57px!important;
  bottom:15px!important;
  padding:8px!important;
}
#infoModal.depot-mode .depot-view{
  grid-template-columns:minmax(270px,.82fr) minmax(360px,1.18fr)!important;
  gap:9px!important;
}
#infoModal.depot-mode .depot-pane,
#infoModal.depot-mode .depot-chest{
  border-width:12px!important;
}
#infoModal.depot-mode .depot-panel-head{
  height:34px!important;
  flex-basis:34px!important;
  padding:0 7px!important;
  font-size:13px!important;
}
#infoModal.depot-mode .depot-panel-head span{font-size:9px!important}
#infoModal.depot-mode .depot-slot-grid{
  padding:7px 4px!important;
  grid-template-columns:repeat(5,42px)!important;
  grid-auto-rows:42px!important;
  gap:4px!important;
}
#infoModal.depot-mode .depot-slot{
  width:42px!important;
  height:42px!important;
}
#infoModal.depot-mode .depot-slot img{
  width:32px!important;
  height:32px!important;
}
#infoModal.depot-mode .depot-slot span{
  right:2px!important;
  bottom:2px!important;
  font-size:8px!important;
}
#infoModal.depot-mode .depot-slot .refine-badge{
  left:1px!important;
  top:1px!important;
  min-width:15px!important;
  height:12px!important;
  padding:0 2px!important;
  font-size:7px!important;
}
#infoModal.depot-mode .depot-help{
  padding:5px 6px!important;
  font-size:9px!important;
}
#infoModal.depot-mode .depot-slot-grid::-webkit-scrollbar{width:8px!important}

/* Em telas pequenas ainda prioriza caber, mas sem voltar ao tamanho gigante. */
@media (max-width:760px){
  #infoModal.inventory-mode .modal.compact{
    width:min(600px,96vw)!important;
    height:min(520px,88vh)!important;
  }
  #infoModal.inventory-mode .modal-head{width:75%!important;height:58px!important}
  #infoModal.inventory-mode .modal-head .x{right:-43px!important;width:40px!important;height:39px!important}
  #infoModal.inventory-mode .modal-body{top:51px!important;left:12px!important;right:12px!important;bottom:12px!important}
  #infoModal.inventory-mode .tibia-inventory{grid-template-columns:180px minmax(0,1fr)!important;gap:5px!important}
  #infoModal.inventory-mode .equipment-paperdoll{transform:translate(-50%,-50%) scale(.86)!important}
  #infoModal.inventory-mode .backpack-scroll .bag-grid{grid-template-columns:repeat(5,38px)!important;grid-auto-rows:38px!important;gap:3px!important}
  #infoModal.inventory-mode .bag-slot{width:38px!important;height:38px!important}
  #infoModal.inventory-mode .bag-slot img{width:29px!important;height:29px!important}

  #infoModal.depot-mode .modal.compact{width:96vw!important;height:88vh!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:320px!important}
}