/* ════════════════════════════════════════════════════════════════════
   CP MODAL FIX v1.0 — v4.37.87
   Corrige modais que ficavam com cabeçalho escondido atrás da topbar.

   ESTRATÉGIA:
   1. Sobe o z-index dos modais pra acima da topbar (que usa 9999)
   2. Adiciona padding-top maior no mobile pra não colar no header
   3. Deixa modal scrollável internamente (header fica sempre visível)
   4. Backdrop tappable em qualquer área externa fecha o modal

   COBERTURA:
   - #pdv-modal-genericos (modal principal usado pra Análise de Churn etc.)
   - .modal-bg + .modal (modais classe nativa)
   - #*-modal-* (qualquer ID que contenha 'modal')
   - #*-ovl, #*-overlay (overlays customizados)
   - Modais inline criados via .style.cssText com 'position:fixed;inset:0'
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════ 1) Z-INDEX SEGURO PRA MODAIS ═══════════ */
/* Topbar usa z-index 9999. Subimos modais pra 100000+ pra ficar SEMPRE acima. */

#pdv-modal-genericos,
.modal-bg,
.modal-overlay,
[id^="cp-modal-"],
[id$="-modal-overlay"],
[id$="-modal-ovl"],
[id$="-ovl"],
[id$="-overlay"],
[id*="modal-overlay"],
[id="modal-generico-fat"],
[id="inad-modal-overlay"],
[id="cp-changelog-modal"],
.cp-modal-overlay {
  z-index: 100000 !important;
}

/* Modais filhos (pop-overs dentro de modais) sobem mais ainda */
.modal-bg .modal-bg,
.modal-overlay .modal-overlay {
  z-index: 100100 !important;
}

/* Modais cp- criados via JS ficam SEMPRE acima de modal-bg */
[id^="cp-modal-"],
#cp-modal-reset-senha,
#cp-modal-aceitar,
#cp-modal-recusar,
#cp-modal-converter,
#cp-modal-limpeza,
#cp-modal-nova-prop,
#cp-modal-prop-sugestao {
  z-index: 2147483647 !important;
}

/* ═══════════ 2) ESPAÇAMENTO MOBILE — não colar no header ═══════════ */
/* No mobile (≤768px), o modal não pode ficar centralizado verticalmente   */
/* sem dar espaço pro header fixo. Forçamos alinhamento ao topo c/ padding.*/

@media (max-width: 768px) {
  /* Modais conhecidos por ID/class */
  #pdv-modal-genericos,
  .modal-bg,
  [id$="-ovl"],
  [id$="-overlay"],
  [id$="-modal-ovl"],
  [id$="-modal-overlay"],
  [id="modal-generico-fat"],
  [id="inad-modal-overlay"],
  [id="cp-changelog-modal"] {
    align-items: flex-start !important;
    padding-top: 70px !important;       /* respira o topbar (52-60px alt) */
    padding-bottom: 16px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Conteúdo dentro do modal (filho direto) */
  #pdv-modal-genericos > div,
  .modal-bg > .modal,
  .modal-bg > div,
  [id$="-ovl"] > div,
  [id$="-overlay"] > div,
  [id="modal-generico-fat"] > div {
    max-height: calc(100vh - 90px) !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ═══════════ 3) SAFE-AREA p/ iPhone (notch/dynamic island) ═══════════ */
/* Em iPhones modernos, env(safe-area-inset-top) compensa o notch.        */

@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    #pdv-modal-genericos,
    .modal-bg,
    [id$="-ovl"],
    [id$="-overlay"],
    [id="modal-generico-fat"] {
      padding-top: calc(70px + env(safe-area-inset-top)) !important;
    }
  }
}

/* ═══════════ 4) CABEÇALHO STICKY no scroll interno ═══════════ */
/* Header (com X) fica visível mesmo com scroll do conteúdo.              */

#pdv-modal-genericos > div > div:first-child,
[id="modal-generico-fat"] > div > div:first-child {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: var(--sf, #1a1d2e) !important;
}

/* Tablet/desktop: comportamento natural (centralizado vertical) */
@media (min-width: 769px) {
  #pdv-modal-genericos,
  .modal-bg,
  [id$="-ovl"],
  [id$="-overlay"] {
    align-items: center !important;
  }
}

/* ═══════════ 5) BACKDROP — tappable garantido ═══════════ */
/* Garante que clicar fora fecha o modal (visual de cursor pointer).      */

.modal-bg {
  cursor: pointer;
}
.modal-bg > .modal,
.modal-bg > div {
  cursor: default;
}

/* ═══════════ 6) ESPECÍFICOS — modais que precisam customização ═══════════ */
/* Banner do version-checker é fixed top — fica acima de modais? Não, modal cobre */

#cp-version-banner {
  z-index: 50000; /* alto mas abaixo de modais */
}