/* ==========================================================================
   CPI PWA layer — loaded on every page, but aggressive rules are scoped
   to @media (display-mode: standalone) so the regular browser view is
   completely untouched. Desktop and mobile-browser users see NO changes.
   Only when the site is launched from the iOS/Android home screen (i.e.
   running as an installed PWA) do the "native app feel" rules apply.
   ========================================================================== */

/* ---- Safe global rules (apply everywhere, safe on desktop) -------------- */

/* Kill the blue/gray tap flash on iOS/Android */
html {
  -webkit-tap-highlight-color: transparent;
}

/* Disable text selection on chrome UI only (not content, inputs, or tables).
   Whitelisting inputs/textareas/[contenteditable] is critical so forms still
   work. Tables/pre/code stay selectable so users can copy data. */
.sidebar, .sidebar *,
.topbar, .topbar *,
nav, nav *,
.nav-item, .nav-item *,
.page-header, .page-header *,
.page-nav, .page-nav *,
button, .btn, .btn-gold, .btn-next, .btn-prev, .btn-confirm,
.acct-stats-bar, .acct-stat,
.mobile-step-bar, .mobile-step-label,
.portfolio-stats-bar, .portfolio-header-card,
.step-list, .step-list *,
.ph-label, .ps-label, .ph-sub,
.overline-mono, .section-title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Prevent pull-to-refresh and rubber-band bounce on the document itself,
   WITHOUT locking overflow — desktop scrolling stays normal. */
html, body {
  overscroll-behavior-y: none;
}

/* Make scrollable containers feel native on iOS */
.sidebar, .main, .content, .onboard-main, .portal-sidebar,
[class*="scroll"], .table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* iOS: stop font-size auto-inflation on landscape */
html {
  -webkit-text-size-adjust: 100%;
}

/* ---- Standalone-mode-only rules (installed as PWA) ---------------------- */
/* These only fire when launched from the home screen. Browser view is safe. */
@media (display-mode: standalone) {

  /* Fill the viewport edge-to-edge, respecting the notch / home indicator */
  html, body {
    height: 100vh;
    height: 100dvh; /* modern: dynamic vh, avoids iOS Safari bar jump */
    margin: 0;
    padding: 0;
    overflow: hidden; /* page-level bounce off — inner containers scroll */
  }

  /* Root safe-area padding on body; most layouts cap children to 100%
     so this pushes content away from the notch / home indicator. */
  body {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
    box-sizing: border-box;
  }

  /* Main app containers — make them true 100% of the viewport minus
     whatever padding the safe area added, and let their inner scrollers
     handle the work. */
  .portal-layout,
  .onboard-layout,
  .app-layout {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  /* The main content column of every portal page is the natural scroller */
  .main,
  .onboard-main,
  .content-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
  }

  /* Disable text selection more broadly in standalone for a true app feel,
     but KEEP inputs, textareas, contenteditable, tables, pre, and code
     selectable so data is still copyable and forms still work. */
  body {
    -webkit-user-select: none;
    user-select: none;
  }
  input, textarea, select, [contenteditable="true"],
  table, td, th, pre, code, .data-table, .data-table * {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Hide any "back to public site" / browser-only affordances in PWA mode */
  .hide-in-standalone { display: none !important; }
}

/* ---- iOS standalone via legacy apple-mobile-web-app-capable ------------- */
/* Older iOS reports standalone via navigator.standalone, not display-mode.
   pwa.js sets html[data-standalone="true"] as a fallback so the same rules
   still apply on legacy iOS. */
html[data-standalone="true"], html[data-standalone="true"] body {
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
html[data-standalone="true"] body {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}
html[data-standalone="true"] .portal-layout,
html[data-standalone="true"] .onboard-layout,
html[data-standalone="true"] .app-layout {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
html[data-standalone="true"] .main,
html[data-standalone="true"] .onboard-main,
html[data-standalone="true"] .content-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
html[data-standalone="true"] input,
html[data-standalone="true"] textarea,
html[data-standalone="true"] select,
html[data-standalone="true"] [contenteditable="true"],
html[data-standalone="true"] table,
html[data-standalone="true"] td,
html[data-standalone="true"] th,
html[data-standalone="true"] pre,
html[data-standalone="true"] code,
html[data-standalone="true"] .data-table,
html[data-standalone="true"] .data-table * {
  -webkit-user-select: text;
  user-select: text;
}