/*
 * Tela "Meus itens" (/my-items). A base visual vem de accounts.css (.accounts-page, .accounts-header,
 * .accounts-card, .accounts-table, .accounts-empty-value). Aqui ficam só as peças que /accounts não tem.
 */

/* as tabelas desta tela são estreitas (duas colunas lado a lado) */
.accounts-page.my-items-page .accounts-table {
  min-width: 0;
}

/* ---------- barra do painel: título + busca ---------- */
.my-items-page .my-items-panel__toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--acc-border-strong);
  background: rgba(255, 255, 255, 0.015);
}

.my-items-page .my-items-panel__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

.my-items-page .my-items-search {
  position: relative;
}

.my-items-page .my-items-search i {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--acc-muted);
  pointer-events: none;
}

.my-items-page .my-items-search .form-control {
  height: 38px;
  padding: 0 0.85rem 0 2.25rem;
  font-size: 0.85rem;
  color: var(--acc-text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--acc-border-strong);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.my-items-page .my-items-search .form-control::placeholder {
  color: var(--acc-muted);
}

.my-items-page .my-items-search .form-control:focus {
  border-color: var(--acc-accent);
  box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.15);
}

.my-items-page .my-items-loader {
  margin-top: -0.25rem;
  font-size: 0.82rem;
  color: var(--acc-muted);
  animation: accounts-pulse 1.2s ease-in-out infinite;
}

/* ---------- tabelas ---------- */
.my-items-page .my-items-table tbody tr[role='button'] {
  cursor: pointer;
}

/* Estas regras eram escopadas por #id da tela /my-items. O destaque do nome e as colunas
   de número passaram a vir das classes de /accounts (.accounts-table__name e
   .accounts-table__stat), aplicadas direto no markup.
   A antiga "#my-item-account-rows td:nth-child(n + 2) { width: 1% }" foi removida porque
   comprimia QUALQUER coluna a partir da segunda — e esmagaria a coluna de personagens. */
.my-items-page .my-items-table__icon,
.my-items-page #my-items-list td:first-child {
  width: 1%;
  white-space: nowrap;
}

/* ícones: imagens originais 100x100, exibidas em 48px sem distorcer */
.my-items-page .my-items-table img,
.my-items-page .my-items-selected img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--acc-border);
  background: rgba(255, 255, 255, 0.03);
  object-fit: contain;
}

/* item selecionado na lista */
.my-items-page .accounts-table tbody tr.table-active > td {
  background: rgba(230, 0, 0, 0.12);
}

.my-items-page .accounts-table tbody tr.table-active > td:first-child {
  box-shadow: inset 3px 0 0 var(--acc-accent);
}

/* ---------- distribuição: ~48% Itens / 52% Contas (mesmo gutter do grid; empilha abaixo de 768px) ---------- */
@media (min-width: 768px) {
  .my-items-page .my-items-col--items {
    width: 48%;
  }

  .my-items-page .my-items-col--accounts {
    width: 52%;
  }
}

/* ---------- lista de itens: 8 linhas visíveis, altura fixa, rolagem só dentro da lista ---------- */
/* linha = ícone 48px + padding vertical 0,75rem x 2 + borda 1px; cabeçalho ~45px */
.my-items-page .my-items-scroll {
  height: calc(45px + 8 * (48px + 1.5rem + 1px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.my-items-page .my-items-scroll::-webkit-scrollbar {
  width: 8px;
}

.my-items-page .my-items-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}

/* busca sem resultado: não deixa uma caixa vazia de 8 linhas acima da mensagem */
.my-items-page .my-items-scroll:not(:has(.my-item-row)) {
  height: auto;
}

/* cabeçalho fica visível durante a rolagem (fundo opaco no mesmo tom do card) */
.my-items-page .my-items-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #131316;
}

/* ---------- mensagens e item selecionado ---------- */
.my-items-page .my-items-empty {
  padding: 2rem 1rem;
  text-align: center;
}

.my-items-page .my-items-selected {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--acc-border-strong);
}

.my-items-page .my-items-selected__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

.my-items-page .my-items-selected__total {
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--acc-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- responsivo (mesmo ponto de quebra de /accounts) ---------- */
@media (max-width: 767.98px) {
  .my-items-page #my-items-list td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}


/* ==========================================================================
 * TELA /my-items — compactação e peças novas.
 *
 * TUDO aqui está sob `.my-items-tela`, uma classe que SÓ a página /my-items carrega.
 * Isso é obrigatório: `.my-items-page` não é exclusiva desta tela — 79 views a usam e 80
 * carregam esta folha. Regra escrita sob `.my-items-page` muda o visual de todas elas.
 * ========================================================================== */

/* ---------- barra do painel: título e busca dividem a linha ---------- */
.my-items-tela .my-items-panel__toolbar {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  padding: 0.6rem 0.9rem;
}

.my-items-tela .my-items-panel__toolbar .my-items-search {
  flex: 1 1 220px;
  min-width: 0;
}

.my-items-tela .my-items-search .form-control {
  height: 34px;
}

/* ---------- linhas e cabeçalhos mais baixos ----------
   O padrão de /accounts precisa caber botões de ação; aqui não há botões, então sobra
   altura. Os DOIS painéis usam a mesma métrica, para as linhas ficarem alinhadas. */
.my-items-tela .accounts-table > :not(caption) > * > * {
  padding: 0.5rem 0.7rem;
}

.my-items-tela .accounts-table thead th {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* ---------- ícone do item ----------
   Restrito à coluna de ícone de propósito: assim nenhuma imagem consegue aparecer na
   coluna CONTA sem alguém notar. */
.my-items-tela .my-items-table__icon img {
  width: 44px;
  height: 44px;
}

/* O item ESCOLHIDO é o assunto do painel inteiro: ícone grande, no tamanho do arquivo
   original (as imagens de itemlist são 100x100). `object-fit: contain`, herdado de
   .my-items-page, garante que nada seja esticado. */
.my-items-tela .my-items-selected img {
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

.my-items-tela .my-items-selected {
  gap: 1rem;
  padding: 0.9rem;
}

.my-items-tela .my-items-selected__name {
  font-size: 1.1rem;
}

/* ---------- lista de contas: rolagem própria ----------
   A altura é fixa e mostra ~7 contas. É o que mantém o card com a MESMA altura de fora
   com a lista fechada, com uma conta aberta ou rolando: só o conteúdo daqui se move.
   linha da conta = 38px (recuo 0,5rem x 2 + 1px de borda + texto); cabeçalho ~37px.

   8,65 linhas para um lote de 10, e não 10: com altura de exatamente um lote o primeiro
   lote preencheria a área na medida, NÃO haveria barra de rolagem e o usuário não teria
   como pedir o seguinte. Com a sobra, a 9ª conta aparece cortada — que é justamente o
   aviso de que a lista continua.

   O número 8,65 vem de fora para dentro: é a altura que deixa o card CONTAS do mesmo
   tamanho do card ITENS (581px), já descontados o cabeçalho, o bloco do item e o rodapé. */
.my-items-tela .my-items-contas-scroll {
  height: calc(37px + 8.65 * 38px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.my-items-tela .my-items-contas-scroll::-webkit-scrollbar {
  width: 8px;
}

.my-items-tela .my-items-contas-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}

/* colunas sempre visíveis durante a rolagem (mesma técnica da lista de itens) */
.my-items-tela .my-items-contas-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #131316;
}

/* aviso do próximo lote, no fim da lista */
.my-items-tela .my-items-mais {
  padding: 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--acc-muted);
  animation: accounts-pulse 1.2s ease-in-out infinite;
}

/* ---------- tabela de contas: CONTA / QUANTIDADE / SLOTS ----------
   A coluna de personagens deixou de existir; quem cresce agora é a CONTA. */
.my-items-tela .accounts-table__account-col {
  width: auto;
}

/* ---------- lista de itens: 8 linhas visíveis, com a linha mais baixa ----------
   linha = ícone 44px + 0,5rem x 2 de recuo + 1px de borda; cabeçalho ~37px */
.my-items-tela .my-items-scroll {
  height: calc(37px + 8 * (44px + 1rem + 1px));
}

.my-items-tela .my-items-selected {
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
}

/* ---------- estado vazio e rodapé dentro dos painéis ----------
   .accounts-empty de /accounts é feito para a página inteira; aqui divide espaço com uma
   tabela, então usa menos altura. */
.my-items-tela .accounts-empty {
  padding: 1.5rem 1rem;
}

.my-items-tela .accounts-footer {
  padding: 0.55rem 0.9rem;
}

.my-items-tela #my-item-accounts .table-responsive {
  overflow-x: auto;
}

/* ==========================================================================
 * Painel CONTAS — accordion em linhas da propria tabela.
 *
 * Cada conta e uma <tbody> e os personagens sao <tr> de verdade, nas mesmas tres colunas.
 * TUDO daqui para baixo esta sob .my-items-tela, classe que SO esta pagina carrega:
 * .my-items-page nao serve — 79 views a usam e 80 carregam esta folha.
 * ========================================================================== */

/* ---------- zebra, bordas e destaque ----------
   Cada conta é uma <tbody> própria, então o `:nth-child(even)` e o
   `tr:last-child { border-bottom: 0 }` de /accounts passariam a valer DENTRO de cada grupo —
   o primeiro personagem ficaria listrado e toda conta perderia a borda de baixo. Aqui cada
   linha declara o que precisa, e o zebrado das CONTAS vem marcado no markup (.is-par). */
.my-items-tela #my-item-accounts-table > tbody > tr > td {
  border-bottom: 1px solid var(--acc-border);
}

.my-items-tela #my-item-accounts-table > tbody > tr:nth-child(even) > td {
  background: transparent;
}

.my-items-tela #my-item-accounts-table > tbody:last-child > tr:last-child > td {
  border-bottom: 0;
}

.my-items-tela #my-item-accounts-table > tbody > tr.mi-linha:not(.is-par) > td {
  background: transparent;
}

.my-items-tela #my-item-accounts-table > tbody > tr.mi-linha.is-par > td {
  background: var(--acc-surface-row);
}

.my-items-tela #my-item-accounts-table > tbody > tr.mi-linha:hover > td {
  background: rgba(230, 0, 0, 0.06);
}

/* ---------- conta aberta: o grupo inteiro fica vermelho ----------
   Conta, personagens e baú são linhas da mesma <tbody>, e é nela que a marca `is-aberta`
   entra — assim o destaque cobre o grupo todo de uma vez e sai junto ao fechar.

   Os seletores precisam do `#my-item-accounts-table` e de três classes porque as regras do
   zebrado e do hover (logo acima) já estão nesse nível de especificidade; sem isso o fundo
   listrado ganharia e a conta aberta continuaria cinza. */
.my-items-tela #my-item-accounts-table > tbody.mi-grupo.is-aberta > tr > td {
  background: rgba(230, 0, 0, 0.13);
  border-bottom-color: rgba(230, 0, 0, 0.22);
}

/* a linha da própria conta é o topo do grupo: um tom acima dos filhos */
.my-items-tela #my-item-accounts-table > tbody.mi-grupo.is-aberta > tr.mi-linha > td {
  background: rgba(230, 0, 0, 0.2);
}

/* a barra vermelha na primeira coluna amarra o grupo visualmente de cima a baixo */
.my-items-tela #my-item-accounts-table > tbody.mi-grupo.is-aberta > tr > td:first-child {
  box-shadow: inset 2px 0 0 var(--acc-accent);
}

/* o texto acompanha: nome da conta, nicks e "Baú" ficam claros dentro do grupo aberto */
.my-items-tela .mi-grupo.is-aberta .accounts-table__name,
.my-items-tela .mi-grupo.is-aberta .mi-pers__nome,
.my-items-tela .mi-grupo.is-aberta .mi-pers__marca {
  color: #fff;
}

/* ---------- linha da conta ---------- */
.my-items-tela .mi-linha {
  cursor: pointer;
}

/* botão sem cara de botão: ele É a célula da conta (e é quem recebe o foco do teclado) */
.my-items-tela .mi-conta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
}

.my-items-tela .mi-conta:focus-visible {
  outline: 2px solid var(--acc-accent);
  outline-offset: 2px;
}

.my-items-tela .mi-conta .accounts-table__name {
  min-width: 0;
}

/* ▶ fechado / ▼ aberto — mesmo chevron que o dashboard já usa */
.my-items-tela .mi-conta__seta {
  flex: 0 0 auto;
  width: 0.7rem;
  font-size: 0.7rem;
  color: var(--acc-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.my-items-tela .mi-conta[aria-expanded='true'] .mi-conta__seta {
  color: var(--acc-accent);
  transform: rotate(90deg);
}

/* ---------- linha do personagem ----------
   É uma linha da MESMA tabela: mesmas colunas, mesma altura, mesma borda, mesma tipografia.
   A hierarquia aparece só no recuo, na setinha discreta e num tom de fundo um pouco abaixo. */
.my-items-tela #my-item-accounts-table > tbody > tr.mi-pers-linha > td {
  background: rgba(255, 255, 255, 0.022);
}

.my-items-tela #my-item-accounts-table > tbody > tr.mi-pers-linha:hover > td {
  background: rgba(230, 0, 0, 0.05);
}

.my-items-tela .mi-pers {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  /* o recuo é a marca da hierarquia; alinha o nome com o da conta, uma seta à frente */
  padding: 0 0 0 1.3rem;
  font: inherit;
  color: var(--acc-text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
  min-width: 0;
}

.my-items-tela button.mi-pers {
  cursor: pointer;
}

.my-items-tela button.mi-pers:hover .mi-pers__nome,
.my-items-tela button.mi-pers:focus-visible .mi-pers__nome {
  color: #fff;
}

/* o foco do teclado precisa ser MAIS do que o hover: sem isto os dois ficam
   indistinguíveis e quem navega por Tab não sabe onde está */
.my-items-tela button.mi-pers:focus-visible {
  outline: 2px solid var(--acc-accent);
  outline-offset: 2px;
}

.my-items-tela .mi-pers__marca {
  flex: 0 0 auto;
  width: 0.6rem;
  font-size: 0.7rem;
  color: var(--acc-muted);
}

.my-items-tela .mi-pers__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}

/* O baú é da CONTA, não de um personagem — o ícone de caixa continua dizendo isso —, mas
   agora abre o Banco daquela conta no mesmo viewer, então é botão e tem cursor de botão.
   O tom levemente apagado se mantém para distingui-lo dos personagens. */
.my-items-tela button.mi-pers--bau {
  color: var(--acc-muted);
  cursor: pointer;
}

.my-items-tela button.mi-pers--bau:hover .mi-pers__nome,
.my-items-tela button.mi-pers--bau:focus-visible .mi-pers__nome {
  color: #fff;
}

/* ---------- responsivo ----------
   Abaixo de 768px /accounts ESCONDE as colunas de número, porque lá elas reaparecem no
   resumo .accounts-table__meta de cada linha. /my-items não tem esse resumo — e essas
   colunas SÃO o conteúdo. Aqui elas continuam visíveis e a tabela rola na horizontal
   dentro do próprio card. */
@media (max-width: 767.98px) {
  .my-items-tela .accounts-table__stat {
    display: table-cell;
  }

  /* três colunas em vez de quatro: cabe em tela estreita sem rolar tanto.
     Precisa de `.accounts-page` no seletor: sem ele perde para o
     `.accounts-page.my-items-page .accounts-table { min-width: 0 }` do topo do arquivo
     e a regra não valia nada. */
  .accounts-page.my-items-tela .accounts-table {
    min-width: 340px;
  }

  .my-items-tela .my-items-table__icon {
    width: 1%;
  }

  .my-items-tela .my-items-scroll {
    height: auto;
    max-height: calc(37px + 6 * (44px + 1rem + 1px));
  }

  .my-items-tela .my-items-panel__toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  /* em coluna, o flex-basis de 220px viraria ALTURA e abriria um vão enorme */
  .my-items-tela .my-items-panel__toolbar .my-items-search {
    flex: 0 0 auto;
  }

  /* ícone do item: reduz proporcionalmente para caber sem empurrar o texto */
  .my-items-tela .my-items-selected img {
    width: 72px;
    height: 72px;
  }

  /* a paginação não pode vazar do card */
  .my-items-tela .accounts-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .my-items-tela .accounts-footer .pagination {
    flex-wrap: wrap;
  }
}

/* ---------- aviso de carregamento do painel CONTAS ----------
   Reaproveita .accounts-loading de /accounts (o "···" pulsante). Discreto e só no painel:
   o resto da página continua utilizável. */
.my-items-tela .my-items-carregando {
  padding: 1.5rem 1rem;
  text-align: center;
}

.my-items-tela .accounts-footer.is-carregando {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- /my-items: conteúdo centrado na vertical ----------
 * Igual ao de /accounts (ver o bloco equivalente no fim do accounts.css): o tema já deixa
 * `.page-content` ocupando a altura que sobra, então aqui só se torna essa área uma coluna
 * flexível e a página cresce dentro dela.
 *
 * Gancho `.my-items-tela`, exclusiva desta página — `.my-items-page` está em 79 views.
 * `flex: 1 0 auto` garante que os dois cards (581px) mantenham a altura quando a tela é
 * baixa, e a página volte a rolar normalmente.
 */
.page-content:has(> .my-items-tela) {
  display: flex;
  flex-direction: column;
}

.accounts-page.my-items-tela {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .page-content:has(> .my-items-tela) {
    display: block;
  }

  .accounts-page.my-items-tela {
    display: block;
    margin-bottom: 2rem;
  }
}