/* Camada global de responsividade mobile do Painel Hub.
 * Carregada DEPOIS do Tailwind (usa !important p/ vencer as utilitárias base).
 * Só afeta telas estreitas (< 768px) e o conteúdo dentro de <main> — não toca
 * no header/nav (tratado no base.html) nem no layout desktop. */
@media (max-width: 767px) {

  /* Header/nav interno (base.html) respeita a safe-area do notch quando instalado
     como app (senão o título fica sob a barra de status/ilha). */
  body > header { padding-top: env(safe-area-inset-top); }

  /* Tela "Escanear para Enviar": o painel de resultado é dimensionado p/ a estação
     de bipagem (foto 260-480px, altura mínima 440px). No celular isso estoura →
     foto pequena e sem reservar altura enorme. (!important vence o style inline.) */
  #scanAtual { min-height: auto !important; }
  #scanTbody { min-height: auto !important; }
  /* foto do produto pequena (era 260-480px fixos via style inline) */
  #scanAtual .flex-shrink-0 { width: 96px !important; height: 96px !important; }
  #scanAtual .flex-shrink-0 span { font-size: 34px !important; }   /* placeholder/qtd */
  #scanAtual img { max-width: 96px !important; max-height: 96px !important; }
  /* título do produto não estoura a coluna */
  #scanAtual .text-lg, #scanAtual .text-base { font-size: 0.95rem !important; }
  /* alerta grande de múltiplos produtos (fontes 30-60px) cabe no celular */
  #scanAtual .animate-pulse { padding: 12px 14px !important; gap: 10px !important; border-width: 3px !important; }
  #scanAtual .animate-pulse span { font-size: 16px !important; line-height: 1.3 !important; }
  /* dados do pedido: 1 coluna no celular (era grid-cols-2 apertado) */
  #scanAtual .grid-cols-2 { grid-template-columns: 1fr 1fr !important; }

  /* Tabelas de dados simples (com cabeçalho) viram CARDS no celular: cada linha é
     um cartão com "rótulo: valor" — mostra TODAS as colunas, sem rolagem lateral.
     A classe .mcard é adicionada por mobile-tables.js só quando as linhas casam com
     o cabeçalho (sem colspan). */
  main table.mcard { display: block; }
  main table.mcard thead { display: none; }
  main table.mcard tbody { display: block; }
  main table.mcard tr {
    display: block;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 2px 12px;
    margin-bottom: 8px;
  }
  main table.mcard td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    text-align: right;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
  main table.mcard td:not(:last-child) { border-bottom: 1px solid rgba(51,65,85,.35) !important; }
  main table.mcard td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    color: #94a3b8;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
  }
  main table.mcard td:not([data-label])::before { content: ""; }

  /* Fallback: tabelas sem cabeçalho reconhecível (ou complexas) rolam na horizontal
     dentro do próprio bloco, sem estourar a página. */
  main table:not(.mcard) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Campos de formulário nunca passam da largura da tela. */
  main select,
  main input:not([type="checkbox"]):not([type="radio"]),
  main textarea {
    max-width: 100% !important;
  }

  /* Grids densos de cards/KPIs (1 filho por célula) caem p/ 2 colunas no celular.
     Só casa o grid-cols BASE (não as variantes md:grid-cols-*). Deixo de fora os
     de 7+ colunas, quase sempre grids de formulário com col-span — que já se
     ajustam sozinhos (as colunas são frações da largura do container). */
  main .grid-cols-4,
  main .grid-cols-5,
  main .grid-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Split fixo da Central de SMS (grid inline 300px 1fr) → 1 coluna no celular. */
  #smsSplit { grid-template-columns: 1fr !important; }
}