/* CoachPro Responsive Foundation 2026-07-24
   Additive layer: improves ergonomics without changing feature logic. */

:root{
  --cp-page-gutter: clamp(12px, 3.2vw, 28px);
  --cp-content-max: 1480px;
  --cp-control-h: 48px;
  --cp-touch-min: 44px;
  --cp-section-gap: clamp(14px, 2.4vw, 28px);
  --cp-safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  --cp-safe-top: max(env(safe-area-inset-top, 0px), 0px);
  --cp-vh: 1vh;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(76px + var(--cp-safe-top));
  overflow-x:clip;
}
body{
  min-width:280px;
  min-height:calc(var(--cp-vh) * 100);
  overflow-x:clip;
}
img,video,canvas,svg{max-width:100%;height:auto}
iframe{max-width:100%}

/* Predictable content width on phones, tablets and wide desktop displays. */
main,
.cp-main,
.main-content,
.page-content{
  min-width:0;
}
.container,
.container-fluid{
  --bs-gutter-x:calc(var(--cp-page-gutter) * 2);
}
@media (min-width:1600px){
  .container{max-width:var(--cp-content-max)}
}
.row > *{min-width:0}

/* Comfortable controls and reliable iOS zoom behaviour. */
button,
.btn,
[role="button"],
a.btn,
input,
select,
textarea{
  touch-action:manipulation;
}
.form-control,
.form-select,
.input-brand{
  min-height:var(--cp-control-h);
  font-size:max(16px, 1rem);
  border-radius:16px;
}
textarea.form-control,textarea.input-brand{
  min-height:104px;
  resize:vertical;
}
.btn{
  min-height:var(--cp-touch-min);
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.15;
  white-space:normal;
}
.btn-sm{min-height:38px;border-radius:12px}
.btn-icon,
button[aria-label]:not(.navbar-toggler):not(.nav-icon-btn){min-width:var(--cp-touch-min);min-height:var(--cp-touch-min)}

/* Keyboard and accessibility focus without permanent mobile tap rings. */
:focus:not(:focus-visible){outline:none}
:focus-visible{
  outline:3px solid rgba(255,122,47,.46);
  outline-offset:3px;
}
@media (hover:none){
  *{-webkit-tap-highlight-color:transparent}
}

/* Cards scale instead of becoming cramped. */
.card,
.card-brand,
.cp-page-card,
.cp-page-hero{
  min-width:0;
  overflow-wrap:anywhere;
}
.cp-page-card,
.card-brand{
  padding:clamp(14px, 2.2vw, 24px);
  border-radius:clamp(20px, 3vw, 30px);
}
.cp-page-hero{
  padding:clamp(18px, 3.4vw, 36px);
  border-radius:clamp(24px, 4vw, 38px);
}
.cp-page-title{
  font-size:clamp(1.75rem, 4.8vw, 3.25rem);
  line-height:1.02;
  text-wrap:balance;
}
.cp-page-sub{max-width:68ch;font-size:clamp(.94rem, 1.5vw, 1.08rem)}
.cp-page-card-head{gap:12px}

/* Tables stay usable instead of shrinking columns below readability. */
.table-responsive{
  border-radius:18px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
table{font-variant-numeric:tabular-nums}
.table > :not(caption) > * > *{vertical-align:middle}

/* Modals and sheets respect notches, browser bars and virtual keyboard. */
.modal{padding-top:var(--cp-safe-top);padding-bottom:var(--cp-safe-bottom)}
.modal-dialog{
  margin:clamp(10px, 3vw, 28px) auto;
  max-height:calc(var(--cp-vh) * 100 - var(--cp-safe-top) - var(--cp-safe-bottom) - 20px);
}
.modal-content{max-height:inherit;border-radius:clamp(20px, 4vw, 30px);overflow:hidden}
.modal-body{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Horizontal navigation: stable touch targets and scroll snapping. */
.cp-client-tabs-v2__scroller,
.cp-tabbar-scroll,
.cp-tabs-scroll,
[role="tablist"]{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.cp-client-tabs-v2__scroller::-webkit-scrollbar,
.cp-tabbar-scroll::-webkit-scrollbar,
.cp-tabs-scroll::-webkit-scrollbar,
[role="tablist"]::-webkit-scrollbar{display:none}
.cp-client-tabs-v2__tab,
.cp-tab,
[role="tab"]{
  scroll-snap-align:center;
  min-height:44px;
}

/* Reserve a bottom safe zone only on screens that actually own a fixed tab dock.
   Applying it to every native page created an unnecessary empty strip below the footer. */
html.inapp body,
html.cp-native-app body,
html.cp-native-shell body{
  padding-bottom:0 !important;
}
html.inapp body.cp-has-bottom-tabs,
html.cp-native-app body.cp-has-bottom-tabs,
html.cp-native-shell body.cp-has-bottom-tabs{
  padding-bottom:calc(14px + var(--cp-safe-bottom)) !important;
}

/* Responsive list rows: action buttons do not squeeze the main content. */
.cp-list-rich-item{min-width:0}
.cp-list-rich-item > a{min-width:0}
.cp-list-title{overflow-wrap:anywhere}

/* Tablet: use the available width but keep finger-friendly spacing. */
@media (min-width:768px) and (max-width:1199.98px){
  :root{--cp-page-gutter:clamp(18px, 3vw, 30px)}
  .cp-page-hero .row{align-items:stretch!important}
  .cp-page-visual-card{height:100%}
}

/* Phones and foldable narrow panes. */
@media (max-width:767.98px){
  :root{--cp-page-gutter:14px;--cp-section-gap:16px}
  .container,.container-fluid{--bs-gutter-x:28px}
  .row{--bs-gutter-x:16px}
  .cp-page-hero{margin-inline:0}
  .cp-page-hero-actions{display:grid!important;grid-template-columns:1fr;width:100%}
  .cp-page-hero-actions .btn{width:100%}
  .cp-page-visual-card{max-height:240px;overflow:hidden}
  .cp-hero-visual,.cp-hero-photo{width:100%;height:100%;min-height:180px;object-fit:cover}
  .cp-page-card-head{align-items:flex-start!important}
  .cp-page-card-head > .badge{flex:0 0 auto}
  .list-group-item.cp-list-rich-item{padding:14px 12px;align-items:flex-start!important}
  .list-group-item.cp-list-rich-item > form{flex:0 0 auto}
  .dropdown-menu{max-width:calc(100vw - 24px)}
}

/* Small phones: stack dense rows and forms instead of clipping. */
@media (max-width:479.98px){
  :root{--cp-page-gutter:10px;--cp-control-h:46px}
  .container,.container-fluid{--bs-gutter-x:20px}
  .cp-page-card,.card-brand{padding:13px;border-radius:21px}
  .cp-page-hero{padding:17px 14px;border-radius:24px}
  .cp-page-title{font-size:clamp(1.65rem, 9vw, 2.25rem)}
  .cp-page-eyebrow{font-size:.72rem;letter-spacing:.08em}
  .cp-list-rich-item{flex-wrap:wrap}
  .cp-list-rich-item > a{flex-basis:calc(100% - 54px)}
  .cp-list-rich-item > form .btn{padding-inline:11px;font-size:.78rem}
  .cp-attention-overview{gap:8px}
  .cp-attention-stat{padding:11px 10px;border-radius:15px}
  .cp-premium-search input{padding-right:4.45rem!important}
  .cp-search-counter{max-width:4rem;overflow:hidden;text-overflow:ellipsis}
  .modal-dialog{margin:8px}
}

/* Very narrow devices and split-screen mode. */
@media (max-width:359.98px){
  :root{--cp-page-gutter:8px}
  .btn{font-size:.9rem;padding-inline:.75rem}
  .cp-page-card,.card-brand{padding:11px}
  .cp-attention-overview{grid-template-columns:1fr!important}
  .cp-attention-stat:last-child{grid-column:auto!important}
  .cp-client-tabs-v2__tab,.cp-tab{min-width:70px}
}

/* Wide screens: prevent oversized text lines and make two-column panels calmer. */
@media (min-width:1200px){
  .cp-page-card{height:auto}
  .cp-page-sub,.text-muted{line-height:1.55}
}

/* Respect users who disable motion; also removes WebView compositing flashes. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* High contrast and forced colours remain navigable. */
@media (forced-colors:active){
  .btn,.card,.card-brand,.cp-page-card,.cp-page-hero{border:1px solid CanvasText}
}

/* =========================================================
   CoachPro responsive corrections 2026-07-24
   ========================================================= */

/* Dashboard: the compact action must remain one readable word on phones. */
.cp-dashboard-clients-manage{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  padding-inline:.9rem !important;
}
.cp-dashboard-clients-manage > span{
  white-space:nowrap !important;
}
@media (max-width:479.98px){
  .cp-dashboard-clients-manage{
    font-size:.84rem !important;
    padding-inline:.72rem !important;
  }
}

/* Navbar: notifications, chat and theme switch use exactly the same optical box.
   Previously the theme switch alone inherited the generic 44 px button minimum. */
.navbar-actions .nav-icon-btn{
  box-sizing:border-box !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  flex:0 0 38px !important;
  padding:0 !important;
  line-height:1 !important;
}
.navbar-actions .nav-icon-btn .theme-icon,
.navbar-actions .nav-icon-btn .nav-ico-wrap{
  width:18px !important;
  height:18px !important;
}
@media (max-width:379.98px){
  .navbar-actions .nav-icon-btn{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    flex-basis:32px !important;
  }
  .navbar-actions .nav-icon-btn .theme-icon,
  .navbar-actions .nav-icon-btn .nav-ico-wrap{
    width:16px !important;
    height:16px !important;
  }
}

/* /me light theme: inactive labels need a dark foreground on transparent white glass.
   The active label keeps the established CoachPro orange accent. */
html[data-theme="light"] .cp-tabs-scope[data-cp-tabs="me"]
.cp-tabbar.cp-tabbar-glass .cp-tab .cp-tab-label{
  color:rgba(15,23,42,.82) !important;
  -webkit-text-fill-color:rgba(15,23,42,.82) !important;
  text-shadow:none !important;
}
html[data-theme="light"] .cp-tabs-scope[data-cp-tabs="me"]
.cp-tabbar.cp-tabbar-glass .cp-tab.is-active .cp-tab-label{
  color:#e95712 !important;
  -webkit-text-fill-color:#e95712 !important;
  text-shadow:0 1px 4px rgba(255,106,31,.15) !important;
}


/* =========================================================
   CoachPro responsive correction 2026-07-24
   Footer breathing room + calendar overflow protection
   ========================================================= */

/* Every page gets a small visual breathing room below the footer.
   Pages with a fixed bottom tab dock keep the larger safe zone defined elsewhere. */
.footer-brand{
  margin-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width:1180px){
  html.cp-has-glass-dock .footer-brand,
  body.cp-has-glass-dock .footer-brand,
  body:has(.cp-tabbar.cp-tabbar-glass) .footer-brand{
    margin-bottom:0 !important;
  }
}

/* Calendar layout must never become wider than its card or viewport. */
.me-cal-wrap,
.me-cal,
.me-cal-grid,
.me-cal-side,
.me-cal-side-list,
.trainer-calendar-page,
.trainer-calendar-card{
  min-width:0 !important;
  max-width:100% !important;
}

.me-cal-wrap,
.me-cal,
.me-cal-side{
  overflow:hidden;
}

.me-cal-side-list{
  overflow-x:hidden !important;
  overflow-y:auto;
}

/* Long workout names and automatic status notes may contain long phrases.
   They must wrap inside the selected-day panel instead of widening the calendar. */
.me-cal-item,
.me-cal-item-main,
.me-cal-item-title,
.me-cal-item-meta,
.me-cal-item-main .small,
.me-cal-item-main .text-muted{
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box;
}

.me-cal-item-title{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  text-overflow:clip !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}

.me-cal-item-meta,
.me-cal-item-main .small,
.me-cal-item-main .text-muted{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.me-cal-item-actions{
  flex:0 0 auto;
  max-width:100%;
}

.me-cal-action-row{
  max-width:100%;
}

/* A grid child defaults to min-width:auto, which allows its content to force
   the whole desktop/tablet calendar outside the visible card. */
@media (min-width:992px){
  .me-cal-wrap > *{
    min-width:0 !important;
  }
}

@media (max-width:767.98px){
  .me-cal-item{
    overflow:visible !important;
  }
  .me-cal-item-title{
    -webkit-line-clamp:3;
    line-clamp:3;
  }
  .me-cal-item-actions,
  .me-cal-action-row{
    width:100%;
  }
  .me-cal-action-row .btn{
    min-width:0;
    white-space:normal;
  }
}

/* CoachPro 2026-08-02: content-aware authenticated navbar.
   Browser zoom can leave more than 1200 CSS px while the full menu no longer fits.
   responsive.js adds .cp-nav-auto-compact only when real elements would collide. */
@media (min-width:1200px){
  .navbar.nav-brand.cp-nav-auto-compact{
    flex-wrap:wrap !important;
    align-content:flex-start;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-actions--mobile{
    display:flex !important;
  }
  .navbar.nav-brand.cp-nav-auto-compact > .navbar-toggler{
    display:block !important;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-right{
    display:none !important;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-collapse{
    display:none !important;
    flex:0 0 100% !important;
    flex-basis:100% !important;
    width:100% !important;
    min-width:0 !important;
    position:static !important;
    padding:.75rem .75rem 1rem !important;
    margin-top:.35rem;
    background:var(--nav-bg);
    border-top:1px solid var(--border);
    border-radius:0 0 18px 18px;
    box-shadow:none;
    max-height:min(72vh, 720px);
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-collapse.show,
  .navbar.nav-brand.cp-nav-auto-compact .navbar-collapse.collapsing{
    display:block !important;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav.nav-primary{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:.25rem !important;
    gap:0 !important;
    white-space:normal !important;
    text-align:center;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(20,20,24,.78);
    box-shadow:0 18px 45px rgba(0,0,0,.30);
  }
  html[data-theme="light"] .navbar.nav-brand.cp-nav-auto-compact .navbar-nav.nav-primary{
    background:rgba(255,255,255,.90);
    box-shadow:0 18px 45px rgba(0,0,0,.10);
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .nav-item{
    display:block;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .nav-item.d-xl-none{
    display:block !important;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .social-nav.d-xl-none{
    display:flex !important;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .nav-item + .nav-item{
    border-top:1px solid rgba(255,255,255,.07);
  }
  html[data-theme="light"] .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .nav-item + .nav-item{
    border-top-color:rgba(0,0,0,.06);
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .nav-link,
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .btn{
    width:100% !important;
    max-width:100%;
    display:flex !important;
    justify-content:center !important;
    align-items:center;
    text-align:center;
    white-space:normal !important;
    padding:.88rem .9rem !important;
    border-radius:14px;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .badge-wrap{
    display:inline-flex !important;
    justify-content:center;
    width:100%;
    white-space:normal;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-collapse .dropdown-menu,
  .navbar.nav-brand.cp-nav-auto-compact .navbar-collapse .dropdown-menu[data-bs-popper]{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    float:none !important;
    width:100% !important;
    margin:.35rem 0 0 !important;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .nav-item-theme{
    width:auto !important;
    align-self:center;
  }
  .navbar.nav-brand.cp-nav-auto-compact .navbar-nav .nav-item-theme .theme-toggle{
    width:44px !important;
    min-width:44px;
    padding:.45rem !important;
  }
}

/* Availability modal: the first screen is intentionally compact. */
#trAvailModal .cp-av-trainer-switch{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(240px, 340px);
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
html[data-theme="light"] #trAvailModal .cp-av-trainer-switch{
  background:rgba(255,255,255,.84);
}
#trAvailModal .cp-av-trainer-switch__copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
#trAvailModal .cp-av-trainer-switch .form-select{
  min-width:0;
  width:100%;
}
#trAvailModal .cp-av-options{
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
html[data-theme="light"] #trAvailModal .cp-av-options{
  background:rgba(255,255,255,.80);
}
#trAvailModal .cp-av-options > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  user-select:none;
}
#trAvailModal .cp-av-options > summary::-webkit-details-marker{display:none}
#trAvailModal .cp-av-options > summary > span:first-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
#trAvailModal .cp-av-options > summary small{
  color:var(--muted);
  font-weight:500;
}
#trAvailModal .cp-av-options__chevron{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .16s ease;
  opacity:.72;
}
#trAvailModal .cp-av-options[open] .cp-av-options__chevron{
  transform:rotate(225deg) translate(-1px,-1px);
}
#trAvailModal .cp-av-options__body{
  padding:0 14px 14px;
  border-top:1px solid var(--border);
}
#trAvailModal .cp-av-options__body .form-label{
  margin-top:12px;
  margin-bottom:7px;
}
#trAvailModal .cp-av-options__body .form-select{
  width:min(100%, 340px);
}

/* Calendar cells must shrink with their 1/7 grid track. Global accessible
   button sizing previously forced every mini day to at least 44px wide. */
#trAvailModal .cp-av-mini,
#trAvailModal .cp-mini-cal-grid,
#trAvailModal .cp-mini-dow{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
#trAvailModal .cp-av-mini{
  overflow:hidden;
}
#trAvailModal .cp-mini-cal-grid,
#trAvailModal .cp-mini-dow{
  grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
}
#trAvailModal .cp-mini-dow > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
#trAvailModal button.cp-mini-day,
#trAvailModal .cp-mini-day{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box;
}
.trainer-calendar-page .me-cal,
.trainer-calendar-page .me-cal-grid,
.trainer-calendar-page .me-cal-weekdays,
.trainer-calendar-page .me-cal-cell{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.trainer-calendar-page .me-cal-grid,
.trainer-calendar-page .me-cal-weekdays{
  grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
}
.trainer-calendar-page .me-cal-cell{
  width:100%;
  overflow:hidden;
}

@media (max-width:991.98px){
  #trAvailModal .cp-av-trainer-switch{
    grid-template-columns:1fr;
    gap:9px;
  }
}
@media (max-width:575.98px){
  #trAvailModal .cp-av-trainer-switch,
  #trAvailModal .cp-av-options > summary{
    padding:11px 12px;
  }
  #trAvailModal .cp-av-options__body{
    padding:0 12px 12px;
  }
  #trAvailModal .cp-av-mini{
    padding:9px !important;
  }
  #trAvailModal .cp-mini-cal-grid,
  #trAvailModal .cp-mini-dow{
    gap:3px !important;
  }
  #trAvailModal button.cp-mini-day,
  #trAvailModal .cp-mini-day{
    min-height:34px !important;
    border-radius:10px !important;
  }
}

/* =========================================================
   CoachPro 2026-08-07 – /me footer canvas cleanup
   =========================================================
   The fixed glass dock needs visual breathing room, but that room must belong to
   the dark CoachPro footer, not to a transparent body/root canvas. On Chromium/
   WebView (especially with zoom / tablet breakpoints) the old transparent tail
   could be composited as two grey strips below the footer. */
html{
  background-color:var(--bg, #0B0B0D) !important;
}
body.bg-brand,
body.cp-has-bottom-tabs{
  background-color:var(--bg, #0B0B0D) !important;
}
body.cp-has-bottom-tabs .footer-brand{
  margin-bottom:0 !important;
  background:var(--bg, #0B0B0D) !important;
  background-color:var(--bg, #0B0B0D) !important;
}

@media (max-width:1180px){
  /* The footer already owns the ~96px dock clearance. A second body padding
     created a separate transparent strip after the footer. */
  body.cp-has-bottom-tabs,
  html.inapp body.cp-has-bottom-tabs,
  html.cp-native-app body.cp-has-bottom-tabs,
  html.cp-native-shell body.cp-has-bottom-tabs{
    padding-bottom:0 !important;
  }
  body.cp-has-bottom-tabs .footer-brand{
    padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}