/* Load after the app styles: shared field rhythm without changing page headings. */
body[data-view="manage"] .admin-workspace :is(.admin-form, .feature-form, .export-form) label,
body[data-view="manage"] .admin-workspace .manager-list-tools,
#profileForm label:not(.manager-email-toggle),
#manualPaymentForm label:not(.proof-picker),
.booking-search label,
.feature-dialog .feature-form label {
  min-width: 0;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}

/* Native pickers have separate sizing. :where keeps exclusions from raising
   specificity above the textarea and native-control rules that follow. */
body[data-view="manage"] .admin-workspace :is(.admin-form, .feature-form, .export-form) :is(input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"])), select, textarea),
body[data-view="manage"] .admin-workspace .manager-list-tools input,
:is(#phoneForm, #profileForm, #manualPaymentForm, .booking-search, .court-chat-form, .feature-dialog .feature-form) :is(input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])), select, textarea),
#messageBody {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
}

body[data-view="manage"] .admin-workspace :is(.admin-form, .feature-form) textarea,
:is(#phoneForm, #profileForm, #manualPaymentForm, .booking-search, .court-chat-form, .feature-dialog .feature-form) textarea,
#messageBody {
  min-height: 110px;
  line-height: 1.5;
  resize: vertical;
}

body[data-view="manage"] .admin-workspace :is(.admin-form, .feature-form) input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

body[data-view="manage"] .admin-workspace input[type="file"]::file-selector-button {
  max-width: 100%;
  min-height: 32px;
  margin-right: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 9px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
}

body[data-view="manage"] .admin-workspace .admin-form input[type="color"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 5px;
}

body[data-view="manage"] .admin-workspace :is(.admin-form, .feature-form) :is(input[type="checkbox"], input[type="radio"]),
#profileForm :is(input[type="checkbox"], input[type="radio"]) {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--ink);
}

body[data-view="manage"] .admin-workspace :is(.check, .membership-visibility, .badge-options label),
#profileForm .manager-email-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  line-height: 1.4;
}

/* This picker previously used !important 10px/11px chip text. */
body[data-view="manage"] .admin-workspace .open-play-court-group label {
  min-width: 0;
  min-height: 44px;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px !important;
  line-height: 1.4;
}

body[data-view="manage"] .admin-workspace .open-play-court-group label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-view="manage"] .admin-workspace .open-play-court-group input[type="checkbox"] {
  width: 20px !important;
}

body[data-view="manage"] .admin-workspace :is(.form-grid, .feature-grid, .membership-grid, .manual-qr-grid, .court-payment-settings) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  min-width: 0;
}

body[data-view="manage"] .admin-workspace .form-grid > .wide,
body[data-view="manage"] .admin-workspace .form-grid > .booking-prefix-field,
body[data-view="manage"] .admin-workspace .court-payment-settings > :is(small, .court-payment-preview),
body[data-view="manage"] .admin-workspace .email-composer .form-grid > .wide {
  grid-column: 1 / -1;
}

body[data-view="manage"] .admin-workspace .form-grid > .booking-prefix-field {
  max-width: 100%;
  margin-top: 0;
}

body[data-view="manage"] .admin-workspace .form-grid + .form-grid {
  margin-top: 20px;
}

body[data-view="manage"] .admin-workspace :is(.feature-form, .about-editor, .email-event-form, .manual-review-actions) {
  gap: 20px;
}

body[data-view="manage"] .admin-workspace :is(.admin-card, .admin-note) {
  padding: 22px;
  margin-bottom: 20px;
}

body[data-view="manage"] .admin-workspace :is(.court-editor, .manual-qr-grid fieldset, .membership-grid fieldset, .court-payment-settings, .open-play-court-picker) {
  min-width: 0;
  padding: 18px;
}

body[data-view="manage"] .admin-workspace :is(.manual-qr-grid fieldset, .membership-grid fieldset) {
  gap: 18px;
  margin: 0;
}

body[data-view="manage"] .admin-workspace :is(.manual-qr-grid legend, .membership-grid legend, .court-payment-settings legend),
#profileForm .manager-email-preferences legend {
  max-width: 100%;
  padding-inline: 6px;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

body[data-view="manage"] .admin-workspace .open-play-court-picker legend {
  font-size: 14px !important;
}

body[data-view="manage"] .admin-workspace :is(.venue-editor, .hours-editor, .open-play-editor) > .admin-form {
  margin-top: 20px;
  padding-top: 20px;
}

body[data-view="manage"] .admin-workspace .court-editors {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}

body[data-view="manage"] .admin-workspace .court-editor > h3 {
  margin-bottom: 18px;
}

body[data-view="manage"] .admin-workspace .card-title {
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

body[data-view="manage"] .admin-workspace .card-title > div {
  flex: 1 1 260px;
  min-width: 0;
}

body[data-view="manage"] .admin-workspace :is(.admin-form, .feature-form, .export-form) button,
body[data-view="manage"] .admin-workspace .manager-list-tools button,
body[data-view="manage"] .admin-workspace .refund-complete-form button,
body[data-view="manage"] .admin-workspace #refreshEmailDelivery,
:is(#phoneForm, #otpForm, #profileForm, #manualPaymentForm, .booking-search, .court-chat-form, #messageForm) button {
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-view="manage"] .admin-workspace :is(.row-actions, .court-actions, .venue-actions, .manual-review-actions > div, .manager-list-tools) {
  flex-wrap: wrap;
  gap: 12px;
}

body[data-view="manage"] .admin-workspace :is(.court-actions, .venue-actions) {
  margin-top: 20px;
}

body[data-view="manage"] .admin-workspace :is(.court-actions, .venue-actions) :is(.save-button, .archive-button) {
  margin-top: 0;
}

body[data-view="manage"] .admin-workspace .export-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 20px;
}

body[data-view="manage"] .admin-workspace .manual-payment-switch {
  grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
  gap: 20px;
}

body[data-view="manage"] .admin-workspace .email-event-form {
  padding: 20px !important;
}

body[data-view="manage"] .admin-workspace .email-composer .form-grid {
  gap: 20px;
}

body[data-view="manage"] .admin-workspace .email-composer textarea {
  min-height: 140px !important;
}

body[data-view="manage"] .admin-workspace :is(.email-recipient-picker, .email-selected) {
  gap: 10px;
  padding: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Refund labels must establish a field column, not sit inline with textarea. */
body[data-view="manage"] .admin-workspace .refund-card > header {
  align-items: start;
  flex-wrap: wrap;
}
body[data-view="manage"] .admin-workspace .refund-card > header > div {
  min-width: 0;
  flex: 1 1 170px;
}
body[data-view="manage"] .admin-workspace .refund-card > header > strong {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
body[data-view="manage"] .admin-workspace :is(.refund-instructions-form, .refund-complete-form) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  min-width: 0;
  width: 100%;
}

body[data-view="manage"] .admin-workspace .refund-instructions-form {
  margin: 20px 0;
  padding-top: 20px;
}

body[data-view="manage"] .admin-workspace .refund-complete-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-view="manage"] .admin-workspace :is(.refund-instructions-form, .refund-complete-form) > label {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
}

body[data-view="manage"] .admin-workspace .refund-instructions-form textarea,
body[data-view="manage"] .admin-workspace .refund-complete-form input:not([type="hidden"]) {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

body[data-view="manage"] .admin-workspace :is(.refund-instructions-form, .refund-complete-form) > button {
  grid-column: 1 / -1;
  justify-self: start;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
}

/* Users badges wrap as complete pills instead of breaking the word Admin. */
body[data-view="manage"] .admin-workspace [data-admin-panel="users"] .user-editor > summary {
  flex-wrap: wrap;
  align-items: start;
  gap: 14px;
}

body[data-view="manage"] .admin-workspace [data-admin-panel="users"] .user-editor > summary > span:first-child {
  flex: 1 1 240px;
  min-width: 0;
  gap: 5px;
}

body[data-view="manage"] .admin-workspace [data-admin-panel="users"] .user-editor .badge-strip {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
}

body[data-view="manage"] .admin-workspace [data-admin-panel="users"] .user-editor .badge-strip > i {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

body[data-view="manage"] .admin-workspace [data-admin-panel="users"] .badge-options {
  gap: 12px;
}

body[data-view="manage"] .admin-workspace [data-admin-panel="users"] .badge-options > label {
  padding: 10px 12px;
  overflow-wrap: normal;
  word-break: normal;
}

/* Day toggles span the tablet row so the two time selects stay comfortably wide. */
body[data-view="manage"] .admin-workspace .hours-grid {
  gap: 6px;
}

body[data-view="manage"] .admin-workspace .hours-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  padding: 18px 0;
}

body[data-view="manage"] .admin-workspace .hours-row > label.check {
  grid-column: 1 / -1;
  min-height: 44px;
}

body[data-view="manage"] .admin-workspace .hours-row > label:last-child {
  grid-column: auto;
}

body[data-view="manage"] .admin-workspace .hours-row > label {
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}

/* Public account, receipt and search forms use the same label/control rhythm. */
#profileForm,
#manualPaymentForm {
  gap: 20px;
  min-width: 0;
}

#profileForm .manager-email-preferences {
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 18px;
}

.login-dialog {
  max-height: 90dvh;
  overflow: auto;
}

#phoneForm:not([hidden]) {
  display: grid;
  gap: 8px;
}

#phoneForm > label {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.phone-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.phone-row > span {
  display: flex;
  align-items: center;
  padding: 12px 0 12px 14px;
}

#otpForm fieldset {
  min-width: 0;
  margin: 18px 0;
}

#otpForm legend {
  font-size: 14px;
  line-height: 1.4;
}

.booking-search {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  margin-top: 20px;
}

.manual-payment-layout {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 22px;
}

.manual-payment-layout > :is(.manual-qr-panel, form) {
  min-width: 0;
}

.court-chat-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
}

.court-chat-form :is(select, input, button) {
  height: auto;
}

/* Let the message list absorb composer growth rather than overlap its controls. */
.chat-thread:not([hidden]) {
  display: grid;
  grid-template-rows: minmax(64px, auto) minmax(0, 1fr) auto;
  min-height: 0;
}

.chat-thread .message-list {
  height: auto;
  min-height: 0;
}

.chat-thread > #messageForm {
  height: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 12px;
}

#messageBody {
  max-height: 180px;
}

@media (min-width: 960px) {
  body[data-view="manage"] .admin-workspace .hours-row {
    grid-template-columns: minmax(130px, 1fr) repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  body[data-view="manage"] .admin-workspace .hours-row > label.check {
    grid-column: auto;
  }
}

@media (min-width: 1200px) {
  body[data-view="manage"] .admin-workspace .court-editors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 959px) {
  body[data-view="manage"] .admin-workspace .export-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="manage"] .admin-workspace .export-form > button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 1023px) {
  body[data-view="manage"] .admin-workspace .court-payment-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-view="manage"] .admin-workspace .refund-complete-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .manual-payment-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  body[data-view="manage"] .admin-workspace :is(.form-grid, .feature-grid, .membership-grid, .manual-qr-grid, .court-payment-settings, .export-form, .manual-payment-switch) {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  body[data-view="manage"] .admin-workspace :is(.admin-card, .admin-note) {
    padding: 18px;
  }

  body[data-view="manage"] .admin-workspace :is(.court-editor, .manual-qr-grid fieldset, .membership-grid fieldset, .court-payment-settings, .open-play-court-picker) {
    padding: 16px;
  }

  body[data-view="manage"] .admin-workspace .hours-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-view="manage"] .admin-workspace .hours-row > label:last-child {
    grid-column: 1 / -1;
  }

  body[data-view="manage"] .admin-workspace .card-title > button,
  body[data-view="manage"] .admin-workspace .email-composer .card-title > button,
  body[data-view="manage"] .admin-workspace .export-form > button {
    width: 100%;
  }

  body[data-view="manage"] .admin-workspace .manual-review-actions > div {
    display: flex;
    flex-wrap: wrap;
  }

  body[data-view="manage"] .admin-workspace .manual-review-actions > div > button,
  body[data-view="manage"] .admin-workspace :is(.court-actions, .venue-actions) > button {
    flex: 1 1 170px;
  }

  .booking-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-search > button {
    width: 100%;
  }

  body[data-view="manage"] .admin-workspace :is(.refund-instructions-form, .refund-complete-form) > button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .court-chat-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .court-chat-form :is(strong, button) {
    grid-column: 1 / -1;
  }

  .membership-option {
    flex-wrap: wrap;
    align-items: start;
  }

  .membership-option > p {
    min-width: 0;
    flex: 1 1 220px;
  }
}

@media (max-width: 380px) {
  body[data-view="manage"] .admin-workspace .hours-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .phone-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #phoneForm .phone-row > button {
    grid-column: 1 / -1;
  }

  .chat-thread > #messageForm {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Keep conversation history usable on short landscape screens, including
   narrow screens where Send already stacks below the textarea. */
@media (max-height: 600px) {
  #messageBody {
    min-height: 46px;
    max-height: 80px;
  }
}