/* ==========================================================
   css/market.css - Estilos do Mercado P2P (Completo & Atualizado)
   ========================================================== */

#menu-modal-market.market-window-main {
    position: fixed !important;
    width: min(720px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 100px));
    display: flex;
    flex-direction: column;
    color: #d9e7e6;
    background: linear-gradient(145deg, #273032 0%, #12191a 42%, #070b0b 100%) !important;
    border: 2px solid #667276 !important;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #080b0b, inset 0 0 0 1px #111718, inset 0 0 28px #000, 0 16px 40px #000c;
    z-index: 10025 !important;
    overflow: hidden;
}

#menu-modal-market .mu-classic-window-head { 
    min-height: 37px; 
    padding: 0 11px; 
    border-bottom: 1px solid #617176; 
    background: linear-gradient(#384346, #151c1d 55%, #0d1213); 
    color: #f0df9a; 
    font: 700 16px Georgia, serif; 
    text-shadow: 1px 1px 2px #000; 
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* O comando /MARKET já é renderizado dentro da identidade do cabeçalho. */
#menu-modal-market .mu-classic-window-head::before { content: none; }

#menu-modal-market .mu-classic-close-btn, .market-modal-close { 
    width: 24px; height: 24px; padding: 0; 
    border: 1px solid #637277; background: #161f20; color: #d5e6e5; 
    font: 700 18px/20px Georgia, serif; cursor: pointer; 
    display: flex; align-items: center; justify-content: center;
}
#menu-modal-market .mu-classic-close-btn:hover, .market-modal-close:hover { 
    background: #3a191c; color: #ff8f8f; border-color: #b95656; 
}

.market-window-body-content { 
    padding: 11px; 
    background: linear-gradient(90deg, rgba(17,27,27,.78), rgba(6,10,10,.8)); 
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Sistema de Abas do Mercado (Padrão Guild/Amigos) */
.market-tabs-header {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 2px solid #39454a;
    padding-bottom: 4px;
}

.market-tab-btn {
    flex: 1;
    background: linear-gradient(to bottom, #21262d, #12161f);
    border: 1px solid #4b5b60;
    color: #8b949e;
    padding: 6px 4px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    position: relative;
}

.market-tab-btn:hover {
    color: #fff;
    border-color: #54dd92;
}

.market-tab-btn.active {
    background: linear-gradient(to bottom, #236846, #143d28);
    border-color: #54dd92;
    color: #fff;
    box-shadow: 0 0 6px rgba(84, 221, 146, 0.4);
}

/* Filtros e Inputs */
.market-filters { 
    display: grid; 
    grid-template-columns: minmax(0, 1fr) 150px auto auto; 
    gap: 6px; 
    padding: 8px; 
    border: 1px solid #38494a; 
    background: rgba(3,8,8,.58); 
    margin-bottom: 8px;
}

.market-filters input[type="text"], 
.market-filters select, 
#market-sub-modal-layer input { 
    min-height: 30px; 
    box-sizing: border-box; 
    padding: 4px 8px; 
    border: 1px solid #536367 !important; 
    border-radius: 1px; 
    background: #0a1010 !important; 
    color: #e6f2ee !important; 
    font: 12px Arial, sans-serif; 
    outline: none; 
}

.market-filters input:focus, 
.market-filters select:focus, 
#market-sub-modal-layer input:focus { 
    border-color: #71d8c3 !important; 
    box-shadow: 0 0 7px rgba(81,218,190,.28); 
}

/* Listagem de itens */
.market-listings-wrapper { 
    flex: 1;
    overflow-y: auto; 
    padding-right: 3px; 
    scrollbar-width: thin; 
    scrollbar-color: #597174 #0b1111; 
}

.market-listings-wrapper::-webkit-scrollbar,
.sell-items-picker-box::-webkit-scrollbar {
    width: 6px;
}

.market-listings-wrapper::-webkit-scrollbar-track,
.sell-items-picker-box::-webkit-scrollbar-track {
    background: #0d1117;
}

.market-listings-wrapper::-webkit-scrollbar-thumb,
.sell-items-picker-box::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}

.market-listing-card { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 12px; 
    min-height: 56px; 
    margin-bottom: 6px; 
    padding: 6px 10px; 
    border: 1px solid #3a4c4e; 
    background: linear-gradient(90deg, #101817, #0b1010); 
    box-shadow: inset 0 0 12px #0007; 
}

.market-listing-card:hover { 
    border-color: #6a9893; 
    background: linear-gradient(90deg, #162321, #0e1414); 
}

.market-card-left, .market-card-right { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    min-width: 0; 
}
.market-card-left { flex: 1; } 
.market-card-right { flex: 0 0 auto; }

.market-slot-preview { 
    width: 38px; 
    height: 38px; 
    flex: 0 0 38px; 
    display: grid; 
    place-items: center; 
    border: 1px solid #627073; 
    background: #080c0c; 
    position: relative;
}
.market-slot-preview img, .market-slot-preview .equipment-item-icon { 
    max-width: 30px; 
    max-height: 30px; 
}
.market-slot-preview .equipment-item-icon {
    width: 30px;
    height: 30px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Itens que ainda não possuem sprite próprio (como caixas) continuam
   identificáveis no mercado, em vez de aparecerem como um espaço vazio. */
.market-fallback-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: #f6d879;
    font: 700 23px/1 Georgia, serif;
    text-shadow: 0 1px 1px #000, 0 0 7px currentColor;
}
.market-fallback-kundun_box {
    color: #ff9e2e;
    background: radial-gradient(circle, #7a2504 0 22%, #2b1206 56%, transparent 58%);
}
.market-fallback-jewel { color: #74d9ff; }
.market-fallback-event { color: #e6cc83; }

.market-item-title { 
    display: block; 
    color: #f1df9a; 
    font: 700 13px Georgia, serif; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.market-item-title.is-excellent { color: #5ced98; }

.market-seller-info, .market-offers-count { 
    margin-top: 2px; 
    color: #9fb2b0; 
    font: 11px Arial, sans-serif; 
}
.market-seller-info b { color: #85d6ff; }

.market-price-info { min-width: 95px; text-align: right; }
.market-price-val { color: #f1d36d; font: 700 12px Georgia, serif; text-shadow: 1px 1px #000; }

.market-btn-action { 
    min-height: 28px; 
    padding: 4px 9px; 
    border: 1px solid #5c7476; 
    background: linear-gradient(#334143, #182021); 
    color: #e6f2ef; 
    font: 700 11px Georgia, serif; 
    text-shadow: 1px 1px #000; 
    cursor: pointer; 
    white-space: nowrap; 
}
.market-btn-action:hover { filter: brightness(1.18); transform: translateY(-1px); }
.market-btn-success { border-color: #3a9a71; background: linear-gradient(#277a55, #123c2c); }
.market-btn-primary { border-color: #447da0; background: linear-gradient(#2b637f, #173442); }
.market-btn-danger { border-color: #a54f52; background: linear-gradient(#783035, #341417); }
.market-btn-warning { border-color: #c98a3c; background: linear-gradient(#8f5c20, #4a2e0e); }
.market-btn-full { width: 100%; margin-top: 8px; }

.market-empty-notice { 
    padding: 24px 14px; 
    border: 1px dashed #405355; 
    background: #0a1010; 
    color: #9eb1af; 
    text-align: center; 
    font: 12px Arial, sans-serif; 
    margin-top: 10px;
}

/* Notificação Badge nas abas */
.market-badge {
    position: absolute;
    top: -3px; right: -3px;
    background: #da3633; color: #fff;
    font-size: 11px; font-weight: bold;
    padding: 1px 4px; border-radius: 10px;
    border: 1px solid #0d1117;
}

/* Modais Secundários (Anúncio, Oferta) */
#market-sub-modal-layer {
    position: fixed; inset: 0; z-index: 10035;
    background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center;
}
/* Segurança para sessões antigas: uma camada vazia nunca pode escurecer ou bloquear o jogo. */
#market-sub-modal-layer:empty {
    display: none !important;
    pointer-events: none !important;
    background: transparent !important;
}
/* Segurança para sessões antigas: uma camada vazia nunca pode escurecer ou bloquear o jogo. */
#market-sub-modal-layer:empty {
    display: none !important;
    pointer-events: none !important;
    background: transparent !important;
}
.market-sub-box {
    width: min(440px, calc(100vw - 28px));
    padding: 14px; border: 2px solid #647275;
    background: linear-gradient(145deg, #273032, #0a0e0e 64%) !important;
    box-shadow: 0 18px 48px #000d; color: #e4efed; border-radius: 3px;
}
.market-sub-modal-head { 
    display: flex; align-items: center; justify-content: space-between; 
    padding-bottom: 8px; border-bottom: 1px solid #4a5b5d; color: #f0de9c; font: 700 14px Georgia, serif; 
}
.market-sub-desc { margin: 8px 0; color: #b3c4c3; font-size: 11px; }

.sell-items-picker-box { 
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; 
    max-height: 180px; overflow: auto; padding: 6px; border: 1px solid #46585a; background: #08100f; 
}
.sell-pick-slot { 
    min-height: 34px; display: flex; align-items: center; padding: 4px 6px; 
    border: 1px solid #314346; background: #101a1a; color: #d8e4e0; font: 11px Arial, sans-serif; cursor: pointer; 
}
.sell-pick-slot:hover, .sell-pick-slot.selected { border-color: #78dbc4; background: #18352f; color: #e9fff7; }

.market-input-group { display: grid; gap: 4px; margin-top: 8px; color: #b8c8c7; font: 700 11px Georgia, serif; }
.market-input-group input { width: 100%; }

.market-offer-row {
    display: flex; align-items: center; justify-content: space-between;
    background: #0d1414; border: 1px solid #38484a; padding: 6px 8px; margin-bottom: 5px; border-radius: 2px;
}

@media (max-width: 620px) { 
    .market-filters { grid-template-columns: 1fr 1fr; } 
    .market-filters .market-btn-action { grid-column: 1 / -1; } 
    .market-listing-card { align-items: flex-start; flex-direction: column; } 
    .market-card-right { width: 100%; justify-content: space-between; } 
    .market-price-info { text-align: left; } 
}

/* Espaço do item escolhido no anúncio: fica vazio até o jogador clicar numa
   peça do inventário, que abre junto com a janela (mesmo fluxo da troca). */
.market-sell-slot { display: grid; place-items: center; min-height: 58px; margin-top: 8px; padding: 10px; border: 1px dashed #6b7b7a; border-radius: 3px; background: rgba(8, 14, 14, .72); text-align: center; }
.market-sell-slot.is-filled { border-style: solid; border-color: #cfa94f; background: rgba(24, 20, 8, .8); }
.market-sell-empty { color: #8b9b9a; font: 11px Georgia, serif; }
.market-sell-chosen { color: #f0dc9d; font: 700 13px Georgia, serif; }
.market-sell-chosen b { color: #9fd7ff; }

/* ---- O inventário enquanto o mercado está aberto ---- */
/* Com o mercado na tela a bolsa passa a ser um anexo dele: o equipamento sai
   de vista (nada equipado entra em anúncio), o botão de fechar some — quem
   fecha os dois é a janela do mercado — e o painel sobe acima dela. O z-index
   do inventário (10020) era menor que o do mercado (10025), e era por isso que
   ele às vezes nascia atrás na hora de anunciar. */
body.market-open #menu-modal-items .mu-classic-section-title,
body.market-open #menu-modal-items .mu-equipment-layout,
body.market-open #menu-modal-items .inventory-close-control { display: none !important; }
body.market-open #menu-modal-items .mu-classic-inventory-head { margin-top: 6px !important; }
body.market-open #menu-modal-items.mu-inventory-window { z-index: 10030 !important; }

/* Formulário do anúncio embutido na aba "Meus Anúncios". */
.market-sell-form {
    margin-bottom: 8px; padding: 10px 11px;
    border: 1px solid #5d6d70; border-radius: 3px;
    background: linear-gradient(150deg, #1d2527, #0a0f0f 72%);
    box-shadow: inset 0 0 0 1px #0e1414, 0 6px 16px #0009;
}
.market-sell-form .market-sub-modal-head { padding-bottom: 6px; }
.market-sell-form .market-sub-desc { margin: 7px 0 0; }

/* ---- Contagem regressiva do anúncio ---- */
.market-countdown { color: #9fd7ff; font-variant-numeric: tabular-nums; }
.market-countdown.is-ending { color: #ffab6b; }

/* ---- Prévia das taxas no formulário de anúncio ---- */
.market-fee-preview { display: grid; gap: 3px; margin-top: 7px; color: #9fb2b0; font: 11px/1.35 Arial, sans-serif; }
.market-fee-preview b { color: #f0d98a; }

/* ---- Histórico ---- */
/* A linha antiga misturava tipo, nome e valor num parágrafo só e assinava com
   "Participante: fulano - 13:54:44". Aqui cada coluna tem um trabalho: item,
   o que aconteceu e com quem, e o valor. */
.market-history-row {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    margin-bottom: 5px; padding: 7px 9px;
    border: 1px solid #38484a; border-left: 3px solid #5d6d70; border-radius: 2px;
    background: linear-gradient(100deg, #101718, #090d0d);
}
.market-history-row.is-sold { border-left-color: #4bbf7a; }
.market-history-row.is-bought { border-left-color: #4f9edc; }
.market-history-row.is-cancelled { border-left-color: #b98a3e; }
.market-history-row.is-expired { border-left-color: #7a7f80; }
.market-history-copy { min-width: 0; display: grid; gap: 2px; }
.market-history-copy strong { overflow: hidden; color: #e6efee; font: 700 13px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.market-history-copy strong.is-excellent { color: #7ef0b0; }
.market-history-copy small { color: #90a3a5; font: 11px Arial, sans-serif; }
.market-history-right { display: grid; justify-items: end; gap: 2px; text-align: right; }
.market-history-tag {
    padding: 1px 7px; border: 1px solid currentColor; border-radius: 9px;
    font: 700 11px Georgia, serif; letter-spacing: .8px; text-transform: uppercase;
}
.is-sold .market-history-tag { color: #6fe3a0; }
.is-bought .market-history-tag { color: #78c2f5; }
.is-cancelled .market-history-tag { color: #e0b25f; }
.is-expired .market-history-tag { color: #9aa2a3; }
.market-history-price { color: #f2d98c; font: 700 13px Georgia, serif; font-variant-numeric: tabular-nums; }
.market-history-fee { color: #8d9b9c; font: 11px Arial, sans-serif; }

/* ---- Negociação de um anúncio (propostas + conversa) ---- */
.market-negotiation { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.market-negotiation-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #3f4e50; }
.market-negotiation-title { min-width: 0; display: grid; gap: 2px; }
.market-negotiation-title strong { color: #f0de9c; font: 700 15px Georgia, serif; }
.market-negotiation-title small { color: #9fb2b0; font: 11px Arial, sans-serif; }
.market-negotiation-tabs { display: flex; gap: 5px; margin: 8px 0; }
.market-negotiation-body { flex: 1; min-height: 0; overflow: auto; padding-right: 3px; }

.market-chat-thread {
    display: grid; gap: 5px; max-height: 260px; overflow: auto;
    padding: 8px; border: 1px solid #35474a; background: #070c0c;
}
.market-chat-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: baseline; }
.market-chat-line b { color: #7fd0e8; font: 700 11px Georgia, serif; }
.market-chat-line span { color: #dbe6e4; font: 12px Arial, sans-serif; overflow-wrap: anywhere; }
.market-chat-line small { color: #7f8f90; font: 11px Arial, sans-serif; }
.market-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 8px; }
.market-chat-closed { margin-top: 8px; color: #90a3a5; font: 11px Arial, sans-serif; text-align: center; }

/* ---- Conversa dentro do próprio cartão em "Meus Anúncios" ---- */
.market-inline-chat { margin-top: 8px; padding-top: 7px; border-top: 1px dashed #3a4c4e; }
.market-inline-chat-title { display: block; margin-bottom: 5px; color: #f0de9c; font: 700 11px Georgia, serif; }
.market-inline-chat .market-chat-thread { max-height: 132px; }
.market-offer-bidder { color: #c6d4d3; font: 12px Arial, sans-serif; }
.market-offer-bidder b { color: #f0de9c; }

/* ---- Aba Negociações ---- */
/* Reúne todo anúncio em que a conta está envolvida — vendendo, ofertando ou
   só conversando — para a conversa não ficar presa a lembrar de qual item era. */
.market-deal-row {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    margin-bottom: 5px; padding: 8px 9px;
    border: 1px solid #38484a; border-left: 3px solid #5d6d70; border-radius: 2px;
    background: linear-gradient(100deg, #101718, #090d0d);
}
.market-deal-row.is-open { border-left-color: #6fa9c8; }
.market-deal-row.is-sold { border-left-color: #4bbf7a; }
.market-deal-row.is-bought { border-left-color: #4f9edc; }
.market-deal-row.is-cancelled { border-left-color: #b98a3e; }
.market-deal-row.is-expired { border-left-color: #7a7f80; }
.market-deal-row.is-unread { border-color: #7fd0e8; background: linear-gradient(100deg, #122126, #090d0d); }

.market-deal-copy { min-width: 0; display: grid; gap: 2px; }
.market-deal-copy strong { display: flex; align-items: center; gap: 6px; overflow: hidden; color: #e6efee; font: 700 13px Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.market-deal-copy small { color: #90a3a5; font: 11px Arial, sans-serif; }
.market-deal-dot { width: 7px; height: 7px; border-radius: 50%; background: #7fd0e8; box-shadow: 0 0 6px #7fd0e8; flex: 0 0 auto; }
.market-deal-last { overflow: hidden; color: #b6c6c4; font: italic 11px Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.market-deal-last b { color: #7fd0e8; font-style: normal; }
.market-deal-right { display: grid; justify-items: end; gap: 3px; text-align: right; }
.market-deal-row.is-open .market-history-tag { color: #8ec8e2; }

/* ---- Propostas já resolvidas ---- */
.market-offer-history { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #3a4c4e; }
.market-offer-history-title { display: block; margin-bottom: 4px; color: #9fb2b0; font: 700 11px Georgia, serif; letter-spacing: .6px; text-transform: uppercase; }
.market-offer-resolved { border-left: 3px solid #5d6d70; opacity: .82; }
.market-offer-resolved.is-rejected { border-left-color: #c4676a; }
.market-offer-resolved.is-accepted { border-left-color: #4bbf7a; }
.market-offer-resolved.is-refunded { border-left-color: #b98a3e; }
.market-offer-status { font: 700 11px Georgia, serif; white-space: nowrap; }
.is-rejected .market-offer-status { color: #e59093; }
.is-accepted .market-offer-status { color: #7ee0a6; }
.is-refunded .market-offer-status { color: #e0b25f; }