/* ════════════════════════════════════════════════════════════════════
   MODAIS RESPONSIVOS v1.0 — v4.37.87

   PROBLEMA QUE RESOLVE:
   Modais ficavam cobertos pelo header fixo do app no mobile.
   O cabeçalho do modal (título + botão X) sumia atrás da topbar.

   COBRE 2 padrões usados no projeto:
   1) #pdv-modal-genericos (criado por pdvModalGenerico em pdv.js)
   2) .modal-bg + .modal (criado por vários módulos via classes CSS)

   ESTRATÉGIA:
   - align-items: flex-start (em vez de center) → modal sempre cola no topo
   - padding-top: 70px → reserva espaço pro header de 56-64px + folga
   - safe-area-inset-top → respeita notch/island do iOS
   - max-height calculado com a topbar descontada
   ════════════════════════════════════════════════════════════════════ */

/* ───────── 1) Modal genérico do PDV (#pdv-modal-genericos) ───────── */
#pdv-modal-genericos {
  /* Override do inline style original */
  align-items: flex-start !important;
  padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  /* Garante que o modal possa scrollar no overlay */
  overflow-y: auto !important;
}

#pdv-modal-genericos > div {
  /* Conteúdo interno: limita altura considerando o header */
  max-height: calc(100vh - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 auto !important;
}

/* ───────── 2) Modais por classes (.modal-bg / .modal) ───────── */
.modal-bg {
  align-items: flex-start !important;
  padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  overflow-y: auto !important;
}

.modal-bg .modal,
.modal-bg > div.modal,
.modal-bg [class*="modal-b"]:not(.modal-bg) {
  max-height: calc(100vh - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 auto !important;
}

/* ───────── 3) Mobile pequeno: padding reduzido ───────── */
@media (max-width: 480px) {
  #pdv-modal-genericos,
  .modal-bg {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
  }

  /* Reduz padding interno do modal pra ganhar espaço */
  #pdv-modal-genericos > div > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ───────── 4) Garante que header do modal NÃO grude no topo ───────── */
/* Em telas muito altas, o modal pode tentar ocupar tudo. Limita pra ficar lendo. */
@media (min-height: 600px) {
  #pdv-modal-genericos > div,
  .modal-bg .modal {
    /* Se o modal for menor que viewport, mantém alinhado no topo (flex-start) */
    align-self: flex-start;
  }
}

/* ───────── 5) Modal pequeno (confirmações) — centraliza ───────── */
/* Modais pequenos (< 300px de altura estimada) podem voltar a centralizar.
   Como não temos como detectar tamanho via CSS, deixamos o flex-start.
   Modais de confirm são rápidos e o pequeno offset não atrapalha. */

/* ───────── 6) Iframe/print: não aplica ───────── */
@media print {
  #pdv-modal-genericos,
  .modal-bg {
    display: none !important;
  }
}