/* Programs are a focused workspace of their own. They must not inherit ATP's
   tab visibility and fixed-height rules. */
.workspace.client-selected.section-programs {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
}

.workspace.client-selected.section-programs > .tp-rail {
  display: none !important;
}

.workspace.client-selected.section-programs > .tp-rail button:not([data-rail-section="workouts"]) {
  display: none !important;
}

.workspace.client-selected.section-programs > .client-area {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
}

.workspace.client-selected.section-programs #tab-programs {
  display: block !important;
  height: auto !important;
  min-height: 100% !important;
  padding: 0 !important;
}

/* A late legacy rule changes the main content pane to overflow:clip. Restore
   the intended scroll container on regular desktop widths. */
.workspace > .client-area {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
}

/* Section-specific legacy selectors are more specific than the base rule
   above. Keep the content pane scrollable on wide desktop layouts too. */
body .workspace.client-selected.section-calendar > .client-area,
body .workspace.client-selected.section-dashboard > .client-area,
body .workspace.client-selected.section-atp > .client-area,
body .workspace.client-selected.section-programs > .client-area {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Compact laptops, tablets and in-app WebViews use document scrolling. This
   avoids nested scroll areas that iOS WebView can leave at a blank position. */
@media (max-width: 1280px) {
  html {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
  }

  .app-shell {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .workspace,
  .workspace.section-home,
  .workspace.section-calendar,
  .workspace.section-dashboard,
  .workspace.section-atp,
  .workspace.section-programs,
  .workspace.section-manage,
  .workspace.section-payments {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: calc(100dvh - 110px);
    overflow: visible !important;
  }

  /* Override the later desktop shell rule that otherwise keeps the calendar
     inside an overflow:hidden ancestor and disables its sticky toolbar. */
  html body .app-shell > main.workspace.client-selected.section-calendar {
    overflow: visible !important;
  }

  /* The calendar can be tens of thousands of pixels tall.  Do not let the
     library rail stretch to that grid row: it would scroll out of view and
     leave only an empty green column.  Keep its labels available while the
     trainer moves between calendar weeks. */
  .workspace.client-selected.section-calendar > .tp-rail {
    align-self: start !important;
    position: sticky !important;
    top: calc(var(--calendar-toolbar-top, 0px) + 14px) !important;
    height: calc(100dvh - var(--calendar-toolbar-top, 0px) - 28px) !important;
    max-height: calc(100dvh - var(--calendar-toolbar-top, 0px) - 28px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 105;
  }

  body .workspace.client-selected.section-calendar > .client-area,
  body .workspace.client-selected.section-dashboard > .client-area,
  body .workspace.client-selected.section-atp > .client-area,
  body .workspace.client-selected.section-programs > .client-area,
  body .workspace.clients-home > .client-area {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body .workspace .empty-state,
  body .workspace .client-view,
  body .workspace .tab-page:not(.hidden) {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .workspace.client-selected.section-calendar #tab-calendar > .section {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 820px) {
  .workspace.client-selected.section-calendar #tab-calendar > .section {
    overflow-x: auto;
  }

  .workspace.client-selected.section-calendar .tp-calendar-shell {
    min-width: 900px;
  }

  .workspace.client-selected.section-calendar .section-title.calendar-toolbar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }

  .workspace.client-selected.section-calendar .calendar-toolbar > div,
  .workspace.client-selected.section-calendar .calendar-client-picker {
    min-width: 0 !important;
    width: 100% !important;
  }
}

.program-kind-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border, #dce3dd);
  border-radius: 16px;
  background: var(--surface, #fff);
}

.program-kind-switcher > span {
  font-weight: 800;
}

.program-kind-segments {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  padding: 3px;
  border-radius: 12px;
  background: var(--soft, #eef3ef);
}

.program-kind-segments button {
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.program-kind-segments button.active {
  color: #fff;
  background: #164d3e;
  box-shadow: 0 4px 12px rgb(16 64 49 / 16%);
}

.program-workspace-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--muted, #68736b);
  background: var(--soft, #eef3ef);
}

.program-calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.tp-invite-guide {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--soft, #eef3ef);
}

.tp-invite-guide strong {
  display: block;
  margin-bottom: 8px;
}

.tp-invite-guide p {
  margin: 0;
  color: var(--muted, #68736b);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .program-calendar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .program-kind-switcher {
    align-items: stretch;
    flex-direction: column;
  }

  .program-kind-segments {
    grid-template-columns: 1fr 1fr;
  }
}

.coach-help-card {
  width: min(920px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow-y: auto;
}

.coach-help-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.coach-help-section {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--border, #dce3dd);
  border-radius: 16px;
  background: var(--surface, #fff);
}

.coach-help-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: #164d3e;
  font-weight: 900;
}

.coach-help-section h3 {
  margin: 3px 0 8px;
  font-size: 1rem;
}

.coach-help-section p {
  margin: 0;
  color: var(--muted, #68736b);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .coach-help-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    padding: 16px;
  }

  .coach-help-content {
    grid-template-columns: 1fr;
  }

  .coach-help-section {
    padding: 14px;
  }
}