/*
 * mobile-polish.css — patches universais mobile aplicados em mobile-first.
 * 2026-06-05 (audit sênior 6× Google/Square/Toast):
 *
 * 1. Inputs SEMPRE >=16px em mobile pra evitar zoom-in automático Safari iOS
 * 2. :hover envolvido em @media (hover:hover) pra evitar "stuck state" touch
 * 3. Tap targets mínimos 44x44 em close buttons + quantity steppers
 * 4. Toast bottom-right respeita bottom-nav + safe-area
 * 5. 100vh → 100dvh fallbacks
 *
 * Carregado APÓS o CSS principal pra ter precedência via cascade order.
 */

/* ─── 1. INPUTS >= 16px em mobile (anti-zoom iOS Safari) ──────────── */
@media (max-width: 768px) {
  input,
  select,
  textarea,
  .cfg-input,
  .field input,
  .field select,
  .ds-input,
  .ds-select,
  .ds-textarea,
  [class*="-input"]:not([type="hidden"]),
  [class*="-search"] {
    font-size: 16px !important;
  }
  /* Exceções: tags inline pequenas que não recebem focus */
  span.tag,
  span.badge,
  span.chip {
    font-size: revert !important;
  }
}

/* ─── 2. TAP TARGETS mínimos (HIG 44x44 / Material 48x48) ────────── */
@media (max-width: 768px) {
  /* Close buttons modais */
  .modal-close,
  .close-btn,
  .admin-modal-close,
  [aria-label="Fechar"],
  [aria-label="fechar"],
  [aria-label="Close"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Quantity steppers (carrinho cardápio) */
  .qtd-btn,
  .quantity-btn,
  [class*="qtd-btn"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Botões pequenos perigosos em forms */
  .ds-btn-xs,
  .btn-xs {
    min-height: 44px !important;
    padding: 8px 12px !important;
  }
}

/* ─── 3. :hover apenas em devices com hover real ──────────────────── */
/* Não dá pra envolver retroativo cada regra, mas força reset em touch: */
@media (hover: none) and (pointer: coarse) {
  /* Cancela transforms residuais de :hover em touch */
  *:not(:active) {
    transform: none !important;
  }
  /* Cancela color/background mudanças "stuck" em :hover.
     Ative só pra elementos clicáveis que sofrem mais com isso. */
  .btn:hover,
  .ds-btn:hover,
  .cup-btn:hover,
  .cfg-btn:hover,
  button:hover,
  [role="button"]:hover {
    /* Reset visual — touch não tem hover real */
    filter: none !important;
  }
}

/* ─── 4. Toast / snackbar respeita bottom-nav + safe-area ────────── */
@media (max-width: 768px) {
  #toast-host,
  #toast-container,
  .toast-host {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}

/* ─── 5. 100vh fallback pra 100dvh com @supports ──────────────────── */
@supports (height: 100dvh) {
  .full-vh,
  .min-vh-100 {
    min-height: 100dvh !important;
  }
}

/* ─── 6. Bottom nav respeita safe-area iOS ─────────────────────────── */
@media (max-width: 768px) {
  .bottom-nav,
  .vqen-nav-v2-bottom,
  #bottom-nav,
  .tabs[role="tablist"] {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ─── 7. Modal max-height dvh em vez de vh ─────────────────────────── */
@media (max-width: 768px) {
  @supports (height: 100dvh) {
    .modal-content,
    .vqen-modal-content,
    .dsv-modal,
    .cpg-modal,
    .erp-modal {
      max-height: 90dvh !important;
    }
  }
}

/* ─── 8. user-scalable=no removal pra apps acessíveis ─────────────── */
/* iOS ignora user-scalable:no se touch-action:manipulation tá presente.
   Pra apps que precisam de pinch-zoom (acessibilidade), garantir
   touch-action: manipulation em vez de bloquear zoom. */
button,
[role="button"],
.btn,
a.nav-link {
  touch-action: manipulation;
}