/* Mijn SuperFit 2.26.0 — visual sync with AI Coach 1.1.x
   Pure presentation/shell layer. Existing member functionality remains in member.js. */
:root{
  --msf-green:#153f34;
  --msf-green-2:#235b4b;
  --msf-mint:#edf5f1;
  --msf-lime:#cae75f;
  --msf-ink:#121a17;
  --msf-muted:#68766f;
  --msf-line:#d7e1dd;
  --msf-bg:#f4f6f5;
  --msf-card:#fff;
  --msf-danger:#a72f3b;
  --msf-safe-top:env(safe-area-inset-top,0px);
  --msf-safe-right:env(safe-area-inset-right,0px);
  --msf-safe-bottom:env(safe-area-inset-bottom,0px);
  --msf-safe-left:env(safe-area-inset-left,0px);
  --msf-header:88px;
  --msf-nav:76px;
}
html,body{width:100%;height:100%;background:var(--msf-bg);color:var(--msf-ink)}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* Auth screens: same calm AI Coach visual language. */
.auth-page{min-height:100dvh;background:var(--msf-bg);padding:max(22px,var(--msf-safe-top)) max(18px,var(--msf-safe-right)) max(22px,var(--msf-safe-bottom)) max(18px,var(--msf-safe-left))}
.auth-card{border:1px solid var(--msf-line);border-radius:27px;box-shadow:0 12px 34px rgba(15,55,43,.08);background:#fff}
.auth-card input{border:1px solid var(--msf-line);border-radius:13px;min-height:49px}
.auth-card .primary-button{background:var(--msf-green)}

/* The member PWA uses exactly one fixed shell: header / content / bottom navigation. */
#memberView.member-app{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  height:100dvh!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:calc(var(--msf-header) + var(--msf-safe-top)) minmax(0,1fr) calc(var(--msf-nav) + var(--msf-safe-bottom))!important;
  overflow:hidden!important;
  background:var(--msf-bg)!important;
}

#memberView .topbar{
  position:relative!important;
  inset:auto!important;
  grid-row:1!important;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  align-items:end!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:calc(10px + var(--msf-safe-top)) max(16px,var(--msf-safe-right)) 11px max(16px,var(--msf-safe-left))!important;
  background:#fff!important;
  border-bottom:1px solid var(--msf-line)!important;
  z-index:70!important;
  box-shadow:none!important;
}
#memberView .topbar-brand{min-width:0!important;display:flex!important;align-items:center!important;gap:12px!important;color:var(--msf-ink)!important}
#memberView .topbar-logo{width:54px!important;height:42px!important;object-fit:contain!important;flex:0 0 auto!important}
#memberView .topbar-brand>span{display:grid!important;min-width:0!important}
#memberView .topbar-brand strong{font-size:clamp(22px,4vw,30px)!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#memberView .topbar-brand small{display:block!important;font-size:13px!important;color:var(--msf-muted)!important;margin-top:4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#memberView .topbar-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;flex:0 0 auto!important}
#memberView .topbar-icon-button{
  position:relative!important;
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  padding:0!important;
  border:1px solid var(--msf-line)!important;
  border-radius:15px!important;
  background:#fff!important;
  color:var(--msf-green)!important;
  display:grid!important;
  place-items:center!important;
  box-shadow:none!important;
}
#memberView .topbar-icon-button .sf-icon svg{width:24px!important;height:24px!important}
#memberView #memberSearchButton,#memberView #memberNotifyButton,#memberView #menuButton{display:grid!important}
#memberView #simpleModeButton,#memberView #refreshButton,#memberView #mobileLogoutButton,#memberView #logoutButton{display:none!important}
#memberView #memberNotificationBadge{position:absolute!important;right:-4px!important;top:-5px!important;margin:0!important;min-width:21px!important;height:21px!important;padding:0 4px!important;border-radius:999px!important;background:#e83f4b!important;color:#fff!important;border:2px solid #fff!important;font-size:11px!important;font-weight:900!important;place-items:center!important}
#memberView #memberNotificationBadge:not([hidden]){display:grid!important}

/* One native scroll container between header and navigation. */
#memberView #mainContent.main-content{
  position:relative!important;
  grid-row:2!important;
  min-height:0!important;
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:22px max(16px,var(--msf-safe-right)) 34px max(16px,var(--msf-safe-left))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable!important;
  background:var(--msf-bg)!important;
}
#memberView #mainContent>.view-panel,
#memberView #mainContent>.loading-card,
#memberView #mainContent>.error-card{width:min(100%,1120px)!important;margin-left:auto!important;margin-right:auto!important}
#memberView .view-panel{max-width:1120px!important}
#memberView .view-panel>.eyebrow:first-child,#memberView .welcome-row .eyebrow{margin-top:0!important}
#memberView .view-panel h1{font-size:clamp(31px,6vw,48px)!important;line-height:1.03!important;margin:4px 0 9px!important;color:var(--msf-ink)!important}
#memberView .lead{color:var(--msf-muted)!important;font-size:16px!important;line-height:1.45!important}
#memberView .eyebrow{color:var(--msf-green-2)!important;font-size:12px!important;font-weight:850!important;text-transform:uppercase!important;letter-spacing:.14em!important}

/* Cards and controls use the same radii, borders and density as AI Coach. */
#memberView .dashboard-card,#memberView .info-panel,#memberView .content-card,#memberView .empty-card,#memberView .message-card,#memberView .exercise-card,#memberView .action-center-block,#memberView .progress-kpi,#memberView .progress-chart-card{
  background:#fff!important;
  border:1px solid var(--msf-line)!important;
  border-radius:20px!important;
  box-shadow:0 4px 18px rgba(20,55,44,.03)!important;
}
#memberView .dashboard-card{min-height:0!important;padding:17px!important}
#memberView .info-panel,#memberView .content-card,#memberView .empty-card,#memberView .message-card{padding:17px!important}
#memberView .dashboard-grid{gap:12px!important}
#memberView .content-stack{gap:12px!important}
#memberView .overview-columns{gap:12px!important;margin-top:12px!important}
#memberView .action-center-block{padding:17px!important;margin-bottom:14px!important}
#memberView .action-center-item{background:#fff!important;border:1px solid var(--msf-line)!important;border-radius:14px!important}
#memberView .accent-card{background:var(--msf-green)!important;color:#fff!important;border-color:var(--msf-green)!important}
#memberView .card-icon{background:var(--msf-mint)!important;color:var(--msf-green)!important}
#memberView .accent-card .card-icon{background:rgba(255,255,255,.13)!important;color:var(--msf-lime)!important}
#memberView .primary-button,#memberView .ai-button{background:var(--msf-green)!important;color:#fff!important;border-radius:13px!important}
#memberView .secondary-button{background:#fff!important;color:var(--msf-green)!important;border:1px solid var(--msf-line)!important;border-radius:13px!important}
#memberView .ai-button{min-width:0!important;width:100%!important;border-radius:21px!important;padding:17px 18px!important;justify-content:flex-start!important}
#memberView .status-chip,#memberView .exercise-meta span{background:var(--msf-mint)!important;color:var(--msf-green)!important}

/* Chat with coach gets a bounded page inside the same shell; only history scrolls. */
#memberView #view-berichten:not([hidden]){
  display:grid!important;
  grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  margin:0 auto!important;
}
#memberView #coachChatHeader{max-height:none!important;overflow:visible!important;padding:14px!important}
#memberView #coachChatThreadTabs{max-height:none!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 0 10px!important}
#memberView #messagesContent.coach-chat-history{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  margin:4px 0 6px!important;
  padding:8px 4px 14px!important;
}
#memberView #coachChatForm.coach-chat-composer{
  position:relative!important;
  inset:auto!important;
  bottom:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
  margin:0!important;
  padding:9px 0 4px!important;
  background:var(--msf-bg)!important;
}
#memberView #coachChatForm textarea{border:1px solid var(--msf-line)!important;border-radius:13px!important;background:#fff!important}
#memberView #coachChatSend{width:auto!important;margin:0!important}

/* Bottom navigation is always visible, just like AI Coach, including Mac/desktop PWA. */
#memberView .bottom-nav{
  position:relative!important;
  inset:auto!important;
  grid-row:3!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:2px!important;
  padding:5px max(6px,var(--msf-safe-right)) calc(5px + var(--msf-safe-bottom)) max(6px,var(--msf-safe-left))!important;
  background:#fff!important;
  border-top:1px solid var(--msf-line)!important;
  overflow:visible!important;
  z-index:70!important;
}
#memberView .bottom-nav-item{
  border:0!important;
  background:transparent!important;
  color:var(--msf-muted)!important;
  min-width:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:3px!important;
  border-radius:14px!important;
  font-size:12px!important;
  line-height:1.1!important;
  font-weight:800!important;
  overflow:visible!important;
}
#memberView .bottom-nav-item .sf-icon svg{width:22px!important;height:22px!important}
#memberView .bottom-nav-item>span:last-child{width:auto!important;overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important}
#memberView .bottom-nav-item.is-active{color:var(--msf-green)!important;background:#f5f9f7!important}

/* All secondary destinations live in a drawer, never in a permanent desktop sidebar. */
#memberView #sideNav.side-nav{
  position:fixed!important;
  z-index:90!important;
  top:calc(var(--msf-header) + var(--msf-safe-top))!important;
  bottom:calc(var(--msf-nav) + var(--msf-safe-bottom))!important;
  left:0!important;
  width:min(88vw,340px)!important;
  padding:14px 12px 24px!important;
  background:#fff!important;
  border-right:1px solid var(--msf-line)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  transform:translateX(-105%)!important;
  transition:transform .2s ease!important;
  box-shadow:0 16px 40px rgba(12,39,31,.16)!important;
}
#memberView #sideNav.side-nav.is-open{transform:translateX(0)!important}
#memberView #sideNav .nav-item{min-height:50px!important;border-radius:13px!important;color:var(--msf-ink)!important}
#memberView #sideNav .nav-item:hover,#memberView #sideNav .nav-item.is-active{background:var(--msf-mint)!important;color:var(--msf-green)!important}

/* Search behaves like the AI Coach bottom sheet. */
#memberView~#memberSearchPanel.member-search-panel{padding:max(16px,var(--msf-safe-top)) 0 0!important;display:grid!important;align-items:end!important;background:rgba(7,20,16,.45)!important;backdrop-filter:blur(2px)!important;overflow:hidden!important}
#memberView~#memberSearchPanel.member-search-panel[hidden]{display:none!important}
#memberView~#memberSearchPanel .member-search-card{width:min(700px,100%)!important;max-width:100%!important;max-height:84dvh!important;margin:0 auto!important;border-radius:27px 27px 0 0!important;padding:22px max(18px,var(--msf-safe-right)) calc(22px + var(--msf-safe-bottom)) max(18px,var(--msf-safe-left))!important;overflow-y:auto!important;box-shadow:none!important}
#memberView~#memberSearchPanel .member-search-card input{border:1px solid var(--msf-line)!important;border-radius:13px!important}
#memberView~#memberToast.member-toast{right:14px!important;bottom:calc(var(--msf-nav) + var(--msf-safe-bottom) + 12px)!important;border-radius:13px!important;background:#142e27!important}

@media(min-width:720px){
  :root{--msf-header:82px;--msf-nav:72px}
  #memberView .topbar{align-items:center!important;padding-top:calc(8px + var(--msf-safe-top))!important;padding-bottom:8px!important}
  #memberView .topbar-logo{width:62px!important;height:48px!important}
  #memberView #mainContent.main-content{padding:28px max(26px,var(--msf-safe-right)) 40px max(26px,var(--msf-safe-left))!important}
  #memberView .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #memberView .bottom-nav{padding-left:max(18vw,var(--msf-safe-left))!important;padding-right:max(18vw,var(--msf-safe-right))!important}
}
@media(min-width:1120px){
  #memberView .dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #memberView .bottom-nav{padding-left:calc((100vw - 760px)/2)!important;padding-right:calc((100vw - 760px)/2)!important}
}
@media(max-width:760px){
  #memberView #coachChatForm.coach-chat-composer{grid-template-columns:1fr!important}
  #memberView #coachChatSend{width:100%!important}
  #memberView .action-center-list{grid-template-columns:1fr!important}
  #memberView .dashboard-grid,#memberView .overview-columns{grid-template-columns:1fr!important}
}
@media(max-width:390px){
  :root{--msf-header:82px;--msf-nav:72px}
  #memberView .topbar{padding-left:11px!important;padding-right:11px!important}
  #memberView .topbar-brand{gap:8px!important}
  #memberView .topbar-logo{width:47px!important;height:36px!important}
  #memberView .topbar-brand strong{font-size:20px!important}
  #memberView .topbar-brand small{font-size:12px!important}
  #memberView .topbar-actions{gap:4px!important}
  #memberView .topbar-icon-button{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;border-radius:13px!important}
  #memberView .bottom-nav-item{font-size:11px!important}
}
@media(prefers-reduced-motion:reduce){#memberView *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}