/* =====================================================================
 * BankPress — PWA polish
 * =====================================================================
 * Transicoes suaves entre telas, skeleton loaders, banner offline,
 * safe-area-inset (iPhone notch + home indicator).
 *
 * Aplicavel a qualquer tenant. Deve ser carregado APOS o CSS do tenant
 * (app.css/screens.css/etc) pra ter precedencia em casos de override.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * SAFE AREA — iPhone notch + home indicator (PWA standalone)
 * --------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  body {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: 0;     /* bottom-nav lida com seu proprio padding */
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
  }
  .bottom-nav {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .screen-header {
    padding-top: max(22px, calc(env(safe-area-inset-top) + 8px));
  }
}

/* ---------------------------------------------------------------------
 * PAGE TRANSITIONS — fade-in nas telas internas + shell
 * --------------------------------------------------------------------- */
@keyframes pwa-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.app-screen,
.app-container {
  animation: pwa-fade-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .app-screen, .app-container { animation: none; }
}

/* ---------------------------------------------------------------------
 * SKELETON LOADER — substitui "Carregando..." quando tem estrutura
 * Uso: <div class="skeleton skeleton-row"></div> ou skeleton-text/circle
 * --------------------------------------------------------------------- */
@keyframes pwa-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200px 100%;
  border-radius: 8px;
  animation: pwa-shimmer 1.4s infinite linear;
  display: block;
}
.skeleton-row    { height: 56px; margin-bottom: 8px; border-radius: 12px; }
.skeleton-text   { height: 14px; margin-bottom: 6px; }
.skeleton-text.short { width: 40%; }
.skeleton-text.long  { width: 80%; }
.skeleton-circle { width: 38px; height: 38px; border-radius: 50%; }
.skeleton-card   { height: 120px; border-radius: 18px; margin-bottom: 12px; }
.skeleton-list .skeleton-row + .skeleton-row { margin-top: 4px; }

/* ---------------------------------------------------------------------
 * OFFLINE BANNER — controlado por pwa-app.js
 * --------------------------------------------------------------------- */
#pwa-offline-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 100%;
  max-width: 480px;
  background: #ff5040;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  padding: 10px 16px;
  z-index: 10000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#pwa-offline-banner.show { transform: translateX(-50%) translateY(0); }
#pwa-offline-banner.online { background: #2dbf6f; }
@supports (padding: max(0px)) {
  #pwa-offline-banner {
    padding-top: max(10px, calc(env(safe-area-inset-top) + 6px));
  }
}

/* ---------------------------------------------------------------------
 * INSTALL PROMPT — banner que aparece quando navegador suporta install
 * --------------------------------------------------------------------- */
#pwa-install-prompt {
  position: fixed;
  bottom: 110px; /* acima da bottom-nav */
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  width: calc(100% - 32px);
  max-width: 448px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
#pwa-install-prompt.show { transform: translateX(-50%) translateY(0); }
#pwa-install-prompt .pip-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
#pwa-install-prompt .pip-text { flex: 1; min-width: 0; font-size: 0.82rem; line-height: 1.3; }
#pwa-install-prompt .pip-text strong { display: block; font-size: 0.88rem; }
#pwa-install-prompt .pip-actions { display: flex; gap: 6px; flex-shrink: 0; }
#pwa-install-prompt button {
  background: none; color: #fff; border: 0; padding: 6px 10px;
  border-radius: 8px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
}
#pwa-install-prompt button.pip-primary { background: #fff; color: #000; }

/* ---------------------------------------------------------------------
 * TAP HIGHLIGHT — mata flash azul de safari/chrome em buttons/links
 * --------------------------------------------------------------------- */
button, a, .list-row, .menu-item, .action-btn, .nav-item {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------
 * OVERSCROLL — nao deixa o body "puxar" no iOS PWA
 * --------------------------------------------------------------------- */
html, body {
  overscroll-behavior-y: contain;
}

/* ---------------------------------------------------------------------
 * STANDALONE-SPECIFIC — esconde elementos so visiveis em browser comum
 * --------------------------------------------------------------------- */
@media (display-mode: standalone) {
  .browser-only { display: none !important; }
  body.standalone-app { padding-top: env(safe-area-inset-top); }
}