/* Club-only viewport, scroll boundary and header alignment.
   Keep the existing six tabs, hidden states, controls and data handlers intact. */
html.peClubWorkspace[data-pe-tab="clubs"] body #app.clubScreen:has(#clubAttendanceBox) > .clubHub {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html.peClubWorkspace[data-pe-tab="clubs"] body #app.clubScreen:has(#clubAttendanceBox) .clubSectionPanels {
  box-sizing: border-box !important;
  border: 1px solid #d8e4ef !important;
  border-radius: 14px !important;
  padding: 12px 12px max(20px, env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* A single content scroller keeps the final row reachable on every wide tab.
   Statistics detail dialogs retain their existing background-scroll lock. */
@media (min-width: 769px) {
  html.peClubWorkspace:not(.clubStatsDetailOpen)[data-pe-tab="clubs"] body #app.clubScreen:has(#clubAttendanceBox) .clubSectionPanels {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html.peClubWorkspace[data-pe-tab="clubs"] body #app.clubScreen:has(#clubAttendanceBox) .clubSectionPanels > .clubSectionPanel,
  html.peClubWorkspace[data-pe-tab="clubs"] body #app.clubScreen:has(#clubAttendanceBox) :is(.clubPcAttendanceWorkspace, .clubPcAttendanceMain, .clubAttendancePanel, .clubPcInsightsWorkspace, .clubCalendarPanel, .clubOverviewPanel),
  html.peClubWorkspace[data-pe-tab="clubs"] body #app.clubScreen:has(#clubAttendanceBox) .clubAttendancePanel #clubAttendanceBox {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    contain: none !important;
    overflow: visible !important;
  }

  html.peClubWorkspace[data-pe-tab="clubs"] body #app.clubScreen:has(#clubAttendanceBox) .clubAttendancePanel .tableScroll {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
  }

  html.peClubWorkspace[data-pe-tab="clubs"] body #app.clubScreen:has(#clubAttendanceBox) .clubPcAttendanceFilterBar {
    position: sticky !important;
    top: 0 !important;
    z-index: 8;
    background: #fff !important;
  }
}

/* The first department panel previously inherited extra panel padding. */
html body #app.clubScreen:has(#clubMemberBox) .clubManageGrid [data-club-workflow-card],
html body #app.clubScreen:has(#clubMemberBox) .clubManageGrid > .clubMemberPanel,
html body #mobileClubRoot [data-club-workflow-card] {
  padding: 0 !important;
}

/* Center the title on the full card, independently of the right-hand badge. */
html body :is(#app, #mobileClubRoot) [data-club-overall-root] {
  box-sizing: border-box !important;
  overflow: visible !important;
  scrollbar-gutter: auto !important;
  padding-inline: 12px !important;
}
html body :is(#app, #mobileClubRoot) .clubOverallHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding-top: 16px !important;
}
html body :is(#app, #mobileClubRoot) .clubOverallHeader > div {
  display: contents;
}
html body :is(#app, #mobileClubRoot) .clubOverallHeader h3 {
  grid-column: 2;
  grid-row: 1;
  text-align: center !important;
  text-align-last: center !important;
}
html body :is(#app, #mobileClubRoot) .clubOverallHeader p {
  grid-column: 1 / -1;
  grid-row: 2;
}
html body :is(#app, #mobileClubRoot) .clubOverallHeader > .clubOverallScopeBadge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

@media (max-width: 768px) {
  html body #mobileClubRoot > #mobileClubContent {
    box-sizing: border-box !important;
    border: 1px solid #d8e4ef !important;
    border-radius: 14px !important;
    padding: 12px 12px max(20px, env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  html body #mobileClubRoot.pe-mobile-clubs-modal-active .peClubModalBody {
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    scroll-padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  html body :is(#app, #mobileClubRoot) .clubOverallHeader h3 {
    grid-column: 1 / -1;
  }
  html body :is(#app, #mobileClubRoot) .clubOverallHeader > .clubOverallScopeBadge {
    grid-row: 2;
  }
  html body :is(#app, #mobileClubRoot) .clubOverallHeader p {
    grid-row: 3;
  }
}