/* ══════════════════════════════════════════════════════════════════════════════════════════
   mobile.css — a camada que faz o CRM e os dashes se comportarem como app no celular e no iPad.
   24/09/2026. Ordem dele: "que fique nesse padrão mobile friendly e usável direitinho em ipad
   também, pra que a experiência seja maravilhosa, como se fosse um aplicativo".

   🚨 POR QUE UMA CAMADA GLOBAL E NÃO 39 ARQUIVOS EDITADOS: o problema é o MESMO em todos —
   tabela que não rola, alvo de toque pequeno demais, conteúdo sob o notch. Consertar no lugar
   comum conserta também as telas que eu ainda não vi, e as que forem criadas depois.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. NUNCA rolar a página inteira na horizontal ──────────────────────────────────────────
   É o defeito que mais faz um site parecer quebrado no celular: um elemento largo demais e a
   página inteira desliza, levando o cabeçalho junto. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── 2. O ENTALHE DO IPHONE ────────────────────────────────────────────────────────────────
   Com `viewport-fit=cover` o conteúdo vai até a borda — o que é o visual de app — mas sem estas
   margens o topo fica ESCONDIDO atrás do entalhe e o rodapé atrás da barra de gestos. */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .safe-top    { padding-top:    env(safe-area-inset-top); }
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
  header, .app-header, nav.topbar { padding-top: env(safe-area-inset-top); }
}

/* ── 3. TABELA QUE ROLA SOZINHA ────────────────────────────────────────────────────────────
   O JS embrulha cada tabela em `.tbl-scroll`. Aqui ela ganha rolagem com inércia (o toque do
   iOS) e a barra some no desktop. */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* 🚨 O DEFEITO QUE SÓ O TESTE NO NAVEGADOR MOSTROU (24/09): metade das telas JÁ tinha um
   `overflow-x-auto` em volta da tabela — e mesmo assim NÃO rolava. Medido no dashboard a 375px:
   tabela de 716px dentro de um container de 316px, `overflow-x: auto`, e `scrollWidth ==
   clientWidth`, ou seja ZERO para rolar.
   A razão: sem `min-width`, a tabela ESPREME para caber no container. As colunas se esmagam, o
   texto quebra em vertical e fica ilegível — e como nada transborda, não há rolagem.
   ➡️ `min-width: max-content` devolve à tabela a largura natural dela. Aí sim o container tem o
   que rolar. Vale para o container que eu crio E para os que já existiam. */
.tbl-scroll > table,
.overflow-x-auto > table,
.overflow-auto > table { min-width: max-content; }

/* a mesma regra quando há um <div> intermediário entre o container e a tabela */
@media (max-width: 1024px) {
  .overflow-x-auto table, .overflow-auto table { min-width: max-content; }
}
@media (max-width: 1024px) {
  .tbl-scroll { scrollbar-width: thin; }
  /* a sombra da direita avisa que tem mais coisa pro lado — sem ela ninguém descobre que rola */
  .tbl-scroll.tem-mais { background:
      linear-gradient(to left, rgba(0,0,0,.10), rgba(0,0,0,0) 24px) right / 24px 100% no-repeat; }
}

/* ── 4. ALVO DE TOQUE ──────────────────────────────────────────────────────────────────────
   A Apple recomenda 44px e o Google 48. Botão de 28px vira erro de clique constante. */
@media (max-width: 1024px) {
  button, a.btn, .btn, [role="button"], input[type="submit"], input[type="button"],
  select, summary { min-height: 40px; }
  table button, table a.btn, td button { min-height: 34px; }   /* dentro de tabela, mais contido */
  .icon-btn, button.icon { min-width: 40px; }
}

/* ── 5. O ZOOM AUTOMÁTICO DO iOS AO FOCAR CAMPO ────────────────────────────────────────────
   🚨 O Safari dá zoom sozinho em qualquer campo com fonte < 16px, e depois NÃO volta. A tela
   fica torta e o usuário acha que quebrou. 16px é o mínimo que evita isso. */
@media (max-width: 1024px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── 6. MODAL VIRA FOLHA QUE SOBE (padrão de app) ──────────────────────────────────────────
   Modal centralizado de desktop, no celular, fica espremido e com o teclado por cima. */
@media (max-width: 640px) {
  .modal, .modal-box, [role="dialog"] > div, .dialog-panel {
    max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ── 7. iPAD: aproveitar a largura ─────────────────────────────────────────────────────────
   Entre 768 e 1024 o iPad em retrato cabe duas colunas; forçar uma desperdiça metade da tela. */
@media (min-width: 768px) and (max-width: 1024px) {
  .container, .max-w-7xl, .max-w-6xl { padding-left: 1rem; padding-right: 1rem; }
}

/* ── 8. Rolagem com inércia em qualquer painel que role ────────────────────────────────────── */
.overflow-y-auto, .overflow-auto, .overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* ── 9. Nada de seleção acidental ao tocar em botão ───────────────────────────────────────── */
button, .btn, [role="button"] { -webkit-tap-highlight-color: rgba(0,0,0,.06); }

/* ── 10. MARGEM NEGATIVA QUE EMPURRA O CONTEÚDO PRA FORA DA TELA ───────────────────────────
   🚨 MEDIDO NO NAVEGADOR A 375px (24/09), no /chat: um bloco `pt-4 -mx-6 -mb-6 flex` com
   `margin-left: -24px` e `margin-right: -24px` ficava com 399px de largura e `left: -12px`.
   No desktop isso é de propósito: a margem negativa faz o painel "sangrar" até a borda do card,
   cancelando o `px-6` do pai. Só que numa tela de 375px não há folga nenhuma pra cancelar — os
   12px da esquerda da lista de conversas ficavam CORTADOS pelo `overflow-x: hidden` da regra 1.
   E era uma causa só: os 312 elementos que a auditoria achou "presos" eram todos filhos DESTE.
   Ou seja: o defeito não aparecia como rolagem (o `hidden` engolia), aparecia como conteúdo
   sumido na borda — o tipo de coisa que só a medição do DOM acha, nunca o olho.
   ➡️ No celular e no iPad em retrato, a margem negativa horizontal vira zero. A vertical fica:
   `-mb-6` não empurra nada pra fora da largura. */
@media (max-width: 1024px) {
  .-mx-1, .-mx-2, .-mx-3, .-mx-4, .-mx-5, .-mx-6, .-mx-8, .-mx-10, .-mx-12,
  .-ml-4, .-ml-6, .-ml-8, .-mr-4, .-mr-6, .-mr-8 {
    margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* ── 11. BOTÃO DE 11 PIXELS DENTRO DE TABELA ───────────────────────────────────────────────
   🚨 MEDIDO A 375px no /relatorios/holymanager (24/09): 194 botões com 11px de LARGURA por
      34px de altura. A altura já estava certa (é o valor que a regra 4 define de propósito
      para botão dentro de tabela), mas 11px de largura é um alvo que ninguém acerta com o dedo
      — a Apple recomenda 44px e o Google 48. São os botõezinhos de um caractere (seta, "×").
   ➡️ Largura mínima igual à altura: o alvo fica quadrado e alcançável, e como a tabela rola
      (regra 3) ganhar alguns pixels de largura não estraga mais nada. */
@media (max-width: 1024px) {
  table button, table a.btn, table [role="button"] { min-width: 34px; }
}

/* ── 12. O ALVO ERA ALTO E FINO ─────────────────────────────────────────────────────────────
   🚨 MEDIDO A 375px na varredura de 24/09. A regra 4 cuidou da ALTURA e funcionou: todos os
      botões chegaram a 40px de alto. Só que eu nunca tinha medido a LARGURA, e era ali que
      estava o problema — alvos de 40px de alto por:
         /configuracoes/pipelines →  54 botões de  9px de largura, 35 de 11px, 31 de 19px
         /leads/kanban            → 5.842 botões entre 27 e 32px
         /chat                    →   300 botões de 28px
      Um alvo de 9px de largura ninguém acerta com o dedo, por mais alto que seja. A regra
      `.icon-btn, button.icon { min-width: 40px }` não alcançava nenhum deles: são botões de um
      caractere só, sem classe de ícone nenhuma.
   ➡️ 34px de piso nas duas direções. Por que 34 e não os 44 da Apple: a ALTURA tem para onde
      crescer (as linhas empilham), mas a LARGURA numa tela de 375px é disputada — forçar 44
      empurraria as linhas densas do Kanban e do chat pra fora. 34px conserta os casos de 9 e
      11px, que são os impossíveis, e mexe no máximo 6px nos que já estavam em 28. */
@media (max-width: 1024px) {
  button, a.btn, .btn, [role="button"], input[type="submit"], input[type="button"], summary {
    min-width: 34px;
  }
}