/* ============================================================
   GPS IMOBILIÁRIO — compatibility.css
   Fixes de compatibilidade cross-browser
   Safari · iOS · Android · WebKit
   DEVE SER CARREGADO SEMPRE POR ÚLTIMO
   v0.0.9 · 2026-03-25
   ============================================================ */

/* ─── VIEWPORT HEIGHT (iOS Safari) ─── */
/* Substitui 100vh pelo dynamic viewport height que respeita
   a barra de endereços do Safari em iOS */
#screen-login,
#screen-cliente,
.panel-drawer,
.nosso-gps-drawer,
.minha-area-drawer {
  min-height: 100dvh;
}
.panel-drawer,
.nosso-gps-drawer,
.minha-area-drawer {
  height: 100dvh;
}

/* ─── INPUTS — ZOOM AUTOMÁTICO (iOS Safari) ─── */
/* Safari iOS faz zoom automático em inputs com font-size < 16px.
   Forçamos 16px apenas em mobile para evitar esse comportamento. */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: var(--font-lg) !important;
  }
  .filter-select,
  .doc-status-select,
  .atrib-select,
  .membro-role-select,
  .ines-contexto-select,
  .gps-edit-input {
    font-size: var(--font-lg) !important;
  }
}

/* ─── SCROLL INERCIAL (iOS Safari) ─── */
/* Activa o scroll suave com inércia em elementos com scroll próprio */
.ines-chat-area,
.panel-drawer,
.nosso-gps-drawer,
.minha-area-drawer,
.kanban-board,
.kb-board,
#view-kanban,
.ck-toolbar,
.modal {
  -webkit-overflow-scrolling: touch;
}

/* ─── POSITION STICKY (Safari) ─── */
/* Safari tem bugs com position:sticky dentro de elementos com
   overflow:auto. Garantimos que o contexto de stacking está correcto. */
.panel-header,
.nosso-gps-header,
.minha-area-header {
  position: -webkit-sticky;
  position: sticky;
}

/* ─── TAP HIGHLIGHT (iOS) ─── */
/* Remove o highlight azul em elementos clicáveis no iOS */
button,
.sidebar-item,
.negocio-card,
.sop-item,
.ines-sugestao,
.gps-link,
.tipo-option {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ─── FLEXBOX GAP (Safari < 14.1) ─── */
/* Safari 14.0 e anteriores não suportam gap em flexbox.
   Fallback para os componentes críticos. */
@supports not (gap: 1px) {
  .topbar > * + *        { margin-left: 16px; }
  .action-bar > * + *    { margin-left: 12px; }
  .panel-actions > * + * { margin-top: 10px; }
  .confirm-btns > * + *  { margin-left: 10px; }
}

/* ─── ANIMAÇÕES (prefers-reduced-motion) ─── */
/* Respeita a preferência do utilizador por menos animação */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}