/* ════════════════════════════════════════════════════════════════
   MOBILE-FIRST — CRM Life AgroPets v3.18.4
   Camada de otimizações pra mobile/PWA, complementa style.css
   ════════════════════════════════════════════════════════════════ */

/* ─── ÁREA SEGURA (notch/dynamic island) ─── */
:root {
  --safe-top: env(safe-area-inset-top, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --safe-left: env(safe-area-inset-left, 0);
  --safe-right: env(safe-area-inset-right, 0);
  /* Cores oficiais da marca */
  --verde-life: var(--cor-primaria);
  --verde-claro: #2d9e58;
  --laranja-life: #E47B0E;
  --cinza-fundo: #F5F5F5;
}

/* ─── BASE — desliga seleção em UI mas mantém em conteúdo ─── */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
input, textarea, select, p, h1, h2, h3, h4, h5, h6, span, td, th, li {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* Smooth scroll no body */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
  /* Suporte a viewport dinâmica (resolve barra do Safari/Chrome mobile) */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ─── HEADER FIXO MOBILE-SAFE ─── */
.header-app, .topbar, header.app-header {
  padding-top: calc(12px + var(--safe-top)) !important;
  padding-left: calc(16px + var(--safe-left));
  padding-right: calc(16px + var(--safe-right));
}

/* ─── INPUTS MOBILE-FRIENDLY ─── */
input, textarea, select, button {
  font-size: 16px !important;  /* impede zoom no iOS ao focar */
  font-family: inherit;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;  /* mantém botões + e -, importante em mobile */
}
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], textarea {
  min-height: 44px;       /* área de toque acessível (Apple HIG) */
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

/* ─── BOTÕES — área de toque mínima 44x44 ─── */
button, .btn, a.button, [role="button"] {
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  touch-action: manipulation;  /* remove delay 300ms */
}
button:active, .btn:active {
  transform: scale(.97);
  transition: transform .08s ease;
}

/* ─── CARDS HOME — 2 colunas em mobile ─── */
@media (max-width: 768px) {
  .home-grid, .cards-grid, .grid-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .home-card, .card-admin {
    padding: 16px 12px !important;
    min-height: 110px;
  }
  .home-card .hc-icon, .home-card .icone {
    font-size: 2rem !important;
    margin-bottom: 6px !important;
  }
  .home-card .hc-title {
    font-size: .9rem !important;
    line-height: 1.2;
  }
  .home-card .hc-sub {
    font-size: .72rem !important;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ─── TABELAS QUE VIRAM CARDS EM MOBILE ─── */
@media (max-width: 640px) {
  .tabela-mobile-cards thead { display: none; }
  .tabela-mobile-cards tr {
    display: block;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  .tabela-mobile-cards td {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
  }
  .tabela-mobile-cards td:last-child { border-bottom: none; }
  .tabela-mobile-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
    font-size: .85rem;
  }
}

/* ─── CONTAINER PRINCIPAL ─── */
.container, .page-wrap {
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  padding-bottom: max(16px, var(--safe-bottom));
}

/* ─── MODAL MOBILE FULL-SCREEN ─── */
@media (max-width: 640px) {
  .modal-content, .modal-card {
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 92vh !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: slide-up .25s ease;
  }
  @keyframes slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .modal {
    align-items: flex-end !important;
  }
}

/* ─── BARRA DE NAVEGAÇÃO INFERIOR (se existir nav-bottom) ─── */
.nav-bottom, .bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 100;
  background: white;
  border-top: 1px solid #e5e7eb;
  padding-bottom: var(--safe-bottom);
  display: flex;
  justify-content: space-around;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.nav-bottom a, .bottom-nav a {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  font-size: .68rem;
  color: #6b7280;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nav-bottom a.ativo, .nav-bottom a.active,
.bottom-nav a.ativo, .bottom-nav a.active {
  color: var(--verde-life);
  font-weight: 700;
}
.nav-bottom a .ico, .bottom-nav a .ico { font-size: 1.4rem; }

/* Quando tem nav-bottom, dar margem no body */
body.com-nav { padding-bottom: calc(72px + var(--safe-bottom)); }

/* ─── BUSCA STICKY MOBILE ─── */
.busca-sticky {
  position: sticky;
  top: 0;
  background: var(--cinza-fundo, white);
  z-index: 50;
  padding: 10px 0;
}

/* ─── PULL-TO-REFRESH HINT (visual) ─── */
@keyframes refresh-hint {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.refresh-hint {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--verde-life);
  color: white;
  text-align: center;
  padding: 8px;
  font-size: .85rem;
  animation: refresh-hint .3s ease;
  z-index: 200;
}

/* ─── TIPOGRAFIA MOBILE ─── */
@media (max-width: 640px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1.05rem !important; }
  body { font-size: 15px; }
}

/* ─── DESKTOP — manter layout atual ─── */
@media (min-width: 769px) {
  body.com-nav { padding-bottom: 0; }
  .nav-bottom, .bottom-nav { display: none !important; }
}

/* ─── SCROLLBARS DISCRETOS ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.3); }

/* ─── INSTALL PROMPT (banner instalar app) ─── */
.install-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: white;
  border-radius: 14px;
  padding: 12px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 500;
  border: 1px solid #e5e7eb;
}
.install-banner.show { display: flex; }
.install-banner img { width: 40px; height: 40px; border-radius: 8px; }
.install-banner .info { flex: 1; min-width: 0; }
.install-banner .info b { display: block; font-size: .9rem; }
.install-banner .info span { font-size: .75rem; color: #6b7280; }
.install-banner button {
  background: var(--verde-life);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  min-height: 36px;
  min-width: auto;
}
.install-banner .close {
  background: none;
  color: #9ca3af;
  padding: 4px 8px;
  font-size: 1.2rem;
  border: none;
  min-width: auto;
}

/* ─── PWA STANDALONE (quando rodando como app) ─── */
@media (display-mode: standalone) {
  .pwa-only-show { display: block !important; }
  .pwa-only-hide { display: none !important; }
  body { padding-top: var(--safe-top); }
}

/* ─── MELHORIAS DE FORMULÁRIO MOBILE ─── */
.form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

/* ─── ANIMAÇÕES PERFORMANTES (apenas transform/opacity) ─── */
@keyframes slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-entrada { animation: slide-in .25s ease; }

/* ─── DESABILITA HOVER EM TOUCH ─── */
@media (hover: none) {
  .home-card:hover, .btn:hover, button:hover { transform: none; }
}

/* ─── DARK MODE BÁSICO (se sistema preferir) ─── */
@media (prefers-color-scheme: dark) {
  /* Mantemos light pra agora — pet shop tem identidade clara */
  /* Pode adicionar dark mode depois se quiser */
}

/* ═══════════════════════════════════════════════════════════════
   BOTÃO HOME FLUTUANTE — v3.18.7
   Aparece no canto inferior esquerdo de todas as páginas (exceto home/login).
   Injetado via JS por nav-home.js
   ═══════════════════════════════════════════════════════════════ */
#fabHome {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0));
  left: calc(16px + env(safe-area-inset-left, 0));
  z-index: 850;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cor-primaria), #2d9e58);
  color: white;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30, 107, 61, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#fabHome:active {
  transform: scale(0.92);
  box-shadow: 0 3px 10px rgba(30, 107, 61, 0.45);
}
#fabHome:hover {
  box-shadow: 0 8px 26px rgba(30, 107, 61, 0.45);
}
/* Esconde se PWA estiver com nav-bottom (evita sobrepor) */
body.com-nav #fabHome {
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
}

/* v7.33.5 — botão "← Voltar" inteligente, empilhado logo acima do 🏠 (#fabHome) */
#fabVoltar {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  left: calc(16px + env(safe-area-inset-left, 0));
  z-index: 850;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--cor-primaria);
  border: 1.5px solid #cfe0d4;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30, 107, 61, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#fabVoltar:active { transform: scale(0.92); }
body.com-nav #fabVoltar { bottom: calc(140px + env(safe-area-inset-bottom, 0)); }