/* Visible labels for wide club management forms only.
 * Existing control IDs, values, callbacks and separate mobile renderer are retained.
 * Keep labels in the retained desktop owner even when it first mounts on a phone. */
@media (max-width: 768px) {
  html body #app.clubScreen .clubManagementField {
    display: contents !important;
  }
  html body #app.clubScreen .clubManagementField > .clubManagementFieldLabel {
    display: none !important;
  }
}
@media (min-width: 769px) {
  html body #app.clubScreen:has(#clubMemberBox) :is(.clubDepartmentCreateRow, .clubMemberEntry) {
    align-items: end !important;
  }
  html body #app.clubScreen:has(#clubMemberBox) :is(.clubDepartmentCreateRow, .clubMemberEntry) > .clubManagementField {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    text-align: left !important;
    text-align-last: left !important;
  }
  html body #app.clubScreen:has(#clubMemberBox) .clubManagementField > .clubManagementFieldLabel {
    display: block !important;
    width: 100%;
    margin: 0;
    color: #526d83;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-align: left !important;
    text-align-last: left !important;
  }
  html body #app.clubScreen:has(#clubMemberBox) .clubManagementField > :is(input, select) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
  }
  html body #app.clubScreen #clubMemberBox .clubMemberEntry > .clubManagementField:has(> :is(#cmGrade, #cmClass, #cmNo, #cmGender)) {
    grid-row: 1 !important;
    grid-column: span 3 !important;
  }
  html body #app.clubScreen #clubMemberBox .clubMemberEntry > .clubManagementField:has(> :is(#cmName, #cmPhone)) {
    grid-row: 2 !important;
    grid-column: span 4 !important;
  }
  html body #app.clubScreen #clubMemberBox .clubMemberEntry:not(:has(#cmPhone)) > .clubManagementField:has(> #cmName) {
    grid-column: span 8 !important;
  }
  html body #app.clubScreen:has(#clubMemberBox) :is(.clubDepartmentCreateRow > #addClubBtn, .clubMemberEntry > #addClubMemberBtn) {
    align-self: end !important;
    height: 42px !important;
    min-height: 42px !important;
  }
}