/* Keep every authenticated portal surface inside the viewport. */
html,
body,
.app,
.main,
.page,
.coach-shell,
.coach-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

html,
body {
  overflow-x: clip;
}

.main {
  overflow-x: clip;
  padding-inline: clamp(16px, 2.2vw, 34px);
}

.main > *,
.grid > *,
.coach-panel > *,
.coach-dash > *,
.coach-kpis > * {
  min-width: 0;
  max-width: 100%;
}

.topbar,
.page-head,
.detail-head {
  gap: 14px;
  flex-wrap: wrap;
}

.topbar > :first-child,
.page-head > :first-child,
.detail-head > :first-child {
  min-width: 0;
}

.topbar .tools {
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-head > button,
.topbar button,
.tools button {
  max-width: 100%;
  white-space: normal;
}

.coach-tabs,
.detail-tabs,
.filter-row,
.inbox-toolbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.coach-tabs button,
.detail-tabs button {
  flex: 0 0 auto;
}

.coach-kpis,
.stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coach-dash {
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr);
}

.invite-form,
.invite-form input {
  min-width: 0;
  max-width: 100%;
}

.invite-form input {
  width: 100%;
}

/* The mark remains decorative and never covers controls or gets clipped. */
.main::after {
  top: 12px !important;
  right: clamp(12px, 1.7vw, 26px) !important;
  width: clamp(64px, 5vw, 84px) !important;
  height: clamp(64px, 5vw, 84px) !important;
  background-size: contain !important;
  opacity: .42 !important;
}

.topbar {
  padding-right: clamp(78px, 6.4vw, 106px) !important;
}

@media (max-width: 1280px) {
  .coach-dash {
    grid-template-columns: 1fr;
  }

  .coach-kpis,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  .main {
    padding-inline: 14px;
  }

  .main::after {
    display: none !important;
  }

  .topbar {
    padding-right: 0 !important;
    align-items: flex-start;
  }

  .topbar .tools {
    width: 100%;
  }

  .page-head {
    align-items: stretch;
  }

  .page-head > button {
    width: 100%;
  }

  .coach-kpis,
  .stats {
    grid-template-columns: 1fr;
  }

  .invite-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .invite-form button {
    width: 100%;
  }
}