/* ==========================================================================
   O sistema no celular
   --------------------------------------------------------------------------
   O app foi desenhado para monitor: `.app` reserva 222px fixos para a barra
   lateral em QUALQUER largura. Num telefone de 375px sobram 153px para tudo
   — funil, tabelas, formulários. Não é questão de acabamento: não cabe.

   Este arquivo existe separado de propósito. Tudo aqui está dentro de
   media queries, então nada muda no computador; se algo der errado no
   celular, basta remover a linha do index.html e o sistema volta ao que era.

   O corte é 900px: acima disso, monitor e tablet deitado; abaixo, telefone e
   tablet em pé.
   ========================================================================== */

/* O botão do menu e o véu não existem no computador. Ficam escondidos aqui,
   fora de qualquer media query, e só a regra de celular os traz de volta.
   Não uso a classe `.hidden` porque ela é `display:none !important` e
   venceria a media query. */
.menu-btn, .veu { display: none; }

@media (max-width: 900px) {

  /* ---------------------------------------------------------- o esqueleto */

  /* A barra lateral deixa de ser coluna e vira gaveta: fica fora da tela e
     entra por cima quando chamada. O conteúdo passa a ter a largura inteira. */
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    max-width: 84vw;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  }
  .sidebar.is-aberta { transform: none; }

  /* o véu escuro atrás da gaveta: some com um toque fora dela */
  .veu {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(8, 20, 40, .5);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .veu.is-aberta { opacity: 1; pointer-events: auto; }

  /* no telefone o alvo é o dedo, não o ponteiro */
  .sidebar__nav a { padding: 13px 12px; font-size: 15px; }
  .sidebar__nav svg { width: 19px; height: 19px; }

  /* ------------------------------------------------------------ cabeçalho */

  .topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .topbar h2 { font-size: 17px; }
  .topbar p  { font-size: 11.5px; }

  /* O aperto precisa atravessar a cadeia inteira. A barra de ações mora dentro
     de um `.row`, que mora dentro do `.topbar` — e basta UM elo sem
     `min-width: 0` para o conjunto voltar a crescer até caber tudo, empurrando
     a página de lado. Por isso os três, não só o de dentro. */
  .topbar { min-width: 0; }
  .topbar > .row { min-width: 0; flex: 1 1 auto; }
  .topbar > div:not(.row) { min-width: 0; }        /* o bloco do título */
  .topbar h2, .topbar p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* o botão que abre a gaveta; no computador ele nem existe */
  .menu-btn {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--border-2);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
  }
  .menu-btn svg { width: 20px; height: 20px; }

  /* As ações da tela (botões "Nova empresa", "Importar"...) não cabem ao lado
     do título. Descem para uma faixa própria, que rola de lado se precisar. */
  .topbar__actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Sem `min-width: 0` o `overflow-x` não serve para nada: item de flex tem
       largura mínima igual ao conteúdo, então a barra cresce até caber os
       botões todos e empurra a página inteira para o lado, em vez de rolar
       dentro de si mesma. Mesma armadilha do `1fr` no grid. */
    min-width: 0;
    flex: 1 1 auto;
  }
  .topbar__actions::-webkit-scrollbar { display: none; }
  .topbar__actions .btn { white-space: nowrap; }

  .view { padding: 14px; gap: 14px; }

  /* ------------------------------------------------------------- conteúdo */

  .card__body { padding: 14px; }
  .grid, .grid--2, .grid--3, .grid--4, .grid--main { grid-template-columns: 1fr; }

  /* botão de dedo: 44px é a medida que a Apple e o Google usam, e existe
     porque abaixo disso o toque erra */
  .btn { min-height: 42px; padding: 10px 16px; }
  .icon-btn, .atalho { min-width: 40px; min-height: 40px; }
  .atalho svg { width: 17px; height: 17px; }

  /* campos de formulário: 16px impede o iPhone de dar zoom sozinho ao focar */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  textarea { min-height: 90px; }

  /* --------------------------------------------------------------- janelas */

  /* Modal flutuante no meio da tela não funciona no telefone: sobra pouco
     espaço e o teclado cobre metade. Vira tela cheia. */
  .modal {
    width: 100%;
    max-width: none;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .modal__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal__foot {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .modal__foot .btn { flex: 1; }

  /* ------------------------------------------------------------- tabelas */

  /* Oito colunas não cabem em 375px. A tabela deixa de ser tabela e cada
     linha vira um cartão — o mesmo HTML, outra apresentação.
     As colunas escondidas são as de consulta (concorrente, potencial,
     responsável); quem está na rua quer nome, contato e cidade. */
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }

  .table tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .table tr:hover { background: var(--surface); }

  .table td {
    border: 0;
    padding: 2px 0;
    text-align: left !important;
  }
  .table td:empty { display: none; }

  /* a primeira coluna é sempre o nome: vira o título do cartão */
  .table td:first-child { font-size: 15.5px; margin-bottom: 6px; }

  /* colunas de escritório saem do cartão */
  .table td:nth-child(5),   /* concorrente */
  .table td:nth-child(6),   /* potencial   */
  .table td:nth-child(7) {  /* responsável */
    display: none;
  }

  /* contato e atalhos ganham respiro e o WhatsApp fica bem à mão */
  .contato { flex-wrap: wrap; gap: 8px; }
  .contato__atalhos { margin-left: auto; gap: 8px; }

  /* --------------------------------------------------------------- funil */

  /* As etapas continuam lado a lado, mas deslizam com o dedo e cada uma
     encaixa na tela. Empilhar em coluna única faria perder a noção de funil,
     que é justamente a razão da tela existir. */
  .board {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
  }
  .board > * {
    scroll-snap-align: start;
    min-width: 84vw;
    max-width: 84vw;
  }

  /* --------------------------------------------------------------- ficha */

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

  /* Rótulo em cima, valor embaixo. Lado a lado, o rótulo fixo de 150px come
     metade da largura do telefone e sobra uma tira estreita para o valor —
     e-mail e razão social ficam picotados em quatro linhas. Empilhado, cada
     um usa a largura inteira. */
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
  .dl dd { font-size: 14px; margin-bottom: 12px; }
  .dl dd:last-child { margin-bottom: 0; }

  /* ----------------------------------------------------------- notificações */

  .bell__panel {
    position: fixed;
    inset: auto 8px 8px 8px;
    width: auto;
    max-height: 70vh;
  }
}

/* Telas bem estreitas (iPhone SE e semelhantes) */
@media (max-width: 380px) {
  .view { padding: 10px; }
  .card__body { padding: 12px; }
  .topbar h2 { font-size: 16px; }
}

/* No toque não existe "passar o mouse por cima": o que dependia de hover
   precisa estar sempre visível, senão vira função que ninguém encontra. */
@media (hover: none) {
  .atalho--secundario { opacity: 1; }
  .table tbody tr:hover { background: inherit; }
}