/* =====================================================================
   CAMADA DE CELULAR
   Entra por último e vive INTEIRA dentro de media queries: no desktop
   este arquivo não muda um pixel sequer. Alinhada em 860px, que é
   onde a barra lateral vira barra de cima (ui-layout.css:651) — daí
   pra baixo é a versão de celular, e ela precisa valer pra qualquer
   largura: do 320 de um aparelho pequeno ao 860 de um tablet em pé.

   Cuidado com o layout.css:147: ele tem um bloco em 900px que PARECE
   ser o corte, mas é letra morta — o ui-layout.css carrega depois e
   redefine .sidebar sem condição nenhuma, então entre 861 e 900 quem
   manda ainda é a barra lateral de monitor. Medido: em 880 ela é
   244x1180 e fixa; em 840 é 840x81 e deitada.
   ===================================================================== */

@media (max-width: 860px) {
  /* -------------------------------------------------------------------
     1. Nada empurra a página pro lado

     O site monta várias fileiras de botão com `display:flex` escrito no
     próprio elemento (37 delas) e sem quebra de linha. No desktop cabem;
     no celular empurravam a página inteira — em 320px o Admin rolava
     103px pro lado. Aqui todas passam a quebrar. Tabela e quadro de boss
     ficam de fora: eles têm o próprio rolador e devem continuar assim.
     ------------------------------------------------------------------- */
  .page-section [style*="display:flex"]:not(.table-wrap):not(.boss-board),
  .content-header,
  .modal-quick-actions,
  .filter-chip-row,
  .dkp-form-row {
    flex-wrap: wrap;
  }

  /* O rolador horizontal que SOBRA é sempre de um elemento só (tabela,
     quadro de boss, abas) — nunca do corpo da página. */
  body {
    overflow-x: hidden;
  }

  .table-wrap,
  .subtabs,
  .tabs,
  .boss-board-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* -------------------------------------------------------------------
     1b. A barra de cima

     O item de menu vem de sidebar.css:55 com `width: 100%`, que é o
     certo pra barra em pé: cada item ocupa a coluna inteira. Deitada,
     porém, ele fica dentro de um flex row que se mede pelo conteudo,
     e aí os dois se perseguem — o item pede 100% do pai, o pai cresce
     pra caber o item. Davam 990px CADA UM: a barra ficava com 9000px
     de rolagem e só o "Painel" aparecia, o resto do menu sumia pra
     direita. Com largura de conteudo, os nove cabem em ~990px e a
     barra rola de verdade.
     ------------------------------------------------------------------- */
  .sidebar-nav {
    flex-direction: row;
    flex: none;
  }

  .nav-item {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Mesma coisa embaixo: Claro/Escuro, runas, som e Sair viram uma
     fileira — senão empilham dentro de uma barra de 71px de altura. */
  .sidebar-footer {
    flex-direction: row;
    align-items: center;
  }

  /* -------------------------------------------------------------------
     2. Campo de formulário com 16px

     Abaixo de 16px o Safari do iPhone dá zoom sozinho quando a pessoa
     toca no campo, e a página fica torta até ela fechar o teclado. 16px
     é o mínimo que não dispara isso. Vale pra todo campo, inclusive os
     de data e os de dentro de janela.
     ------------------------------------------------------------------- */
  .input,
  .select,
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="password"] {
    font-size: 16px;
  }

  .input,
  .select {
    height: 46px;
  }

  /* -------------------------------------------------------------------
     3. Alvo de toque

     Dedo não é cursor. Tudo que se clica passa de 40px, e o que era
     miúdo demais (ícone de 20px, estrela de favorito, remover da PT)
     cresce sem mudar o desenho: a área aumenta em volta do ícone.
     ------------------------------------------------------------------- */
  .btn {
    height: 46px;
    padding: 0 20px;
    font-size: 14px;
  }

  .btn-sm {
    height: 40px;
    padding: 0 15px;
    font-size: 13px;
  }

  .btn-block {
    width: 100%;
  }

  .chip,
  .filter-chip,
  .subtab-item,
  .tab {
    min-height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
  }

  .nav-item {
    min-height: 44px;
  }

  /* O par Claro/Escuro vem com 30px (ui.css:722) e aparece em dois
     lugares que importam no celular: a barra de cima do painel e o canto
     das telas de entrada. */
  .segmented button {
    min-height: 42px;
  }

  /* Barra de cima: "Chuva de runas", "Som de atividade" e "Sair" vinham
     com 36px (ui-layout.css:152) e a barra é justamente onde o dedo
     bate primeiro no celular. */
  .side-btn,
  .sound-toggle-btn,
  .logout-btn {
    height: 44px;
  }

  /* O lápis fica em cima do canto do avatar, então não pode virar um
     botão de 40px — cobriria o rosto. 34px já é o dobro de área pro
     dedo sem mudar o desenho do cartão. */
  .sidebar-profile-edit-btn {
    width: 34px;
    height: 34px;
  }

  /* Timer Boss: no celular o quadro é só pra olhar e marcar boss. Resetar
     mapa, Remover PISO e Adicionar PISO ficam de fora — são ajustes de
     administração do quadro, fáceis de tocar sem querer com o dedo, e o
     Resetar apaga o mapa inteiro. A fileira só tem esses três botões
     (board.js#renderShell); no desktop continua como sempre foi. */
  .boss-board-controls {
    display: none;
  }

  /* O painel de Rotação aperta os botões em 28px no desktop
     (boss-timer.css) — no celular eles voltam ao tamanho de toque. */
  .rotation-panel-actions .btn {
    height: 40px;
    padding: 0 14px;
  }

  /* Botão que é só um ícone: a caixa cresce, o desenho não. */
  .icon-btn,
  .boss-card-icon-btn,
  .auction-favorite-btn,
  .pt-player-remover,
  .pt-bloco-excluir,
  .modal-close {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Montar PT: com a caixa de 40px o × desce até a linha de Nv/power e
     ficava em cima do % de participação. Classe e % abrem espaço pra ele,
     alinhados um embaixo do outro. */
  .pt-player-main,
  .pt-player-info {
    padding-right: 38px;
  }

  /* Texto que funciona como botão (ver participantes, por exemplo) —
     ganha altura de toque sem virar um botão visualmente. */
  .link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* -------------------------------------------------------------------
     4. Janelas

     `100vh` no celular conta a barra de endereço que some e volta, então
     a janela nascia mais alta que a tela e o botão de baixo ficava fora
     do alcance. `dvh` mede a altura que existe de verdade agora. Em tela
     pequena a janela também encosta embaixo, como uma gaveta, que é onde
     o polegar chega.
     ------------------------------------------------------------------- */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal-card {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    /* .modal-body ja tem 20px embaixo (ui.css:1213); aqui entra so o
       recorte do aparelho, pra ultima linha nao ficar debaixo da barra
       de gestos do iPhone. Sem recorte, isto e zero. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* -------------------------------------------------------------------
     5. Respiro

     Margem lateral única, em todas as páginas, pra nada encostar na
     borda do aparelho — inclusive nos recortes de tela.
     ------------------------------------------------------------------- */
  .main-content {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .card,
  .section-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Título de página menor, pra não comer três linhas em aparelho
     estreito. Escala com a largura em vez de saltar em degraus. */
  .page-header h2,
  .content-header > div > h2 {
    font-size: clamp(21px, 6.2vw, 26px);
  }

  /* -------------------------------------------------------------------
     6. Tabela em tela estreita

     Continua rolando na horizontal dentro da própria caixa (virar cartão
     mudaria o desktop junto), mas ganha duas coisas: a primeira coluna
     fica presa, pra não se perder de quem é a linha ao arrastar, e uma
     sombra na direita avisa que ainda tem conteúdo.
     ------------------------------------------------------------------- */
  .table-wrap {
    position: relative;
    background-image: linear-gradient(to left, var(--surface), transparent 28px);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 28px 100%;
    background-attachment: local;
  }

  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }

  .data-table thead th:first-child {
    background: var(--surface-hover);
    z-index: 2;
  }

  .data-table th,
  .data-table td {
    padding: 11px 12px;
  }
}

/* ---------------------------------------------------------------------
   Aparelho pequeno (iPhone SE, Android de entrada). Só aperta o que
   precisa: nada muda de lugar em relação ao bloco acima.
   --------------------------------------------------------------------- */
@media (max-width: 380px) {
  .main-content {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  .card,
  .section-block {
    padding-left: 13px;
    padding-right: 13px;
  }

  .btn {
    padding: 0 15px;
  }

  .btn-sm {
    padding: 0 11px;
    font-size: 12.5px;
  }

  /* Filtro de data lado a lado não cabe: passa a ocupar a linha. */
  .minhas-filtro .input[type="date"],
  .rel-filtro .input[type="date"],
  #ranking-date-filter .input {
    width: 100%;
  }

  .minhas-filtro .field,
  .rel-filtro .field {
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------------
   Celular deitado: pouca altura sobrando. A janela volta a ser centrada
   e o cabeçalho para de grudar, senão não sobra tela pro conteúdo.
   --------------------------------------------------------------------- */
@media (max-height: 460px) and (orientation: landscape) {
  .modal-overlay {
    align-items: center;
    padding: 12px;
  }

  .modal-card {
    max-height: 96dvh;
    border-radius: var(--r-lg);
  }

  .sidebar {
    position: static;
  }
}