/* mobile.css — ajustes responsivos e PWA para celular (Android/iPhone) */
/* OBS: o comportamento do MENU (barra inferior) está no <style> do menu.php,
   pra garantir prioridade. Aqui ficam os demais ajustes mobile. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 720px) {
  body { -webkit-text-size-adjust: 100%; }

  .wrap { padding: 12px !important; padding-top: calc(12px + var(--safe-top)) !important; }

  /* Tabelas largas viram scroll horizontal suave */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table::-webkit-scrollbar { height: 6px; }
  table::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

  /* Grids viram 1 coluna */
  .cards-grid, .if-list-grid, .lista-conc,
  .ap-portas-grid { grid-template-columns: 1fr !important; }

  .if-card { padding: 12px !important; }

  h1 { font-size: 18px !important; }
  h2 { font-size: 16px !important; }

  .abas-topo, .tabs, .grupo-chips { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Modais ocupam quase a tela toda */
  #modalSwitch > div, #modalConsole > div, #modalRota > div,
  #modalOpPorta > div, #modalEditar {
    max-width: 100% !important; width: calc(100% - 24px) !important;
    margin: 12px auto !important;
  }

  .card { border-radius: 12px; }

  /* Busca/filtros empilham */
  .busca, .filtros, .form-linha { flex-direction: column; align-items: stretch !important; }
  .busca input, .busca select, .filtros input, .filtros select { width: 100% !important; }

  .grupo-cab { padding: 14px 12px; }
  .grupo-tit { font-size: 14px; }
}

/* Inputs: fonte 16px evita o zoom automático do iOS */
@media (max-width: 720px) {
  input, select, textarea, button { font-size: 16px !important; }
}

@media (max-width: 380px) {
  .wrap { padding: 8px !important; }
}

@media (display-mode: standalone) {
  .so-navegador { display: none !important; }
  body { padding-top: var(--safe-top); }
}