/* ============================================================
   PM SPORTS PARCEIROS — fluidez no toque (celular e tablet)
   Mesmas regras que resolveram o app Visual Vendas:

   1) Todo campo com 16px+: o iOS dá ZOOM NA PÁGINA INTEIRA quando
      um input com fonte menor recebe foco — era isso que desalinhava
      a tela e "bugava o teclado" no iPhone/iPad.
   2) touch-action:manipulation: o toque responde na hora (sem os
      300 ms de espera do duplo-toque) e o duplo-toque não dá zoom.
   3) Rolagem contida: a lista não "puxa" a página inteira junto.
   ============================================================ */

input, select, textarea {
  font-size: 16px !important;
}

*, *::before, *::after {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

/* alvos de toque decentes em telas pequenas */
@media (max-width: 768px) {
  button, .btn, .nav-link, a.button {
    min-height: 44px;
  }
  /* tabelas largas rolam dentro do próprio bloco, sem quebrar o layout */
  .table-responsive, .table-wrap, table {
    -webkit-overflow-scrolling: touch;
  }
}

/* imagens nunca estouram o container */
img { max-width: 100%; height: auto; }

/* ============================================================
   v2 — ALTURA REAL DA TELA NO MODO APLICATIVO (WebView)
   ------------------------------------------------------------
   Dentro do app das lojas, 100vh é MAIOR que a área visível
   (o WebView do iOS conta as barras do sistema). Resultado: as
   páginas ficavam com um "buraco" embaixo e a rolagem pulava.
   100dvh é a altura dinâmica REAL. Onde houver suporte, trocamos.
   ============================================================ */
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .page-content {
      height: calc(100dvh - var(--header-height-mobile, 60px)
              - env(safe-area-inset-top, 0px)) !important;
    }
  }
}

/* ============================================================
   CHAT EM TELA CHEIA (page=messages)
   ------------------------------------------------------------
   1) A lista de conversas ocupa TODA a altura útil — sem o
      espaço morto que ficava entre a lista e a barra de abas.
   2) Conversa aberta = tela inteira de verdade: cobre inclusive
      a barra de abas (position:fixed + z-index acima dela), com
      o campo de digitação preso no rodapé respeitando a área
      segura do iPhone. Voltar (‹) devolve a lista.
   ============================================================ */
@media (max-width: 768px) {
  /* a tela de mensagens não precisa do respiro para a tabbar:
     o próprio módulo desenha as abas internas dele */
  body[class*="page-messages"] .page-content {
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }
  @supports (height: 100dvh) {
    body[class*="page-messages"] .page-content {
      height: calc(100dvh - var(--header-height-mobile, 60px)
              - var(--tabbar-height, 64px)
              - env(safe-area-inset-top, 0px)) !important;
    }
  }

  /* conversa aberta: tela inteira, por cima da tabbar */
  body[class*="page-messages"] .chat-screen.active {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    z-index: 3000 !important;
    padding-top: env(safe-area-inset-top, 0px);
  }
  body[class*="page-messages"] .chat-input-area {
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* área de mensagens rola sozinha, sem arrastar a página */
  body[class*="page-messages"] .chat-messages-area {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}


/* ============================================================
   v3 — A CAUSA DO "PASSO O DEDO E NADA ACONTECE"
   ------------------------------------------------------------
   O app tinha DOIS roladores aninhados (.main-content com
   overflow-y:auto e .page-content com overflow-y:auto dentro
   dele). No WebView do iOS/Android o gesto ia para o de fora —
   que não tinha o que rolar — e o de dentro nunca recebia o
   toque: tela morta. Além disso, 100vh é maior que a área
   visível no modo aplicativo, deixando o body com uma sobra
   invisível que "roubava" o primeiro gesto.

   Regras (só em telas de TOQUE — desktop com mouse intacto):
   1. UM rolador só: .page-content. O .main-content vira moldura.
   2. body travado (position:fixed): impossível roubar o gesto.
   3. Altura real do aparelho (100dvh) na moldura.
   4. Blur/vidro morto em QUALQUER largura de toque — antes o
      iPad (769–1024px) ficava fora do corte de 820px e sofria
      com o backdrop-filter, o maior vilão de FPS do WebView.
   ============================================================ */
@media (pointer: coarse) {
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  body[class*="page-"] {
    position: fixed;
    inset: 0;
    width: 100%;
  }
  body[class*="page-"] .dashboard {
    height: 100%;
  }
  body[class*="page-"] .main-content {
    overflow: hidden !important;   /* deixa de disputar o gesto */
    min-height: 0;
  }
  body[class*="page-"] .page-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;       /* o flex dá a altura exata */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* o header tinha transform: scale(0.95) — cria camada de
     composição permanente e deixa o texto borrado no toque */
  body[class*="page-"] .main-header {
    transform: none !important;
  }
  /* vidro/blur desligado em toda tela de toque (inclui iPad) */
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass-effect { background: var(--bg-surface, #ffffff) !important; }
  [data-theme="dark"] .glass-effect,
  [data-theme="dark"] .main-header,
  [data-theme="dark"] .sidebar { background: var(--bg-surface, #14181d) !important; }
}
@supports (height: 100dvh) {
  @media (pointer: coarse) {
    body[class*="page-"] .dashboard { height: 100dvh; }
  }
}