/* ============================================================================
   Bizly Mobile Modal · v41.39 · iOS-native static modals
   ============================================================================
   Reglas globales para que TODOS los modales en mobile (<=820px):
   - Se muestren tipo "iOS sheet" (bottom-up, glass)
   - JAMÁS hagan zoom (inputs siempre >= 16px font-size)
   - JAMÁS se muevan cuando aparece el teclado
   - El body del modal scrolea internamente (no la página)
   - safe-area-inset honrado arriba y abajo
   - touch-action restringido (pan-y, no pinch-zoom)
   - body lock cuando hay modal abierto
   ============================================================================ */

/* === ANTI-ZOOM GLOBAL EN INPUTS · iOS jamás zoomea si font >= 16px === */
@media (max-width: 820px) {
  input, select, textarea, button {
    font-size: 16px !important; /* iOS no-zoom threshold */
  }
  /* Excepción: tablas, badges, chips pueden ser más chicos sin tocar inputs */
}

/* === BODY LOCK CUANDO HAY MODAL ABIERTO === */
body.bz-modal-locked {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  /* iOS Safari: usar height:100% mantiene el viewport estable cuando el keyboard sube */
  height: 100% !important;
  top: 0 !important;
  touch-action: pan-y !important;
}

/* === MODAL SCRIM GLOBAL === */
.bz-modal-scrim, .bf-modal-bg, #createUserModal, #resetPwdModal,
#notesAuditModal, #visitsDrillModal, #cardPreviewModal {
  /* Container fixed full-screen */
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998;
}

/* === MODAL CONTAINER (iOS-sheet en mobile, centrado en desktop) === */
@media (max-width: 820px) {
  /* TODOS los modal-box / contenedor interno */
  .bf-modal,
  #createUserModal > div,
  #resetPwdModal > div,
  #notesAuditModal > div,
  #visitsDrillModal > div,
  #cardPreviewModal .cpv-box {
    /* iOS sheet · bottom-up */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Altura: nunca pasa de 92dvh para dejar espacio del scrim arriba */
    max-height: 92dvh !important;
    min-height: 60dvh !important;
    height: auto !important;
    /* Borde superior redondeado tipo iOS */
    border-radius: 22px 22px 0 0 !important;
    /* Flex column · header static, body scroll, footer static */
    display: flex !important;
    flex-direction: column !important;
    /* Safe area inset bottom (iPhone home indicator) */
    padding-bottom: env(safe-area-inset-bottom) !important;
    /* Sombra hacia arriba */
    box-shadow: 0 -18px 48px rgba(0,0,0,.32) !important;
    /* Touch action: pan-y permite scroll vertical sin pinch zoom */
    touch-action: pan-y !important;
    /* Importante: el modal NO se mueve con el teclado, queda anclado */
    will-change: auto !important;
  }

  /* Header del modal · static, no scrolea */
  .bf-modal > .bf-head,
  #createUserModal > div > div:first-child,
  #resetPwdModal > div > div:first-child,
  #notesAuditModal > div > div:first-child,
  #visitsDrillModal > div > div:first-child,
  #cardPreviewModal .cpv-head {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
  }

  /* Body del modal · ÚNICA zona scrollable */
  .bf-modal > .bf-body,
  #createUserModal form,
  #resetPwdModal #rpForm,
  #resetPwdModal #rpResult,
  #notesAuditModal #naBody,
  #visitsDrillModal #vddBody,
  #cardPreviewModal .cpv-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* iOS smooth scroll */
    -webkit-overflow-scrolling: touch !important;
    /* Scroll padding para que el input enfocado no quede pegado al fondo */
    scroll-padding-bottom: 90px !important;
    /* No zoom incluso si el user pinchea */
    touch-action: pan-y !important;
  }

  /* Footer del modal · static, siempre visible */
  .bf-modal > .bf-foot,
  #createUserModal form > div:last-child,
  #resetPwdModal #rpForm > div:last-child,
  #cardPreviewModal .cpv-foot {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    /* Sombra hacia arriba para indicar fixed */
    box-shadow: 0 -1px 0 var(--gline, rgba(255,255,255,.08)) !important;
  }

  /* Cualquier elemento dentro del modal NO puede tener position:fixed
     (eso rompería el flujo y se moverían con keyboard) */
  .bf-modal *[style*="position:fixed"],
  .bf-modal *[style*="position: fixed"] {
    position: static !important;
  }

  /* Inputs explícitamente 16px (refuerzo) */
  .bf-modal input,
  .bf-modal select,
  .bf-modal textarea,
  #createUserModal input,
  #createUserModal select,
  #createUserModal textarea,
  #resetPwdModal input,
  #resetPwdModal textarea,
  #notesAuditModal input,
  #notesAuditModal select {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
}

/* === DESKTOP · centrado clásico === */
@media (min-width: 821px) {
  .bf-modal,
  #createUserModal > div,
  #resetPwdModal > div {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* === INPUT FOCUS · scroll into view dentro del modal === */
@media (max-width: 820px) {
  .bf-modal input:focus,
  .bf-modal textarea:focus,
  .bf-modal select:focus,
  #createUserModal input:focus,
  #createUserModal textarea:focus,
  #createUserModal select:focus,
  #resetPwdModal input:focus,
  #resetPwdModal textarea:focus {
    scroll-margin-top: 80px;
    scroll-margin-bottom: 120px;
  }
}

/* === GLOBAL · prevenir gestos de zoom en TODA la página móvil === */
@media (max-width: 820px) {
  html, body {
    touch-action: pan-x pan-y !important;
    -webkit-text-size-adjust: 100% !important;
  }
}