/*
 * O cartao compacto da lista, e a pagina de UM servidor: cabecalho, abas e blocos.
 *
 * ## O cartao tem a cara do servidor do dono
 *
 * Ate 04/09/2026 todo cartao era um rack generico com o apelido embaixo. Quem tem tres
 * servidores no mesmo Discord nao reconhecia de relance de quem eram. Agora o tile e o icone da
 * guild do dono (quando o painel dele a reportou) e a linha de baixo diz o nome da comunidade.
 * Os dois textos convivem: o apelido distingue os servidores entre si; o icone e o nome dizem a
 * quem pertencem. Sem comunidade, o cartao e exatamente o de sempre.
 */

/* ------------------------------------------------------------------- cartao compacto */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.cartao-servidor {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: linear-gradient(180deg, var(--vidro-alto), var(--vidro) 60%);
  box-shadow: var(--relevo), var(--sombra-cartao);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--t-rapido) var(--entrada),
    box-shadow var(--t-medio) var(--saida),
    transform var(--t-medio) var(--saida);
  animation: surgir-acima var(--t-lento) var(--saida) both;
}

.cartao-servidor:hover {
  border-color: var(--linha-viva);
  box-shadow: var(--relevo), var(--sombra-cartao-alta);
  transform: translateY(-3px);
}

.cartao-servidor:focus-visible { border-color: var(--roxo-claro); }

/* A entrada em onda, com teto: doze cartoes entram em 330ms, e o decimo terceiro junto. */
.grade > .cartao-servidor:nth-child(2) { animation-delay: 40ms; }
.grade > .cartao-servidor:nth-child(3) { animation-delay: 80ms; }
.grade > .cartao-servidor:nth-child(4) { animation-delay: 120ms; }
.grade > .cartao-servidor:nth-child(5) { animation-delay: 160ms; }
.grade > .cartao-servidor:nth-child(n + 6) { animation-delay: 200ms; }

/*
 * A faixa e severidade, e nao enfeite: e o unico sinal que se le sem focar no cartao. O estado
 * SAUDAVEL nao pinta nada — numa grade de doze servidores bons, a faixa roxa era ruido
 * continuo, e o unico quebrado tinha de competir com ela.
 */
.cartao-servidor .faixa { height: 2px; background: transparent; }
.cartao-servidor.alerta .faixa { background: linear-gradient(90deg, var(--atencao), transparent 85%); }
.cartao-servidor.parado .faixa { background: linear-gradient(90deg, var(--erro), transparent 85%); }

/* O que precisa de atencao sobe para o inicio da grade — por `order`, e nao no JS, para a
   animacao do pulso nao reiniciar. */
.cartao-servidor.parado { order: -2; }
.cartao-servidor.alerta { order: -1; }

.cartao-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
}

.serv-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--raio-m);
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, rgba(168, 85, 247, 0.24), rgba(124, 58, 237, 0.12));
  color: var(--roxo-claro);
  box-shadow: var(--relevo), 0 0 0 1px color-mix(in srgb, var(--roxo) 25%, transparent);
}

.serv-tile svg { width: 18px; height: 18px; }

/* O texto encolhe; o pulso, nao. Sem `min-width: 0` um nome comprido empurrava o pulso para
   fora do cartao. */
.serv-texto { flex: 1 1 auto; min-width: 0; }

/* O nome e o lapis na mesma linha. O nome encolhe; o lapis nunca. */
.serv-nome-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/*
 * O lapis so aparece no hover da linha, ou com foco de teclado.
 *
 * Renomear acontece duas vezes por servidor na vida. Um botao sempre visivel ao lado do titulo
 * competiria com o nome pela atencao, todo dia, para uma acao que quase nunca acontece — e o
 * `:focus-visible` garante que quem navega por teclado o alcance mesmo assim.
 */
.lapis {
  flex: none;
  border: 0;
  padding: 2px 4px;
  border-radius: var(--raio-p, 6px);
  background: transparent;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}

.serv-nome-linha:hover .lapis,
.lapis:focus-visible {
  opacity: 0.75;
}

.lapis:hover { opacity: 1; background: var(--elevado, rgba(255, 255, 255, 0.06)); }
.lapis[disabled] { opacity: 0.4; cursor: default; }

.serv-nome {
  font-family: var(--titulo);
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.serv-abaixo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  color: var(--texto-fraco);
  font-size: 0.8rem;
  min-width: 0;
}

.serv-abaixo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serv-abaixo .versao { color: var(--texto-tenue); font-size: 0.7rem; flex: none; }
.serv-abaixo .versao:not(:first-child)::before { content: '·'; margin-right: 8px; }
/* Sem comunidade o primeiro span esta `hidden`, e o ponto ficaria sozinho na frente da versao. */
.serv-abaixo > [hidden] + .versao::before { content: none; }

.cartao-cabeca .pulso { margin-left: auto; }

.linhas { border-top: 1px solid var(--linha); padding: 4px 18px; }

.linha-dado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 55%, transparent);
}

.linha-dado:last-child { border-bottom: none; }

.linha-dado .rot {
  font-family: var(--maquina);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.linha-dado .val {
  font-family: var(--maquina);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Travessao, e nao zero. "Ninguem jogando" e "nao consigo perguntar" sao coisas diferentes. */
.linha-dado .val.desconhecido { color: var(--texto-fraco); }

.nota-cartao {
  margin: 0;
  padding: 10px 18px 0;
  color: var(--texto-fraco);
  font-size: 0.82rem;
  line-height: 1.5;
}

.cartao-pe {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  margin-top: auto;
}

.cartao-pe .abrir {
  margin-left: auto;
  color: var(--roxo-claro);
  font-size: 0.86rem;
  font-weight: 600;
  transition: transform var(--t-rapido) var(--saida);
}

.cartao-servidor:hover .abrir { transform: translateX(3px); }

/* ---------------------------------------------------------------- pagina do servidor */

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-fraco);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.voltar:hover { color: var(--texto); }

.serv-cabeca {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}

.serv-cabeca > div { min-width: 0; flex: 1; }
.serv-cabeca .serv-tile { width: 52px; height: 52px; border-radius: 14px; }
.serv-cabeca .serv-tile svg { width: 24px; height: 24px; }

.serv-cabeca h1 {
  font-family: var(--titulo);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.serv-cabeca .serv-abaixo { font-size: 0.86rem; }
.serv-cabeca .pulso { margin-left: auto; align-self: center; }

/*
 * Duas camadas de navegacao, e cada uma responde a uma pergunta diferente.
 *
 *   nivel 1 (.abas)      ancorado no topo    — "que parte do servidor?"
 *   nivel 2 (.sub-abas)  flutuando no rodape — "que pagina desta parte?"
 *
 * O nivel 2 flutua porque Settings e Shop sao formularios longos: ancorado, ele sairia da tela
 * justamente quando o dono precisa dele — e o polegar ja mora ali no celular.
 */
.abas {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--linha);
  margin: 20px 0 24px;
}

.abas .aba {
  border-radius: var(--raio-p) var(--raio-p) 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 11px 14px;
  font-size: 0.9rem;
  color: var(--texto-fraco);
}

.abas .aba:hover { color: var(--texto); background: rgba(168, 85, 247, 0.06); }

.abas .aba[aria-selected='true'] {
  background: none;
  color: var(--texto);
  border-bottom-color: var(--roxo-claro);
  box-shadow: 0 2px 12px -6px var(--roxo-claro);
  font-weight: 650;
}

/*
 * O que restou da barra flutuante do rodape.
 *
 * A navegacao de nivel 2 subiu para dentro de `.secao-topo` (ver `secao.css`) — flutuando ela
 * cobria a ultima linha da lista, disputava espaco com as duas barras de gravar e ficava longe
 * do titulo que diz onde se esta. Estas regras seguem valendo para a ROLAGEM lateral em tela
 * estreita, que a pilula continua precisando.
 */
.sub-abas {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--roxo) 60%, var(--borda));
  border-radius: var(--raio-pilula);
  z-index: 20;
  box-shadow: var(--relevo), var(--sombra-flutuante);
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  scrollbar-width: none;
}

.sub-abas::-webkit-scrollbar { display: none; }

/* A folga do rodape acompanha o que esta REALMENTE flutuando ali. */
body.com-abas .conteudo { padding-bottom: 96px; }
body.com-abas:has(.barra-salvar:not([hidden])) .conteudo { padding-bottom: 150px; }
body.com-abas:has(#barra-salvar-biblioteca:not([hidden])) .conteudo { padding-bottom: 208px; }

/* A biblioteca sobe uma faixa: as duas barras de salvar podem estar no ar ao mesmo tempo. */
#barra-salvar-biblioteca { bottom: 132px; }

/* O aviso flutua ACIMA da pilha, e nao por cima dela. */
body.com-abas #avisos { bottom: 192px; }

.aba {
  padding: 8px 16px;
  min-height: 36px;
  border-radius: var(--raio-pilula);
  border: none;
  background: none;
  box-shadow: none;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: background var(--t-rapido) var(--entrada), color var(--t-rapido) var(--entrada);
}

.aba:hover { color: var(--texto); background: rgba(168, 85, 247, 0.08); }

.aba[aria-selected='true'] {
  background: linear-gradient(180deg, #8B5CF6, var(--roxo));
  color: #fff;
  font-weight: 650;
  box-shadow: var(--relevo);
}

.bloco-aba { margin-top: 4px; }

.painel-titulo {
  font-family: var(--titulo);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.painel-sub {
  color: var(--texto-fraco);
  margin: 0 0 20px;
  font-size: 0.89rem;
  max-width: 62ch;
}

.bloco {
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: var(--vidro);
  box-shadow: var(--relevo);
  overflow: hidden;
}

/* As listas da loja: espacamento, e nao moldura. Os itens ja sao cartoes com borda propria. */
#lista-produtos.bloco,
#lista-categorias.bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* Duas colunas a partir de 1100px, tres a partir de 1500. As categorias ficam de fora. */
@media (min-width: 1100px) {
  #lista-produtos.bloco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1500px) {
  #lista-produtos.bloco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* O item ABERTO ocupa a largura inteira: o formulario dele ja e uma grade de duas colunas. */
#lista-produtos.bloco > .item-loja:has(.item-alvo[aria-expanded='true']) { grid-column: 1 / -1; }
#lista-produtos.bloco > .busca-loja { grid-column: 1 / -1; }
#lista-produtos.bloco > .vazio-bloco { grid-column: 1 / -1; }

/* O escalonamento da entrada, com TETO. */
#lista-produtos > .item-loja:nth-child(1) { --i: 0; }
#lista-produtos > .item-loja:nth-child(2) { --i: 1; }
#lista-produtos > .item-loja:nth-child(3) { --i: 2; }
#lista-produtos > .item-loja:nth-child(4) { --i: 3; }
#lista-produtos > .item-loja:nth-child(5) { --i: 4; }
#lista-produtos > .item-loja:nth-child(6) { --i: 5; }
#lista-produtos > .item-loja:nth-child(7) { --i: 6; }
#lista-produtos > .item-loja:nth-child(8) { --i: 7; }
#lista-produtos > .item-loja:nth-child(n + 9) { --i: 8; }

#lista-categorias > .item-loja:nth-child(1) { --i: 0; }
#lista-categorias > .item-loja:nth-child(2) { --i: 1; }
#lista-categorias > .item-loja:nth-child(3) { --i: 2; }
#lista-categorias > .item-loja:nth-child(4) { --i: 3; }
#lista-categorias > .item-loja:nth-child(n + 5) { --i: 4; }

/* No telefone as abas rolam de lado em vez de quebrar em duas linhas. */
@media (max-width: 860px) {
  .abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 14px 0 18px;
  }

  .abas::-webkit-scrollbar { display: none; }
  .abas .aba { white-space: nowrap; flex: none; padding: 10px 12px; }

  .serv-cabeca { gap: 12px; }
  .serv-cabeca .serv-tile { width: 44px; height: 44px; }
  .serv-cabeca h1 { font-size: 1.35rem; }
  .grade { grid-template-columns: 1fr; }
}