/* ==========================================================================
   AxionMesk — PWA + Responsividade (mobile-first)
   Carregado DEPOIS de styles.css para complementar, nunca sobrescrever a marca.
   ========================================================================== */

:root {
  --vh: 1vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tap-min: 44px;
}

/* --------------------------------------------------------------------------
   1) Base mobile
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

/* Rolagem suave e sem "bounce" horizontal */
body { overflow-x: hidden; }

/* Campos: 16px evita zoom automático no iOS */
input, select, textarea {
  font-size: 16px !important;
}

/* Alvos de toque confortáveis */
button, .btn, [role="button"], .nav a, .tab, .menu-item, a.btn {
  min-height: var(--tap-min);
  touch-action: manipulation;
}

/* Imagens e mídia nunca estouram a tela */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* Tabelas com scroll horizontal suave */
.table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Scrollbar discreta no mobile */
@media (hover: none) {
  ::-webkit-scrollbar { width: 0; height: 0; }
}

/* --------------------------------------------------------------------------
   2) Áreas seguras (notch / barra inferior)
   -------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
  .site-header, header.site-header, .navbar, .topbar {
    padding-top: calc(var(--safe-top) + 6px);
  }
  .app-footer, footer, .bottom-nav {
    padding-bottom: calc(var(--safe-bottom) + 8px);
  }
  #pwa-install-bar, .pwa-install-bar {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   3) Grids e layouts fluidos
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .container, .wrap, .container-fluid { width: 100%; padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 768px) {
  /* Títulos e espaçamentos */
  h1 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.2; }
  h2 { font-size: clamp(19px, 5vw, 25px) !important; }
  h3 { font-size: clamp(17px, 4.4vw, 21px) !important; }

  section { padding-top: 28px !important; padding-bottom: 28px !important; }

  /* Grade de cards: 1 coluna */
  .grid, .cards, .features, .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Hero */
  .hero, .banner, .cta {
    text-align: center;
    padding: 24px 16px !important;
  }
  .hero img, .hero svg { margin-inline: auto; }

  /* Botões full-width no mobile */
  .hero .btn, .cta .btn, .form-actions .btn, form button[type="submit"] {
    width: 100%;
    justify-content: center;
  }

  /* Formulários */
  form, .form, .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .form-row, .input-group, .field-row {
    display: block !important;
  }
  .form-row > *, .field-row > * { width: 100% !important; margin-bottom: 12px; }

  /* Header: menu compacto */
  .site-header, .navbar, .topbar {
    padding: 10px 14px !important;
    gap: 10px;
  }
  .site-header .nav, .navbar .menu, .main-nav {
    display: none;
  }
  .site-header .logo, .navbar .logo { max-width: 160px; }

  /* Tabelas: viram cards */
  table.responsive, .table-mobile {
    display: block;
    border: 0;
  }
  table.responsive thead { display: none; }
  table.responsive tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    overflow: hidden;
  }
  table.responsive td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-align: right;
    border: 0;
  }
  table.responsive td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    opacity: .7;
    font-size: 13px;
  }

  /* Modais ocupam a tela */
  .modal, .dialog, .popup {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    max-height: calc(var(--vh, 1vh) * 90) !important;
    overflow-y: auto;
    border-radius: 18px !important;
    margin: 12px auto !important;
  }

  /* Toasts acima da barra inferior */
  .toast, .notification, .alert-floating {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(16px + var(--safe-bottom)) !important;
    width: auto !important;
  }
}

@media (max-width: 420px) {
  .container, .wrap, .container-fluid { padding-left: 12px; padding-right: 12px; }
  .btn, button { font-size: 14px; }
  h1 { font-size: clamp(20px, 6.4vw, 26px) !important; }
}

/* --------------------------------------------------------------------------
   4) Telas grandes mantêm comportamento normal
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .mobile-only { display: none !important; }
}
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}

/* --------------------------------------------------------------------------
   5) Barra "Instalar app" (PWA)
   -------------------------------------------------------------------------- */
.pwa-install-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(24, 27, 36, .96);
  border: 1px solid rgba(56,107,255, .35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease;
  color: #e8eaed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.pwa-install-bar.is-visible { transform: translateY(0); opacity: 1; }

.pwa-install-icon {
  width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto;
}
.pwa-install-text {
  display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25;
}
.pwa-install-text strong { font-size: 14px; }
.pwa-install-text span { font-size: 12px; opacity: .72; }

.pwa-install-btn {
  flex: 0 0 auto;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, #ffd65a, #386BFF);
  color: #1a1300; font-weight: 700; font-size: 13px;
  padding: 10px 16px; border-radius: 11px;
  min-height: 40px; touch-action: manipulation;
}
.pwa-install-btn:active { transform: scale(.97); }

.pwa-install-close {
  flex: 0 0 auto;
  background: transparent; border: 0; color: #9aa0aa;
  font-size: 22px; line-height: 1; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
}
.pwa-install-close:hover { background: rgba(255, 255, 255, .08); }

/* iOS: dica sem botão de instalar */
.pwa-ios-hint { align-items: flex-start; }
.pwa-ios-hint .pwa-install-text span { font-size: 12.5px; }
.pwa-ios-hint b { color: #386BFF; }

@media (max-width: 360px) {
  .pwa-install-text span { display: none; }
}

/* --------------------------------------------------------------------------
   6) Modo standalone (app instalado)
   -------------------------------------------------------------------------- */
@media (display-mode: standalone) {
  /* Some com qualquer faixa de "instalar" */
  .pwa-install-bar { display: none !important; }
  body { user-select: none; }
  input, textarea { user-select: text; }
}

/* --------------------------------------------------------------------------
   7) Acessibilidade e performance
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid #386BFF;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Melhora legibilidade de textos longos */
@media (max-width: 768px) {
  p, li { line-height: 1.62; }
  .muted, .text-muted { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   8) Ajustes específicos por plataforma
   -------------------------------------------------------------------------- */
.is-ios input, .is-ios select, .is-ios textarea {
  border-radius: 12px;
  appearance: none;
  -webkit-appearance: none;
}

.is-ios .app-shell, .is-ios .page {
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Evita zoom no duplo toque em links de navegação */
a, button { -webkit-touch-callout: none; }