/* ════════════════════════════════════════════════════════
   assets/css/pwa-style.css
   Todos os estilos PWA em um único arquivo.
   ════════════════════════════════════════════════════════ */

/* ── Safe area custom properties ─────────────────────── */
:root {
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --bottom-nav-h:     60px;
  --bottom-nav-total: calc(var(--bottom-nav-h) + var(--sab));
  --pgbar-color:      #3b82f6;
}

/* ── Modo standalone: espaço para o bottom nav ────────── */
@media (max-width: 768px) {
  .is-ios-standalone body,
  .is-pwa-standalone body {
    padding-bottom: var(--bottom-nav-total);
  }
}

/* ── Header: safe area para notch / Dynamic Island ───── */
.is-ios-standalone .site-header,
.is-pwa-standalone .site-header {
  padding-top: var(--sat);
}
.is-ios-standalone #header-spacer,
.is-pwa-standalone #header-spacer {
  height: var(--sat);
}

/* ════════════════════════════════════════════════════════
   Barra de progresso de navegação
   ════════════════════════════════════════════════════════ */
#page-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
#page-progress.is-visible { opacity: 1; }
#page-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--pgbar-color);
  box-shadow: 0 0 6px var(--pgbar-color);
  transition: width .35s cubic-bezier(.22, 1, .36, 1);
  border-radius: 0 2px 2px 0;
}
#page-progress.is-done #page-progress-fill { width: 100% !important; }
#page-progress.is-done {
  transition: opacity .3s ease .2s;
  opacity: 0;
}

/* ════════════════════════════════════════════════════════
   Pull-to-refresh
   ════════════════════════════════════════════════════════ */
html { overscroll-behavior-y: contain; }

#ptr-wrap {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 2147483646;
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
}
#ptr-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 99px;
  padding: 8px 16px 8px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.08);
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  font-family: -apple-system, system-ui, sans-serif;
  transition: background .2s, color .2s;
}
#ptr-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
  flex-shrink: 0;
}
#ptr-icon svg { display: block; }

#ptr-wrap.is-ready #ptr-pill   { background: #f0fdf4; color: #15803d; }
#ptr-wrap.is-ready #ptr-icon   { background: #dcfce7; transform: rotate(180deg); }
#ptr-wrap.is-ready #ptr-icon svg { stroke: #16a34a; }

#ptr-wrap.is-refreshing #ptr-icon { background: #eff6ff; }
#ptr-wrap.is-refreshing #ptr-icon svg.ptr-arrow   { display: none; }
#ptr-wrap.is-refreshing #ptr-icon svg.ptr-spinner { display: block !important; }
#ptr-wrap.is-refreshing #ptr-pill { background: #eff6ff; color: #2563eb; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.ptr-spinner { animation: ptr-spin .7s linear infinite; transform-origin: center; }

/* ════════════════════════════════════════════════════════
   View Transitions
   ════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }

@keyframes vt-slide-in {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes vt-slide-out {
  to { opacity: 0; transform: translateY(-6px); }
}
::view-transition-old(root) { animation: 180ms ease-in  both vt-slide-out; }
::view-transition-new(root) { animation: 260ms cubic-bezier(.22,1,.36,1) both vt-slide-in; }

/* Fallback JS */
.page-exit  { animation: 180ms ease-in  both vt-slide-out; pointer-events: none; }
.page-enter { animation: 260ms cubic-bezier(.22,1,.36,1) both vt-slide-in; }

/* ════════════════════════════════════════════════════════
   Bottom Navigation
   ════════════════════════════════════════════════════════ */
#pwa-bottom-nav { display: none; }

@media (max-width: 768px) {
  #pwa-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-total);
    padding-bottom: var(--sab);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(0,0,0,.08);
    z-index: 1000;
    align-items: stretch;
    justify-content: space-around;
  }
}
@media (min-width: 769px) { #pwa-bottom-nav { display: none !important; } }

.pwa-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 6px 4px 0;
  position: relative;
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.pwa-nav-item svg {
  width: 22px; height: 22px;
  stroke: currentColor;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), stroke .18s ease;
}
.pwa-nav-item span { line-height: 1; transition: color .18s ease; }

.pwa-nav-item.is-active { color: #2563eb; }
.pwa-nav-item.is-active svg { transform: scale(1.08) translateY(-1px); }
.pwa-nav-item.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 3px;
  background: #2563eb;
  border-radius: 0 0 3px 3px;
  animation: nav-dot-in .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes nav-dot-in {
  from { width: 0; opacity: 0; }
  to   { width: 20px; opacity: 1; }
}

.pwa-nav-badge {
  position: absolute;
  top: 4px; right: calc(50% - 18px);
  min-width: 16px; height: 16px;
  background: #ef4444;
  color: #fff;
  font-size: 9px; font-weight: 800;
  border-radius: 99px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
  line-height: 1;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════
   Splash screen animado
   ════════════════════════════════════════════════════════ */
#pwa-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--pwa-splash-bg, #0f172a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  animation: splash-hold 1.2s ease forwards;
}
@keyframes splash-hold {
  0%, 80% { opacity: 1; }
  100%    { opacity: 0; }
}
#pwa-splash img {
  width: 80px; height: 80px;
  border-radius: 20px;
  animation: splash-logo .5s cubic-bezier(.34,1.56,.64,1) .1s both;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
@keyframes splash-logo {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
#pwa-splash .splash-name {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,.8);
  letter-spacing: -.2px;
  animation: splash-logo .5s cubic-bezier(.22,1,.36,1) .25s both;
}

/* ════════════════════════════════════════════════════════
   Layout mobile: sidebar e footer substituídos pelo bottom nav
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .customer-sidebar   { display: none; }
  .site-footer        { display: none; }
  .customer-layout    { grid-template-columns: 1fr; }
}