/* Regras globais para celular. Todas as telas do sistema incluem este arquivo
   (dashboard, login, página pública do chamado e cada aba _xxx.php).
   Criado em 21/08/2026 a partir da revisão de compatibilidade mobile. */

/* 1. iPhone dá zoom automático ao focar um campo com fonte menor que 16px.
      As telas usam text-sm/text-xs nos campos; abaixo de 1024px força-se 16px. */
@media (max-width: 1023px) {
  /* Campos que já usam fonte grande (text-lg, text-xl, text-2xl...) ficam como estão. */
  input:not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl),
  select:not(.text-lg):not(.text-xl):not(.text-2xl),
  textarea:not(.text-lg):not(.text-xl):not(.text-2xl) { font-size: 16px !important; }
  input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"], input[type="color"] { font-size: inherit !important; }
}

/* 2. Sem mouse não existe "passar por cima": botões de ação que só apareciam no hover
      (opacity-0 group-hover:opacity-100) ficam sempre visíveis em telas de toque. */
@media (hover: none) {
  .group-hover\:opacity-100, .hover\:opacity-100 { opacity: 1 !important; }
  .group-hover\:visible { visibility: visible !important; }
  .group-hover\:flex { display: flex !important; }
  .group-hover\:block { display: block !important; }
  .group-hover\:inline-flex { display: inline-flex !important; }
}

/* 3. Tooltip "?" abre ao tocar/segurar e ao receber foco (o CSS base está em grs_help_css). */
.grs-help:active::after, .grs-help:focus::after, .grs-help.grs-aberto::after { opacity: 1 !important; visibility: visible !important; }
.grs-help { -webkit-tap-highlight-color: transparent; }
@media (max-width: 639px) {
  .grs-help::after { max-width: min(240px, 78vw); }
}
/* Alvo do "?" maior no celular (15px é pequeno demais para o dedo). */
@media (max-width: 1023px) {
  .grs-help { width: 22px; height: 22px; font-size: 12px; }
}

/* 4. Textos longos (e-mails, links, nomes de arquivo) quebram em vez de estourar a tela. */
.grs-quebra { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* 5. Alvo de toque mínimo para botões de ícone marcados com .grs-toque. */
.grs-toque { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* 6. Altura de tela no celular: 100vh ignora a barra do navegador; dvh acompanha. */
@supports (height: 100dvh) {
  .h-screen { height: 100dvh; }
  .min-h-screen { min-height: 100dvh; }
}