/* ===== css/storage.css - 10 Linhas Exatas para Inventário e Baú ===== */

.mu-storage-window {
    position: fixed !important;
    z-index: 2600 !important;
    left: 50% !important;
    top: 18px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    /* 10 colunas por painel, dois painéis lado a lado: é o que faz os 50
       slots caberem sem rolagem nenhuma. */
    width: min(1180px, calc(100vw - 24px)) !important;
    padding: 12px !important;
    background: linear-gradient(rgba(10, 12, 12, 0.78), rgba(7, 8, 8, 0.92)), url('../assets/img/ui/inventory-forged-metal-bg.png') center/cover !important;
    border: 2px solid #4b4d4d !important;
    border-radius: 3px !important;
    color: #dfdfd7 !important;
    box-shadow: 0 0 0 3px #090909, 0 12px 34px #000, inset 0 0 0 2px #777a78, inset 0 0 26px #000 !important;
}

.mu-storage-window .mu-classic-window-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    margin: -4px -4px 10px;
    padding: 4px 8px;
    border: 1px solid #7b7e7c;
    background: linear-gradient(#1b1d1e, #070808);
    box-shadow: inset 0 1px #a7a9a7;
}

.mu-storage-window .mu-classic-window-head h2 {
    margin: 0;
    border: 0;
    color: #e5e4dc;
    font: 700 15px Georgia, serif;
    text-shadow: 1px 1px #000;
}

.storage-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.storage-currency {
    background: linear-gradient(135deg, #25282a, #0d0f10);
    border: 1px solid #566067;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: inset 0 0 10px #000;
}

.storage-currency-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.storage-currency-name {
    color: #e8dfb7;
    font: 700 12px Georgia, serif;
    display: flex;
    align-items: center;
    gap: 6px;
}

.storage-currency-name i {
    color: #e3b341;
}

.storage-balances {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #aebcc4;
}

.storage-balances b {
    color: #f1d675;
}

.storage-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.storage-actions input {
    width: 90px;
    background: #0d1117;
    border: 1px solid #566067;
    color: #fff;
    padding: 3px;
    font-size: 11px;
    text-align: center;
}

.storage-actions button {
    padding: 3px 8px;
    border: 1px solid #657077 !important;
    background: linear-gradient(#3d474d, #171b1d) !important;
    color: #e1e8e8 !important;
    font: 700 11px Georgia, serif;
}

.storage-actions button:hover {
    filter: brightness(1.2);
    border-color: #8aa4ad !important;
}

.storage-item-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.storage-transfer-note {
    margin: -1px 0 1px;
    color: #aebcc4;
    font-size: 11px;
    text-align: center;
}

.storage-transfer-note b { color: #f1d675; }

.storage-item-columns section h4 {
    margin: 0 0 4px 0;
    color: #e8dfb7;
    font: 700 12px Georgia, serif;
    text-align: center;
    text-shadow: 1px 1px #000;
    border-bottom: 1px solid #566067;
    padding-bottom: 3px;
}

/* Força exatamente 10 linhas de slots na vertical para o Inventário e o Baú da Conta */
.storage-item-grid {
    display: grid;
    /* 10 colunas: os 50 slots cabem em 5 linhas, sem rolagem. */
    grid-template-columns: repeat(10, minmax(0, 1fr));
    /* Sem linhas em pixel: a célula é quadrada por aspect-ratio e a linha
       acompanha. Linhas de 32px contra colunas de ~62px achatavam o slot, e
       era isso que deformava o ícone do item dentro do baú. */
    grid-auto-rows: auto;
    gap: 3px;
    background: linear-gradient(135deg, #252728, #0b0c0c);
    border: 2px solid #777a78;
    padding: 4px;
    /* Sem rolagem: a grade cresce com o conteúdo. */
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-shadow: inset 0 0 16px #000;
}

.storage-slot-box {
    position: relative;
    background: linear-gradient(135deg, #414345, #191a1b 56%, #0b0b0b);
    border: 1px solid #6a6c6d;
    box-shadow: inset 0 0 7px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 32px !important;
    min-height: 32px !important;
    aspect-ratio: auto !important;
}

.storage-slot-box:hover {
    border-color: #a7c4c8;
}

/* O baú replica a leitura de qualidade do inventário. */
.storage-slot-box.item-excellent {
    border-color: #2ea043 !important;
    background: radial-gradient(circle at 50% 35%, #173b22 0%, #0d1b13 72%) !important;
    box-shadow: inset 0 0 0 1px rgba(80, 230, 126, .28), inset 0 0 12px rgba(16, 105, 47, .42), 0 0 6px rgba(42, 190, 80, .28);
}
.storage-slot-box.item-requirements-unmet {
    border-color: #bc3c3c !important;
    background: radial-gradient(circle at 50% 35%, #3c1717 0%, #1a0c0c 76%) !important;
}

/* O conteúdo do tooltip é usado pelo portal global do inventário. Nunca deve
   aparecer dentro da grade, nem criar a antiga etiqueta nativa do navegador. */
.storage-slot-box .item-tooltip { display: none !important; }

.storage-slot-box .storage-item-icon {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    margin: auto !important;
    background-repeat: no-repeat !important;
    /* A posição vem no style do próprio sprite, exatamente como no
       inventário. Centralizar aqui sobrescrevia o recorte do spritesheet e
       fazia diversos itens aparecerem com a imagem de outra peça. */
    filter: drop-shadow(0 1px 2px #000);
}

/* Itens guardados preservam o sprite original, inclusive quando pertencem a
   outra classe. Sem esta regra o layout do inventário escondia os spans de
   equipamento dentro do baú e sobravam apenas level/quantidade. */
.storage-slot-box .equipment-item-icon,
.storage-slot-box .generated-item-icon,
.storage-slot-box .event-item-icon,
.storage-slot-box .jewel-item-icon {
    position: absolute !important;
    inset: 2px !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background-repeat: no-repeat !important;
    /* Não sobrescrever background-position/background-size inline: staffs,
       sets, caixas e itens de evento dependem dessas coordenadas. */
    filter: drop-shadow(0 1px 2px #000);
}
.storage-slot-box .event-item-icon,
.storage-slot-box .jewel-item-icon {
    inset: auto !important;
    width: 28px !important;
    height: 28px !important;
    margin: auto !important;
}

.storage-slot-box .storage-fallback-icon {
    color: #d7e4e8;
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
}

/* O slot do baú é quadrado, igual ao do inventário. */
.mu-storage-window .storage-item-grid .storage-slot-box {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
}

.mu-storage-window .storage-item-grid .storage-slot-box.empty { opacity: 1 !important; }

@media (max-height: 670px) {
    .mu-storage-window {
        top: 6px !important;
        bottom: auto !important;
        transform: translateX(-50%) scale(.88) !important;
        transform-origin: bottom center;
    }
}