/* ═══════════════════════════════════════════════════════
   JYOTVIRA AI — pwa.css
   PWA install banner + mobile polish.
   Appended after dashboard.css — uses same CSS variables.
   JYOTVIRA Systems · Avinash Jadhav
═══════════════════════════════════════════════════════ */

/* ── Global mobile baseline ─────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Momentum scrolling on iOS */
.content,
.sidebar-nav {
  -webkit-overflow-scrolling: touch;
}

/* Prevent pull-to-refresh jank in standalone mode */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: contain; }
}

/* ── Safe-area body padding (iOS home indicator) ─────── */
body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Toast: raise above safe area ───────────────────── */
.toast {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Standalone app shell (display-mode: standalone) ── */
@media (display-mode: standalone) {
  /* Status bar clearance on iOS */
  .topbar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  }
  .sidebar-logo {
    padding-top: calc(18px + env(safe-area-inset-top, 0px));
  }
  /* Sidebar itself gets full height including notch */
  .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Bottom content breathing room */
  .content {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  @media (max-width: 768px) {
    .content {
      padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* ── Minimum tap target size (44px — Apple HIG / WCAG) ─ */
.nav-item,
.btn-full,
.topbar-theme-btn,
.hamburger,
.up-btn {
  min-height: 44px;
}
.mode-chip,
.ob-chip,
.ex-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ── Form inputs: prevent iOS auto-zoom (must be ≥16px) */
@media (max-width: 768px) {
  .form-input,
  textarea,
  select {
    font-size: 16px !important;
  }
  /* Touch-friendly textarea */
  #customer-msg {
    min-height: 110px;
  }
}

/* ── Better stat cards on small screens ─────────────── */
@media (max-width: 480px) {
  .stat-card  { padding: 15px 14px; }
  .stat-number { font-size: 1.35rem; }
  .plan-card  { padding: 15px 14px; }
  .tool-body  { padding: 14px; }
}

/* ─────────────────────────────────────────────────────
   PWA INSTALL BANNER
   Fixed bottom bar — slides up from below.
   Created dynamically by pwa.js (no HTML changes needed).
───────────────────────────────────────────────────── */
#pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 28px rgba(0,0,0,.5);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  /* Limit width on desktop — looks out of place full-width */
  max-width: 520px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
}
#pwa-install-banner.pwa-show { transform: translateY(0); }
#pwa-install-banner.pwa-hide { transform: translateY(110%); }

/* Inner flex row */
.pwa-bi {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Flame icon container */
.pwa-bico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text block */
.pwa-btxt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pwa-btxt strong {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.pwa-btxt span {
  font-size: .73rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Install button */
.pwa-bbtn {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--accent);
  color: #0C0A00;
  font-family: 'DM Sans', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: 36px;
  transition: background var(--transition), transform .1s;
  white-space: nowrap;
}
.pwa-bbtn:hover  { background: var(--accent-hover); }
.pwa-bbtn:active { transform: scale(.96); }

/* Dismiss × button */
.pwa-bdis {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  transition: color var(--transition), background var(--transition);
}
.pwa-bdis:hover {
  color: var(--text);
  background: var(--bg-card);
}

/* Light theme overrides */
[data-theme="light"] #pwa-install-banner {
  background: #FFFFFF;
  border-top-color: #DCE5F0;
  box-shadow: 0 -4px 20px rgba(0,0,0,.1);
}

/* ── Page Progress Bar ──────────────────────────────────────────────────────── */
#jvpb {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent, #F59E0B), #FCD34D);
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(245,158,11,.6);
  border-radius: 0 2px 2px 0;
  opacity: 1;
}

/* On desktop (>520px) center the banner with rounded top corners */
@media (min-width: 521px) {
  #pwa-install-banner {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(110%);
    width: 100%;
    border-radius: 16px 16px 0 0;
  }
  #pwa-install-banner.pwa-show {
    transform: translateX(-50%) translateY(0);
  }
  #pwa-install-banner.pwa-hide {
    transform: translateX(-50%) translateY(110%);
  }
}