/* ════════════════════════════════════════════════════════════════════
   BRAPZ_RESPONSIVE.CSS — Guarda mobile global · v1.0
   Brapz Gestão · Big Massas

   COMO É SEGURA: quase tudo usa :where(), que tem especificidade ZERO.
   Tradução: se a página já definiu o comportamento dela (ex.: painel,
   que tem os próprios breakpoints), a regra da página SEMPRE vence.
   Esta camada só age onde a página não disse nada — exatamente as
   telas que quebravam no celular.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1) NADA estoura a tela na horizontal ── */
@media screen and (max-width: 760px){
    :where(html, body){ overflow-x: clip; }           /* clip não quebra sticky (hidden quebraria) */
    :where(img, svg, video, canvas){ max-width: 100%; height: auto; }
    :where(pre, code){ white-space: pre-wrap; word-break: break-word; }
}

/* ── 2) TABELA LARGA rola dentro dela mesma, não arrasta a página ──
   Era a causa nº 1 de tela "desconfigurada": tabela de 900px numa
   tela de 390px empurrava o layout inteiro. Agora ela vira um
   carrossel horizontal com inércia do iOS. */
@media screen and (max-width: 760px){
    :where(table){
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 3) iPHONE NÃO DÁ MAIS ZOOM SOZINHO no formulário ──
   Safari amplia a tela quando o input tem fonte < 16px. Garantimos
   o mínimo de 16px SÓ no celular; no desktop fica como a página quis. */
@media screen and (max-width: 760px){
    :where(input, select, textarea){ font-size: max(16px, 1em); }
}

/* ── 4) GRIDS de 3-4 colunas colapsam com elegância ──
   Só vale pra página que NÃO definiu breakpoint próprio (:where = 0). */
@media screen and (max-width: 700px){
    :where(.grid-3, .grid-4, .topgrid, .kpi-row, .cards-3, .stats){
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 430px){
    :where(.grid-3, .grid-4, .grid-2, .topgrid, .cards-3, .form-grid){
        grid-template-columns: minmax(0, 1fr);
    }
    :where(.kpi-row, .stats){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 5) DEDO tem alvo digno (Apple manda 44px) ── */
@media screen and (max-width: 760px) and (pointer: coarse){
    :where(button, .btn, a.btn, input[type=submit], .btn-primary, .btn-additem){
        min-height: 44px;
    }
    :where(td, th){ padding-top: max(8px, 0.4em); padding-bottom: max(8px, 0.4em); }
}

/* ── 6) MODAIS e popups cabem na tela ── */
@media screen and (max-width: 760px){
    :where(.modal, .modal-content, .popup, .dialog){
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
}

/* ── 7) Respiro lateral mínimo onde a página não definiu ── */
@media screen and (max-width: 480px){
    :where(body){ padding-left: max(10px, env(safe-area-inset-left));
                  padding-right: max(10px, env(safe-area-inset-right)); }
}