/* Club-only layout. Existing controls and calculations are unchanged. */
html body :is(#app, #mobileClubRoot) [data-club-workflow-card] {
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
}
html body :is(#app, #mobileClubRoot) [data-club-workflow-card] > [hidden],
html body :is(#app, #mobileClubRoot) [data-club-workflow-card] > .peClubAccordionBody[hidden],
html body #mobileClubRoot #mobileClubContent [data-club-workflow-card] > .mobileClubPanelHead[hidden] {
  display: none !important;
}
html body :is(#app, #mobileClubRoot) .peClubAccordionHeader { margin: 0 !important; }
html body :is(#app, #mobileClubRoot) .peClubAccordionToggle {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit;
  font-weight: 800;
  text-align: left !important;
  cursor: pointer;
}
html body :is(#app, #mobileClubRoot) .peClubAccordionToggle > span:first-child {
  min-width: 0;
  text-align: left !important;
}
html body :is(#app, #mobileClubRoot) .peClubAccordionChevron { flex: 0 0 auto; margin-left: 12px; }
html body :is(#app, #mobileClubRoot) [data-club-workflow-open="true"] > .peClubAccordionHeader .peClubAccordionChevron { transform: rotate(180deg); }
html body :is(#app, #mobileClubRoot) .peClubAccordionBody { padding: 0 16px 16px; min-width: 0; }
html body :is(#app, #mobileClubRoot) .peClubAccordionBody > button { margin-top: 10px; }
html body :is(#app, #mobileClubRoot) [data-club-workflow-grid="true"] {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
html body :is(#app, #mobileClubRoot) [data-club-workflow-grid="true"] > .clubMemberPanel {
  padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
html body :is(#app, #mobileClubRoot) [data-club-workflow-grid="true"] > .clubMemberPanel > h3 { display: none !important; }
html body :is(#app, #mobileClubRoot) #clubMemberBox[data-club-workflow-built="true"] { display: flex; flex-direction: column; gap: 14px; }
html body :is(#app, #mobileClubRoot) .peClubWorkflowPanel { margin: 0; border: 1px solid #dce6ef; border-radius: 14px; background: #fff; }
html body :is(#app, #mobileClubRoot) .peClubAccordionBody > .clubMemberHead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html body #mobileClubRoot .mobileClubMemberInfo,
html body #mobileClubRoot .mobileClubMemberInfo > small {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  text-align-last: left !important;
}
html body #mobileClubDetailSheet[data-detail-type="contact"] .mobileClubContactIdentity,
html body #mobileClubDetailSheet[data-detail-type="contact"] .mobileClubContactIdentity > :is(b,small) {
  display: block !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  align-self: stretch !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
  text-align-last: left !important;
}
html body #mobileClubRoot .mobileClubMemberInfo > small,
html body #mobileClubDetailSheet[data-detail-type="contact"] .mobileClubContactIdentity > small {
  margin-top: 8px !important;
}
html body #clubStatsDetailModal .clubStatsDetailCard > header > div > p {
  margin-top: 8px !important;
}
html body #app .peClubDepartmentSelection {
  min-height: 0 !important;
}
html body #app .peClubDepartmentSelection > .clubMemberHead {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
html body #app.clubScreen .clubSectionTabs {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
html body :is(#app, #mobileClubRoot) .clubStatsMenuIcon12330 {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}
/* The original wide workspace gave two parallel cards 100% heights. These
   four disclosures now flow vertically and share the tab-panel scroll owner. */
html body #app.clubScreen[data-club-section="manage"]:has(#clubMemberBox) .clubSectionPanels {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html body #app.clubScreen:has(#clubMemberBox) .clubSectionPanel[data-club-section-panel="manage"],
html body #app.clubScreen:has(#clubMemberBox) .clubManageGrid[data-club-workflow-grid="true"],
html body #app.clubScreen:has(#clubMemberBox) .clubManageGrid[data-club-workflow-grid="true"] > .panel,
html body #app.clubScreen:has(#clubMemberBox) .peClubWorkflowPanel,
html body #app.clubScreen #clubMemberBox[data-club-workflow-built="true"] {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html body #app.clubScreen:has(#clubMemberBox) .clubMemberTableWrap {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
}
html body #app.clubScreen .peClubDepartmentSelection:has(#renameClubBtn) > .clubMemberHead,
html body #app.clubScreen .peClubDepartmentSelection:has(#renameClubBtn) .clubDepartmentHeadActions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html body #app.clubScreen .peClubDepartmentSelection:has(#renameClubBtn) > .clubMemberHead > div:first-child {
  flex: 1 1 180px !important;
}
html body #app.clubScreen .peClubDepartmentSelection:has(#renameClubBtn) .clubMemberHead button {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}
/* Monthly and overall are independent panels, not size-contained siblings
   borrowing their height from the old calendar/insights grid. */
html body #app.clubScreen .clubSectionPanel:is([data-club-section-panel="monthly"],[data-club-section-panel="stats"]) > .clubStatsPanel,
html body #app.clubScreen .clubSectionPanel[data-club-section-panel="stats"] .clubStatsPeriodShell,
html body #app.clubScreen .clubSectionPanel[data-club-section-panel="stats"] [data-club-overall-root]:not([hidden]),
html body #app.clubScreen .clubSectionPanel[data-club-section-panel="monthly"] #clubStatsBox,
html body #app.clubScreen .clubSectionPanel[data-club-section-panel="monthly"] .clubPcStatsStudentList {
  display: block !important;
  contain: none !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html body #app.clubScreen .clubSectionPanel[data-club-section-panel="monthly"] .clubPcStatsStudentList {
  display: grid !important;
}