/* CHART PWA Shell — only active when running standalone (home-screen launch). */

/* Safe-area variables (iPhone notch + home indicator) */
:root {
  --pwa-topbar-h: 52px;
  --pwa-tabbar-h: 60px;
  --pwa-safe-top:    env(safe-area-inset-top, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Push page content below the top bar and above the bottom tabs */
html.pwa-standalone body {
  padding-top:    calc(var(--pwa-topbar-h) + var(--pwa-safe-top));
  padding-bottom: calc(var(--pwa-tabbar-h) + var(--pwa-safe-bottom));
}

/* If no back bar was rendered (top-level pages), only pad for the tab bar */
html.pwa-standalone body:not(:has(.pwa-topbar)) {
  padding-top: var(--pwa-safe-top);
}

/* If the tab bar is suppressed (in-player), only pad for the top bar */
html.pwa-standalone body:not(:has(.pwa-tabbar)) {
  padding-bottom: var(--pwa-safe-bottom);
}

/* ─── Top back bar ──────────────────────────────────────────────────────── */
.pwa-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  height: calc(var(--pwa-topbar-h) + var(--pwa-safe-top));
  padding: var(--pwa-safe-top) 8px 0 8px;
  background: #0D8B8E;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
}

.pwa-topbar__back {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Poppins, sans-serif;
  padding: 8px 10px 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  min-width: 72px;
  min-height: 44px;
}
.pwa-topbar__back:active { background: rgba(255,255,255,.14); }
.pwa-topbar__back svg { display: block; }

.pwa-topbar__title {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  font: 600 17px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Poppins, sans-serif;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}

.pwa-topbar__spacer {
  width: 72px;       /* mirrors back button so title stays centered */
  flex: 0 0 72px;
}

/* ─── Bottom tab bar ────────────────────────────────────────────────────── */
.pwa-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  height: calc(var(--pwa-tabbar-h) + var(--pwa-safe-bottom));
  padding-bottom: var(--pwa-safe-bottom);
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid rgba(11, 31, 42, .08);
  box-shadow: 0 -2px 12px rgba(11, 31, 42, .06);
}

.pwa-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #5A6A72;
  font: 500 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Poppins, sans-serif;
  padding: 6px 4px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease;
}
.pwa-tab:active { background: rgba(13, 139, 142, .06); }
.pwa-tab.is-active { color: #0D8B8E; }
.pwa-tab.is-active .pwa-tab__icon { transform: translateY(-1px); }

.pwa-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: transform .15s ease;
}
.pwa-tab__label {
  font-weight: 500;
  letter-spacing: .01em;
}

/* Dark background pages (player, marketing hero) — ensure tab bar readable */
@media (prefers-color-scheme: dark) {
  .pwa-tabbar {
    background: rgba(11, 31, 42, .92);
    border-top-color: rgba(255,255,255,.08);
  }
  .pwa-tab { color: #9FB0B8; }
  .pwa-tab.is-active { color: #6FE0E3; }
}

/* Hide the install banner while standalone (already installed) */
html.pwa-standalone #pwa-install-banner { display: none !important; }

/* Don't double-pad print views */
@media print {
  html.pwa-standalone body { padding: 0 !important; }
  .pwa-topbar, .pwa-tabbar { display: none !important; }
}