/* Pyrk native Android/iOS app polish layer v5
   Safe additive CSS. Fixes Android WebView scroll, horizontal overflow, and bottom navigation. */
:root{
  --pyrk-app-green:#087f5b;
  --pyrk-app-green-2:#0f9f72;
  --pyrk-app-ink:#102033;
  --pyrk-app-muted:#64748b;
  --pyrk-app-surface:#ffffff;
  --pyrk-app-bg:#f4fbf7;
  --pyrk-app-border:#dcefe7;
  --pyrk-safe-top:env(safe-area-inset-top,0px);
  --pyrk-safe-bottom:env(safe-area-inset-bottom,0px);
}


/* Strong Android/iOS WebView scroll unlock */
html.pyrk-native-app{
  height:100% !important;
  min-height:100% !important;
  overflow-x:hidden !important;
  overflow-y:scroll !important;
  overscroll-behavior-y:auto !important;
}

body.pyrk-native-app{
  position:relative !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  min-height:calc(100vh + 1px) !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-y !important;
}

body.pyrk-native-app::after{
  content:"";
  display:block;
  height:calc(118px + var(--pyrk-safe-bottom));
  pointer-events:none;
}

body.pyrk-native-app #app,
body.pyrk-native-app #root,
body.pyrk-native-app .app-root,
body.pyrk-native-app .page-root,
body.pyrk-native-app .layout-root,
body.pyrk-native-app .mobile-root,
body.pyrk-native-app .client-root,
body.pyrk-native-app .admin-root{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-height:100vh !important;
  height:auto !important;
  overflow:visible !important;
}

html,
body{
  width:100% !important;
  max-width:100% !important;
  min-height:100%;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:auto;
  touch-action:pan-y;
}

html.pyrk-native-app,
body.pyrk-native-app{
  max-width:100vw !important;
  overflow-x:hidden !important;
}

body.pyrk-native-app{
  overflow-y:visible !important;
  background:linear-gradient(180deg,#f4fbf7 0%,#eef4f2 100%) !important;
  color:var(--pyrk-app-ink);
  padding-bottom:calc(92px + var(--pyrk-safe-bottom)) !important;
}

body.pyrk-native-app *,
body.pyrk-native-app *::before,
body.pyrk-native-app *::after{
  box-sizing:border-box;
  max-width:100vw;
  -webkit-tap-highlight-color:rgba(8,127,91,.12);
}

body.pyrk-native-app img,
body.pyrk-native-app video,
body.pyrk-native-app canvas,
body.pyrk-native-app iframe,
body.pyrk-native-app svg{
  max-width:100% !important;
}

body.pyrk-native-app main,
body.pyrk-native-app .app,
body.pyrk-native-app .page,
body.pyrk-native-app .shell,
body.pyrk-native-app .dashboard,
body.pyrk-native-app .member-dashboard,
body.pyrk-native-app .content,
body.pyrk-native-app .container,
body.pyrk-native-app .app-shell,
body.pyrk-native-app .auth-shell,
body.pyrk-native-app .portal-shell,
body.pyrk-native-app .client-interface,
body.pyrk-native-app .client-dashboard,
body.pyrk-native-app .dashboard-page,
body.pyrk-native-app .dashboard-shell,
body.pyrk-native-app .member-page,
body.pyrk-native-app .member-home,
body.pyrk-native-app .member-app,
body.pyrk-native-app .native-app-page{
  width:100% !important;
  max-width:100% !important;
  min-height:auto !important;
  height:auto !important;
  overflow:visible !important;
}

body.pyrk-native-app .container{
  padding-left:14px !important;
  padding-right:14px !important;
}

body.pyrk-native-app .pyrk-native-scroll-root{
  height:auto !important;
  min-height:100vh !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch !important;
}

body.pyrk-native-app input,
body.pyrk-native-app select,
body.pyrk-native-app textarea,
body.pyrk-native-app button,
body.pyrk-native-app .btn,
body.pyrk-native-app a[role="button"]{
  min-height:44px;
  font-size:16px;
}

body.pyrk-native-app button,
body.pyrk-native-app .btn,
body.pyrk-native-app a.btn,
body.pyrk-native-app [class*="button"]{
  border-radius:16px;
}

body.pyrk-native-app .card,
body.pyrk-native-app .panel,
body.pyrk-native-app .stat-card,
body.pyrk-native-app .walk-card,
body.pyrk-native-app .member-card,
body.pyrk-native-app .glass-card{
  border-radius:24px;
  border-color:rgba(8,127,91,.14);
  box-shadow:0 18px 48px rgba(16,32,51,.08);
}

body.pyrk-native-app .pyrk-native-app-banner{
  display:none !important;
}

body.pyrk-native-app .table-wrap,
body.pyrk-native-app table{
  max-width:100% !important;
}

body.pyrk-native-app .table-wrap{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

body.pyrk-native-app table{
  width:100%;
}

/* Native mobile topbar and drawer */
@media (max-width:900px){
  body.pyrk-native-app .topbar.pro-nav,
  body.pyrk-native-app header.topbar{
    position:sticky !important;
    top:0 !important;
    z-index:90 !important;
    width:100% !important;
    max-width:100vw !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:calc(8px + var(--pyrk-safe-top)) 14px 10px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(8,127,91,.14) !important;
    border-radius:0 0 24px 24px !important;
    background:rgba(255,255,255,.96) !important;
    backdrop-filter:blur(18px) !important;
    box-shadow:0 18px 42px rgba(16,32,51,.10) !important;
    overflow:visible !important;
  }

  body.pyrk-native-app .brand.brand-managed,
  body.pyrk-native-app .topbar .brand{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  body.pyrk-native-app .brand-mark{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:16px !important;
    background:linear-gradient(135deg,var(--pyrk-app-green),var(--pyrk-app-green-2)) !important;
    color:white !important;
    box-shadow:0 12px 28px rgba(8,127,91,.22) !important;
  }

  body.pyrk-native-app .brand-copy{
    min-width:0 !important;
    display:grid !important;
    line-height:1.05 !important;
  }

  body.pyrk-native-app .brand-copy strong{
    max-width:48vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:1rem !important;
    color:#0f172a !important;
  }

  body.pyrk-native-app .brand-copy small{
    display:block !important;
    margin-top:3px !important;
    color:var(--pyrk-app-green) !important;
    font-size:.7rem !important;
    font-weight:950 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }

  body.pyrk-native-app .nav-toggle{
    display:grid !important;
    place-items:center !important;
    width:46px !important;
    height:46px !important;
    border:1px solid rgba(8,127,91,.16) !important;
    border-radius:17px !important;
    background:linear-gradient(180deg,#fff,#f4fbf7) !important;
    box-shadow:0 12px 26px rgba(16,32,51,.10) !important;
    padding:0 !important;
  }

  body.pyrk-native-app .nav-toggle span{
    width:20px !important;
    height:2px !important;
    margin:0 !important;
    background:#102033 !important;
  }

  body.pyrk-native-app .nav-menu{
    grid-column:1/-1 !important;
    width:100% !important;
    max-width:100% !important;
    display:none !important;
    gap:8px !important;
    padding:10px !important;
    border:1px solid rgba(8,127,91,.14) !important;
    border-radius:22px !important;
    background:linear-gradient(180deg,#ffffff,#f8fffb) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8) !important;
    max-height:calc(72vh - var(--pyrk-safe-top)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.pyrk-native-app .pro-nav.nav-open .nav-menu,
  body.pyrk-native-app .topbar.nav-open .nav-menu{
    display:grid !important;
  }

  body.pyrk-native-app .nav-link,
  body.pyrk-native-app .nav-group-btn{
    width:100% !important;
    min-height:50px !important;
    justify-content:space-between !important;
    padding:13px 14px !important;
    border:1px solid rgba(15,23,42,.06) !important;
    border-radius:17px !important;
    background:#fff !important;
    color:#102033 !important;
    font-size:.96rem !important;
    font-weight:950 !important;
    box-shadow:0 8px 20px rgba(16,32,51,.04) !important;
  }

  body.pyrk-native-app .nav-link.active,
  body.pyrk-native-app .nav-group-btn.active{
    background:linear-gradient(135deg,#087f5b,#0f9f72) !important;
    color:#fff !important;
    border-color:transparent !important;
  }

  body.pyrk-native-app .nav-group{
    width:100% !important;
    max-width:100% !important;
  }

  body.pyrk-native-app .nav-dropdown,
  body.pyrk-native-app .nav-dropdown-wide{
    position:static !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    transform:none !important;
    padding:8px !important;
    margin:8px 0 0 !important;
    border-radius:18px !important;
    border:1px solid rgba(8,127,91,.10) !important;
    background:#f8fffb !important;
    box-shadow:none !important;
    display:none !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  body.pyrk-native-app .nav-group.open > .nav-dropdown,
  body.pyrk-native-app .nav-group:focus-within > .nav-dropdown{
    display:grid !important;
  }

  body.pyrk-native-app .nav-dropdown a{
    width:100% !important;
    max-width:100% !important;
    padding:12px !important;
    border-radius:15px !important;
    background:#fff !important;
    border:1px solid rgba(15,23,42,.06) !important;
    color:#102033 !important;
  }

  body.pyrk-native-app .nav-dropdown a small{
    color:#64748b !important;
    line-height:1.35 !important;
  }

  body.pyrk-native-app .nav-user{
    grid-column:1/-1 !important;
    width:100% !important;
    max-width:100% !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px !important;
    border:1px solid rgba(8,127,91,.12) !important;
    border-radius:21px !important;
    background:rgba(244,251,247,.86) !important;
    overflow:hidden !important;
  }

  body.pyrk-native-app .pyrk-live-clock{
    grid-column:1/-1 !important;
    width:100% !important;
    min-width:0 !important;
    order:10 !important;
    padding:9px 12px !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  body.pyrk-native-app .pyrk-live-clock small{
    display:block !important;
  }

  body.pyrk-native-app .user-chip{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    order:1 !important;
    padding:7px !important;
    border-radius:17px !important;
    background:#fff !important;
    border:1px solid rgba(15,23,42,.06) !important;
    box-shadow:0 8px 20px rgba(16,32,51,.04) !important;
    overflow:hidden !important;
  }

  body.pyrk-native-app .user-chip strong{
    max-width:42vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:.92rem !important;
  }

  body.pyrk-native-app .nav-action-pill{
    display:none !important;
  }

  body.pyrk-native-app .btn-logout{
    order:2 !important;
    width:auto !important;
    min-width:92px !important;
    height:48px !important;
    padding:0 14px !important;
    border-radius:17px !important;
    background:#102033 !important;
    color:#fff !important;
    box-shadow:0 12px 24px rgba(16,32,51,.14) !important;
    white-space:nowrap !important;
  }

  body.pyrk-native-app .page-hero,
  body.pyrk-native-app .client-hero,
  body.pyrk-native-app .dashboard-hero,
  body.pyrk-native-app .client-hero-card,
  body.pyrk-native-app .member-mobile-experience-pro,
  body.pyrk-native-app .member-app-hero-card,
  body.pyrk-native-app .walk-card,
  body.pyrk-native-app .walk-card-list,
  body.pyrk-native-app .panel,
  body.pyrk-native-app .card,
  body.pyrk-native-app .stat,
  body.pyrk-native-app .section-head,
  body.pyrk-native-app .grid,
  body.pyrk-native-app .client-dashboard-grid,
  body.pyrk-native-app .client-rewards-suite,
  body.pyrk-native-app .rewards-market-panel-pro,
  body.pyrk-native-app .points-ledger-panel-pro{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  body.pyrk-native-app .grid,
  body.pyrk-native-app .client-dashboard-grid,
  body.pyrk-native-app .client-rewards-suite,
  body.pyrk-native-app .member-app-main-grid,
  body.pyrk-native-app .member-app-info-grid{
    grid-template-columns:1fr !important;
  }

  body.pyrk-native-app .section-head{
    align-items:flex-start !important;
  }

  body.pyrk-native-app .section-head .btn,
  body.pyrk-native-app .member-app-action,
  body.pyrk-native-app .walk-card .btn{
    width:100% !important;
  }
}

/* Bottom app dock: created by native_app_mobile_polish.js */
.pyrk-native-dock{
  display:none;
}

@media (max-width:900px){
  body.pyrk-native-app .pyrk-native-dock{
    position:fixed;
    left:12px;
    right:12px;
    bottom:calc(10px + var(--pyrk-safe-bottom));
    z-index:100;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:6px;
    padding:8px;
    border:1px solid rgba(8,127,91,.16);
    border-radius:26px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
    box-shadow:0 20px 55px rgba(16,32,51,.18);
    max-width:calc(100vw - 24px);
  }

  body.pyrk-native-app .pyrk-native-dock a,
  body.pyrk-native-app .pyrk-native-dock button{
    appearance:none;
    border:0;
    background:transparent;
    color:#64748b;
    min-width:0;
    min-height:50px;
    padding:6px 4px;
    border-radius:18px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:2px;
    font:inherit;
    font-weight:950;
    font-size:.68rem;
    line-height:1.05;
    text-decoration:none;
    cursor:pointer;
  }

  body.pyrk-native-app .pyrk-native-dock a span,
  body.pyrk-native-app .pyrk-native-dock button span{
    font-size:1.05rem;
    line-height:1;
  }

  body.pyrk-native-app .pyrk-native-dock .is-primary{
    background:linear-gradient(135deg,#087f5b,#0f9f72);
    color:#fff;
    box-shadow:0 12px 24px rgba(8,127,91,.22);
  }

  body.pyrk-native-app .pyrk-native-dock .is-danger{
    background:#fff4f2;
    color:#b42318;
  }
}

@media (display-mode:standalone){
  body{
    padding-bottom:calc(92px + var(--pyrk-safe-bottom));
  }
}


/* v3: better dock item next to Logout — Pass replaces redundant Menu. */
@media (max-width:900px){
  body.pyrk-native-app .pyrk-native-dock{
    grid-template-columns:repeat(5,minmax(0,1fr));
    left:14px;
    right:14px;
    max-width:calc(100vw - 28px);
  }

  body.pyrk-native-app .pyrk-native-dock [data-pyrk-dock-pass]{
    background:#f8fafc;
    color:#0f172a;
  }

  body.pyrk-native-app .pyrk-native-dock [data-pyrk-dock-pass] span{
    color:#087f5b;
  }

  body.pyrk-native-app .pyrk-native-dock .is-danger{
    background:#fff7f5;
    border:1px solid rgba(180,35,24,.08);
  }

  body.pyrk-native-app .pyrk-native-dock a,
  body.pyrk-native-app .pyrk-native-dock button{
    -webkit-user-select:none;
    user-select:none;
  }
}

/* v3: never allow fixed full-page overlays to trap scroll in app mode unless explicitly visible modal. */
body.pyrk-native-app:not(.modal-open) .modal:not(.show),
body.pyrk-native-app:not(.modal-open) .drawer-backdrop:not(.is-open),
body.pyrk-native-app:not(.modal-open) .overlay:not(.is-open){
  pointer-events:none !important;
}

/* Native app profile/prizes polish */
body.pyrk-native-app .pyrk-native-prizes-link{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px !important;
  margin:8px 0 !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(8,127,91,.12), rgba(255,255,255,.96)) !important;
  border:1px solid rgba(8,127,91,.18) !important;
  box-shadow:0 12px 30px rgba(16,32,51,.08) !important;
  color:#102033 !important;
  text-decoration:none !important;
}
body.pyrk-native-app .pyrk-native-prizes-link strong{font-size:.98rem;font-weight:1000;color:#102033;}
body.pyrk-native-app .pyrk-native-prizes-link small{display:block;color:#64748b;font-size:.72rem;font-weight:800;margin-top:2px;}
body.pyrk-native-app #memberProfileSection{scroll-margin-top:118px;}


/* v5: walk photo shortcut and six-item dock on walk pages */
@media (max-width:900px){
  body.pyrk-native-app .pyrk-native-dock.has-photos{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:7px;}
  body.pyrk-native-app .pyrk-native-dock.has-photos a,
  body.pyrk-native-app .pyrk-native-dock.has-photos button{font-size:.6rem;min-height:48px;padding:5px 2px;border-radius:16px;}
  body.pyrk-native-app .pyrk-native-dock.has-photos a span,
  body.pyrk-native-app .pyrk-native-dock.has-photos button span{font-size:1rem;}
  body.pyrk-native-app [data-photo-upload-panel],
  body.pyrk-native-app #photoUploadPanel,
  body.pyrk-native-app #photoForm{scroll-margin-top:118px;}
  body.pyrk-native-app .pyrk-native-dock [data-pyrk-dock-photos]{background:#eefaf5;color:#087f5b;border:1px solid rgba(8,127,91,.10);}
}

/* Native members sign out from the dedicated Profile page, not from every screen. */
body.pyrk-native-app.pyrk-native-member .nav-user .btn-logout{
  display:none !important;
}
