/* ============================================================================
   Responsividade para tablet (iPad) e celular (iPhone).
   Regra de ouro: NÃO alterar o desktop. Tudo aqui é escopado por:
     - ponteiro grosso (touch) → iPad/iPhone; ou
     - .app.narrow (shell estreito, já ligado via JS em tablet/celular); ou
     - largura pequena (celular).
   Desktop com ponteiro fino acima de 1024px nunca entra nestas regras.
   ============================================================================ */

/* ---- iOS: impedir zoom automático ao focar campo (font-size < 16px) ----------
   Vale para qualquer dispositivo de toque (iPad/iPhone), em qualquer largura.
   Inclui a tela de login, que fica fora do .app. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .mxlogin-inp {
    font-size: 16px !important;
  }
}

/* ---- Shell estreito (iPad/iPhone): conteúdo ocupa a tela toda, sem overflow
   horizontal do shell inteiro. Tabelas/áreas internas mantêm seu próprio scroll. */
.app.narrow .content { overflow-x: hidden; }
.app.narrow .page { max-width: 100%; }

/* ---- Subnav do Lab (abas) vira faixa rolável na horizontal em vez de quebrar. */
.app.narrow .lab-subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.app.narrow .lab-subnav::-webkit-scrollbar { height: 0; }
.app.narrow .lab-subnav > div { max-width: none !important; flex-wrap: nowrap !important; width: max-content; }
.app.narrow .lab-subnav button { white-space: nowrap; }

/* ============================================================================
   CELULAR (telas pequenas): empilha os layouts em 1 coluna.
   Mantém o iPad com os grids originais (há largura de sobra com o conteúdo cheio).
   ============================================================================ */
@media (max-width: 760px) {
  /* Empilha qualquer grid de layout com colunas fixas (heros, cockpits, formulários). */
  .app.narrow .content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Diálogos/modais centrais não passam da largura da tela. */
  [role="dialog"] { max-width: 94vw !important; }

  /* Hero/ações que ficam em linha no desktop podem quebrar em várias linhas. */
  .page-header, .page-actions { flex-wrap: wrap; }

  /* Padding de página mais enxuto no celular. */
  .app.narrow .page { padding: 12px 10px 24px; }
}

/* ---- Tablet em paisagem larga (iPad Pro) continua com o shell estreito via JS;
   garante que imagens/mídias nunca estourem a largura. */
@media (pointer: coarse) {
  .app .content img,
  .app .content video,
  .app .content canvas { max-width: 100%; height: auto; }
}