/* ---------------------------------------------------------------------
   Layout responsivo — carregado depois de style.css, só entra em ação
   abaixo dos breakpoints. Objetivo: paridade total de funcionalidade no
   celular (nada escondido/removido), só reorganizando o layout onde o
   desktop pressupõe largura de sobra (topbar de 3 colunas, grids de 2-3
   colunas, imagem+detalhe lado a lado).
   --------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* ---------- Espaçamento geral ---------- */
  .content {
    padding: 12px;
  }

  .panel {
    padding: 16px;
  }

  /* ---------- Tela de login ---------- */
  .card {
    width: 90%;
    max-width: 320px;
    padding: 24px;
  }

  /* ---------- Topbar: empilha em 2 linhas ---------- */
  .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 16px;
  }

  .topbar h1 {
    font-size: 16px;
  }

  #global-search-wrapper {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin: 0;
  }

  #admin-email {
    display: none; /* email completo não cabe; o botão Sair já basta no celular */
  }

  /* ---------- Navegação por abas: tira só o excesso de espaço, mantém
     o scroll horizontal já existente (padrão comum e funcional em mobile) ---------- */
  .tab-button {
    padding: 10px 12px;
    font-size: 11px;
  }

  .subtab-button {
    padding: 7px 12px;
    font-size: 11px;
  }

  /* ---------- Grids de 2+ colunas viram 1 coluna ---------- */
  .info-grid {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .info-grid .info-label {
    margin-top: 6px;
  }

  .info-grid .info-label:first-child {
    margin-top: 0;
  }

  .permissions-grid {
    grid-template-columns: 1fr;
  }

  /* ---------- Painel de detalhe de carta: imagem em cima, texto embaixo ---------- */
  .card-detail-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .card-detail-content {
    width: 100%;
  }

  .card-detail-content .info-grid {
    text-align: left;
  }

  /* ---------- Slot de receita de coleção: carta em cima, quantidade embaixo ---------- */
  .recipe-slot {
    flex-direction: column;
  }

  /* ---------- Itens de lista com botões: permite quebrar linha sem cortar ---------- */
  #active-auctions-list li,
  #active-price-events-list li,
  #owners-list li,
  #player-inventory-list li,
  #admins-list li,
  #listings-list li {
    flex-wrap: wrap;
  }

  /* ---------- Grade de Prêmio Diário: mais compacta ainda ---------- */
  .daily-prize-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .daily-prize-slot {
    padding: 6px 4px;
  }

  /* ---------- Galeria: colunas um pouco menores pra caber mais por linha ---------- */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }

  /* ---------- Checkboxes de permissão/restrição: alvo de toque maior ---------- */
  .permission-checkbox input[type="checkbox"],
  #restr-edit-content input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 400px) {
  .topbar h1 {
    font-size: 14px;
  }

  .daily-prize-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}