html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--tennis-text);
  background: var(--tennis-background);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

h1,
h2,
h3,
.welcome-title,
.registration-title {
  font-family: Montserrat, Inter, ui-sans-serif, system-ui, sans-serif;
}

.noscript-warning {
  padding: 1rem;
  margin: 1rem;
  color: #664d03;
  background: #fff3cd;
  border: 1px solid #ffecb5;
  border-radius: 0.5rem;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1050;
  padding: 0.75rem 1rem;
  color: #fff;
  background: var(--tennis-primary);
  border-radius: 0.5rem;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
}

.app-content {
  display: flex;
  flex: 1;
}

.welcome-view,
.registration-view,
.placeholder-view {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  overflow: hidden;
}

.app-shell:has(.welcome-view, .registration-view) {
  background-attachment: fixed;
  background-image: var(--tennis-background-image);
  background-position:
    min(
      0px,
      calc(clamp(64vw, calc(89vw - 100px), 82vw) - 136.25vh)
    )
    top;
  background-repeat: no-repeat;
  background-size: max(100vw, 205.5vh) auto;
}

.welcome-view {
  min-height: 43rem;
  align-items: flex-start;
  isolation: isolate;
  padding: clamp(3rem, 8vh, 6rem) 0 clamp(3.5rem, 8vh, 6rem);
  overflow: visible;
}

.welcome-view,
.registration-view {
  background-image:
    radial-gradient(
      ellipse at 16% 3%,
      rgb(255 243 211 / 64%) 0%,
      rgb(255 224 169 / 27%) 30%,
      transparent 60%
    ),
    linear-gradient(
      to bottom,
      rgb(255 247 229 / 48%) 0%,
      rgb(255 236 211 / 28%) 38%,
      rgb(255 235 205 / 7%) 68%,
      rgb(8 25 14 / 14%) 100%
    );
}

.registration-view {
  align-items: flex-start;
  overflow: visible;
}

.brand-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.brand-logo {
  display: block;
  width: 6.75rem;
  height: auto;
  aspect-ratio: 224 / 186;
  object-fit: contain;
}

.welcome-view .brand-mark {
  margin-bottom: 0.9rem;
}

.welcome-view .brand-logo {
  width: clamp(7.5rem, 10vw, 9rem);
}

.brand-mark-compact {
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.brand-mark-compact .brand-logo {
  width: 4.75rem;
}

.welcome-card {
  max-width: 42rem;
  padding: 0 1.5rem;
  margin-inline: auto;
}

.welcome-kicker {
  margin-bottom: clamp(2.75rem, 6vh, 4.5rem);
  color: var(--tennis-text);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.015em;
}

.welcome-title {
  margin-bottom: 0.75rem;
  color: #0b4f2a;
  font-size: clamp(3rem, 8vw, 5.75rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.welcome-introduction {
  max-width: 32rem;
  margin-inline: auto;
}

.welcome-heading,
.welcome-description {
  color: #123b28;
}

.welcome-heading {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.welcome-description {
  max-width: 30rem;
  margin-inline: auto;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 600;
  line-height: 1.65;
}

.welcome-actions {
  display: grid;
  max-width: 28rem;
  margin: clamp(3rem, 7vh, 4.75rem) auto 0;
  gap: 1rem;
}

.welcome-action {
  width: 100%;
}

.welcome-actions .btn {
  width: 100%;
  min-height: 4.25rem;
  padding: 1rem 1.75rem;
  gap: 0.85rem;
  border-radius: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.welcome-action-icon {
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.btn-tennis-primary {
  color: #fff;
  background: var(--tennis-primary);
  border-color: var(--tennis-primary);
}

.btn-tennis-primary:disabled {
  color: #fff;
  background: var(--tennis-primary);
  border-color: var(--tennis-primary);
  opacity: 0.7;
}

.btn-tennis-primary:hover,
.btn-tennis-primary:focus-visible {
  color: #fff;
  background: var(--tennis-primary-hover);
  border-color: var(--tennis-primary-hover);
}

.btn-tennis-secondary {
  color: var(--tennis-primary);
  background: var(--tennis-surface);
  border: 2px solid var(--tennis-primary);
}

.btn-tennis-secondary:hover,
.btn-tennis-secondary:focus-visible {
  color: #fff;
  background: var(--tennis-primary);
  border-color: var(--tennis-primary);
}

.btn:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
  box-shadow: none;
}

.placeholder-view h1 {
  font-weight: 750;
  letter-spacing: -0.025em;
}

.registration-card {
  position: relative;
  max-width: 40rem;
  padding: clamp(2rem, 4vw, 3.25rem);
  margin-inline: auto;
  overflow: hidden;
  background: var(--tennis-surface-translucent);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
  backdrop-filter: blur(0.5rem);
}

.registration-title {
  margin-bottom: 0.75rem;
  color: #0b4f2a;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.registration-description {
  margin-bottom: 2.25rem;
  color: var(--tennis-text-muted);
  line-height: 1.65;
}

.registration-method-note {
  margin: -0.75rem 0 1rem;
  color: var(--tennis-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.registration-legal-acknowledgement {
  padding: 1rem;
  margin-top: 1.25rem;
  color: var(--tennis-text);
  background: var(--tennis-primary-soft);
  border: 1px solid var(--tennis-border);
  border-radius: var(--tennis-radius-md);
}

.registration-legal-acknowledgement .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.registration-legal-acknowledgement .form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
  border-color: #829789;
}

.registration-legal-acknowledgement .form-check-input:checked {
  background-color: var(--tennis-primary);
  border-color: var(--tennis-primary);
}

.registration-legal-acknowledgement .form-check-input:focus-visible,
.registration-legal-acknowledgement a:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
  box-shadow: none;
}

.registration-legal-acknowledgement .form-check-label {
  line-height: 1.55;
}

.registration-legal-acknowledgement a {
  color: var(--tennis-primary);
  font-weight: 650;
  text-underline-offset: 0.18em;
}

.registration-legal-acknowledgement .invalid-feedback {
  margin-top: 0.55rem;
  color: var(--tennis-clay-dark);
}

.legal-document-view {
  width: 100%;
  padding: clamp(2rem, 6vw, 5rem) 0;
  background: var(--tennis-dashboard-background);
}

.legal-document-surface {
  max-width: 56rem;
  padding: clamp(1.5rem, 5vw, 4rem);
  margin-inline: auto;
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-dashboard-shadow);
}

.legal-document-title {
  margin: 1.5rem 0 0.5rem;
  color: #0b4f2a;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.legal-document-effective-date {
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  color: var(--tennis-text-muted);
  font-weight: 600;
}

.legal-document-section + .legal-document-section {
  margin-top: clamp(2rem, 5vw, 3rem);
}

.legal-document-section-title {
  margin-bottom: 1rem;
  color: var(--tennis-primary);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 750;
  line-height: 1.35;
}

.legal-document-section p,
.legal-document-list {
  line-height: 1.75;
}

.legal-document-section p:last-child,
.legal-document-list:last-child {
  margin-bottom: 0;
}

.legal-document-list {
  padding-left: 1.4rem;
}

.legal-document-list li + li {
  margin-top: 0.5rem;
}

.legal-document-surface a {
  color: var(--tennis-primary);
  font-weight: 600;
  text-underline-offset: 0.18em;
}

.legal-document-surface a:hover {
  color: var(--tennis-primary-hover);
}

.legal-document-surface a:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
  border-radius: 0.15rem;
}

.legal-document-back-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.legal-document-notice {
  padding: 1rem 1.1rem;
  color: #5f3522;
  background: #fff3e8;
  border: 1px solid #edc6ab;
  border-radius: var(--tennis-radius-md);
  font-weight: 650;
}

.registration-form .form-label {
  color: var(--tennis-text);
  font-weight: 650;
}

.registration-form .form-control {
  min-height: 3.35rem;
  color: var(--tennis-text);
  background-color: rgb(255 255 255 / 96%);
  border-color: #aebdb2;
  border-radius: 0.75rem;
}

.registration-form .form-control:hover {
  border-color: var(--tennis-green);
}

.registration-form .form-control:focus {
  border-color: var(--tennis-focus);
  box-shadow: 0 0 0 0.25rem rgb(10 74 36 / 18%);
}

.registration-form .form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgb(226 114 91 / 24%);
}

.registration-form .form-text {
  color: var(--tennis-text-muted);
}

.registration-form .text-danger {
  color: var(--tennis-clay-dark) !important;
}

.registration-form .btn {
  min-height: 4.25rem;
  padding: 1rem 1.75rem;
  border-radius: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.registration-form .sign-in-forgot-password {
  display: block;
  width: fit-content;
  min-height: 2.75rem;
  padding: 0.55rem 0.2rem !important;
  margin-left: auto;
  color: var(--tennis-primary);
  font-size: 0.95rem;
  font-weight: 650;
  text-underline-offset: 0.2em;
}

.password-reset-dialog-backdrop {
  position: fixed;
  z-index: 1080;
  display: grid;
  overflow-y: auto;
  padding: 1.25rem;
  background: rgb(9 30 18 / 62%);
  inset: 0;
  place-items: center;
}

.password-reset-dialog-backdrop[hidden] {
  display: none;
}

.password-reset-dialog {
  width: min(100%, 31rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--tennis-text);
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
}

.password-reset-dialog-title {
  margin-bottom: 0.75rem;
  color: #0b4f2a;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.password-reset-dialog-instruction,
.password-reset-confirmation-message {
  color: var(--tennis-text-muted);
  line-height: 1.6;
}

.password-reset-form {
  margin-top: 1.5rem;
}

.password-reset-form .form-label {
  color: var(--tennis-text);
  font-weight: 650;
}

.password-reset-form .form-control {
  min-height: 3.35rem;
  border-color: #aebdb2;
  border-radius: 0.75rem;
}

.password-reset-form .form-control:focus {
  border-color: var(--tennis-focus);
  box-shadow: 0 0 0 0.25rem rgb(10 74 36 / 18%);
}

.password-reset-google-note {
  padding: 0.85rem 1rem;
  margin: 1.25rem 0 0;
  color: var(--tennis-text-muted);
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

.password-reset-feedback {
  margin: 1rem 0 0;
}

.password-reset-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
  gap: 0.75rem;
}

.password-reset-actions .btn,
.password-reset-confirmation .btn {
  min-height: 3rem;
  padding-inline: 1.25rem;
  border-radius: 0.75rem;
  font-weight: 700;
}

.password-reset-confirmation {
  margin-top: 1rem;
}

.password-reset-confirmation-message {
  margin-bottom: 1.5rem;
}

@media (max-width: 575.98px) {
  .password-reset-dialog-backdrop {
    padding: 0.75rem;
  }

  .password-reset-actions {
    flex-direction: column-reverse;
  }

  .password-reset-actions .btn {
    width: 100%;
  }
}

.google-sign-in-control {
  min-width: 0;
  margin-top: 1.75rem;
}

.auth-method-separator {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 0.9rem;
  color: var(--tennis-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.auth-method-separator::before,
.auth-method-separator::after {
  height: 1px;
  flex: 1;
  background: rgb(91 110 96 / 35%);
  content: "";
}

.google-sign-in-button {
  display: flex;
  min-height: 3.65rem;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.25rem;
  gap: 0.75rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #26332a;
  background: rgb(255 255 255 / 96%);
  border: 1px solid #747775;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  white-space: normal;
}

.google-sign-in-button:hover,
.google-sign-in-button:focus-visible {
  color: #0b4f2a;
  background: #fff;
  border-color: var(--tennis-primary);
}

.google-sign-in-button:disabled {
  color: #4d5d52;
  background: #f4f6f4;
  border-color: #9daaa1;
}

.google-sign-in-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.google-sign-in-status {
  line-height: 1.5;
}

.google-registration-approval {
  padding: 0.9rem 1rem;
  margin: -0.75rem 0 1.75rem;
  color: #4a3b14;
  background: rgb(255 239 186 / 72%);
  border: 1px solid rgb(185 135 28 / 45%);
  border-radius: 0.75rem;
  line-height: 1.55;
}

.google-registration-instructions-title {
  margin-bottom: 0.5rem;
  color: var(--tennis-text);
  font-size: 1.1rem;
  font-weight: 750;
}

.google-registration-card .form-control[readonly] {
  color: #35443a;
  background: rgb(232 237 233 / 95%);
  cursor: not-allowed;
}

.registration-success {
  color: var(--tennis-text-muted);
  line-height: 1.65;
}

.registration-success .registration-title {
  color: #0b4f2a;
}

.registration-success-email {
  padding: 0.9rem 1rem;
  margin: 1.75rem 0;
  overflow-wrap: anywhere;
  color: var(--tennis-text);
  font-weight: 650;
  background: rgb(255 255 255 / 68%);
  border: 1px solid rgb(174 189 178 / 70%);
  border-radius: 0.75rem;
}

.registration-success-action {
  display: flex;
  width: 100%;
  min-height: 4.25rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  border-radius: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.account-status-card,
.dashboard-card {
  max-width: 38rem;
}

.app-loading-view .brand-mark-compact {
  justify-content: center;
}

.account-status-detail {
  margin-bottom: 0.85rem;
  color: var(--tennis-text-muted);
  line-height: 1.65;
}

.account-status-action {
  display: flex;
  width: 100%;
  min-height: 4.25rem;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  border-radius: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.dashboard-summary {
  display: grid;
  margin: 0;
  gap: 0.85rem;
}

.dashboard-summary-item {
  display: grid;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
  padding: 1rem;
  background: rgb(255 255 255 / 68%);
  border: 1px solid rgb(174 189 178 / 70%);
  border-radius: 0.75rem;
}

.dashboard-summary-item dt {
  color: var(--tennis-text-muted);
  font-weight: 650;
}

.dashboard-summary-item dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--tennis-text);
  font-weight: 700;
}

.account-logout .btn {
  min-height: 3.5rem;
  border-radius: 0.75rem;
  font-weight: 700;
}

.player-group-management {
  max-width: 76rem;
}

.player-group-toolbar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
}

.player-group-toolbar .btn,
.player-group-management .btn-sm {
  min-height: 2.75rem;
}

.player-group-create-form {
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  background: rgb(255 255 255 / 72%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.75rem;
}

.player-group-management-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
  align-items: start;
  gap: 1rem;
}

.player-group-panel {
  min-width: 0;
  padding: 1rem;
  background: rgb(255 255 255 / 72%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.75rem;
}

.player-group-panel > h3 {
  margin-bottom: 1rem;
  color: #0b4f2a;
}

.player-group-list,
.player-group-player-list {
  display: grid;
  gap: 0.75rem;
}

.player-group-list,
.player-group-available-panel {
  max-height: 48rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.player-group-available-panel {
  container-name: available-players;
  container-type: inline-size;
}

.player-group-available-panel:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
}

.player-group-card {
  padding: 1rem;
  background: #fff;
  border: 1px solid #d9e2da;
  border-radius: 0.75rem;
  box-shadow: 0 0.3rem 1rem rgb(23 60 32 / 7%);
}

.player-group-count {
  margin: 0.85rem 0;
  color: var(--tennis-text-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.player-group-member,
.player-group-available-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  gap: 0.75rem;
  background: #f7faf6;
  border: 1px solid #e1e8df;
  border-radius: 0.65rem;
}

.player-group-player-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  font-weight: 650;
}

.player-group-player-identity > span:last-child {
  overflow-wrap: anywhere;
}

.player-group-member-actions,
.player-group-select-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.player-group-select-action .form-select {
  min-width: 9rem;
}

@media (min-width: 992px) {
  @container available-players (max-width: 28rem) {
    .player-group-available-player {
      align-items: stretch;
      flex-direction: column;
    }

    .player-group-select-action {
      display: grid;
      grid-template-columns: minmax(0, 1fr) max-content;
      width: 100%;
    }

    .player-group-available-player
      .player-group-player-identity > span:last-child {
      overflow-wrap: break-word;
      word-break: normal;
    }

    .player-group-select-action .form-select {
      width: 100%;
      min-width: 0;
    }

    .player-group-select-action .btn {
      white-space: nowrap;
    }
  }
}

.player-group-publish-help {
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
}

.player-group-summary-context {
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgb(255 255 255 / 72%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.75rem;
}

.player-group-publication-status {
  margin: 0.75rem 0 0;
  color: #0b4f2a;
  font-weight: 750;
}

.player-group-summary-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
  gap: 0.75rem;
}

.player-group-summary-count {
  padding: 0.85rem;
  background: #fff;
  border: 1px solid #d9e2da;
  border-radius: 0.65rem;
}

.player-group-summary-count dt {
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.player-group-summary-count dd {
  margin: 0.2rem 0 0;
  color: var(--tennis-text);
  font-weight: 750;
}

.player-group-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
}

.player-group-summary-card {
  min-width: 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid #d9e2da;
  border-radius: 0.75rem;
  box-shadow: 0 0.3rem 1rem rgb(23 60 32 / 7%);
}

.player-group-unassigned-card {
  background: #fffaf1;
  border-color: #dfb986;
}

.player-group-summary-members {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 0.6rem;
  list-style: none;
}

.player-group-summary-member {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  overflow-wrap: anywhere;
}

.player-group-dialog-backdrop {
  position: fixed;
  z-index: 1080;
  display: grid;
  padding: 1rem;
  background: rgb(7 28 15 / 68%);
  inset: 0;
  place-items: center;
}

.player-group-dialog {
  width: min(100%, 32rem);
  padding: 1.5rem;
  background: var(--tennis-surface);
  border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgb(7 28 15 / 28%);
}

@media (max-width: 991.98px) {
  .player-group-management-layout {
    grid-template-columns: 1fr;
  }

  .player-group-list,
  .player-group-available-panel {
    max-height: none;
  }

  .player-group-summary-counts,
  .player-group-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .player-group-toolbar,
  .player-group-member,
  .player-group-available-player,
  .player-group-member-actions,
  .player-group-select-action {
    align-items: stretch;
    flex-direction: column;
  }

  .player-group-toolbar .btn,
  .player-group-select-action .form-select,
  .player-group-select-action .btn,
  .player-group-member-actions .btn {
    width: 100%;
  }
}

.dashboard-admin-link,
.dashboard-profile-link {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-weight: 700;
}

.dashboard-view {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  color: var(--tennis-text);
  background: var(--tennis-dashboard-background);
}

.dashboard-layout {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
}

.dashboard-sidebar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  width: 12.5rem;
  height: 100vh;
  flex: 0 0 12.5rem;
  flex-direction: column;
  padding: 1.5rem 1rem;
  overflow-y: auto;
  background: var(--tennis-dashboard-sidebar);
  border-right: 1px solid var(--tennis-dashboard-border);
}

.dashboard-sidebar-header {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
}

.dashboard-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  color: #0b4f2a;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.dashboard-brand:hover {
  color: var(--tennis-primary-hover);
}

.dashboard-brand:focus-visible,
.dashboard-nav-link:focus-visible,
.dashboard-card-link:focus-visible,
.dashboard-reminder-action:focus-visible,
.dashboard-user-profile:focus-visible,
.dashboard-profile-menu-item:focus-visible,
.dashboard-menu-toggle:focus-visible,
.dashboard-sidebar-close:focus-visible,
.dashboard-reminder-dismiss:focus-visible,
.dashboard-quick-action:focus-visible,
.dashboard-quick-dialog-close:focus-visible,
.dashboard-proposal-availability-slot:focus-visible,
.dashboard-league-action:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
}

.dashboard-brand-logo {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.dashboard-brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sidebar-close,
.dashboard-menu-toggle,
.dashboard-reminder-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
}

.dashboard-sidebar-close {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
}

.dashboard-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.dashboard-nav-list {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 0.35rem;
  list-style: none;
}

.dashboard-nav-link {
  display: flex;
  width: 100%;
  min-height: 3.2rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  gap: 0.85rem;
  color: #202720;
  background: transparent;
  border: 0;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
}

.dashboard-nav-unread-badge {
  min-width: 1.35rem;
  margin-left: auto;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #b42318;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.messages-page { gap: 1rem; }
.messages-header, .messages-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.messages-description, .messages-retention, .messages-feedback, .messages-privacy { margin: 0; }
.messages-retention, .messages-privacy, .messages-thread-time { color: var(--tennis-text-muted); font-size: .875rem; }
.messages-tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--tennis-border); }
.messages-tab { border: 0; border-bottom: 3px solid transparent; background: transparent; padding: .75rem 1rem; color: var(--tennis-text-muted); font-weight: 600; }
.messages-tab.is-active { border-color: var(--tennis-green); color: var(--tennis-green-dark); }
.messages-workspace { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(22rem, 1.4fr); gap: 1rem; align-items: start; }
.messages-list-panel, .messages-detail-panel, .messages-compose-card { border: 1px solid var(--tennis-border); border-radius: var(--tennis-radius-lg); background: var(--tennis-surface-translucent); box-shadow: var(--tennis-dashboard-shadow); padding: 1rem; }
.messages-thread-list { display: grid; gap: .5rem; }
.messages-thread { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; width: 100%; border: 1px solid var(--tennis-border); border-radius: var(--tennis-radius-md); background: #fff; padding: .8rem; text-align: left; }
.messages-thread:hover, .messages-thread.is-selected { border-color: var(--tennis-green); background: var(--tennis-primary-soft); }
.messages-thread-subject, .messages-thread-time { grid-column: 1 / -1; }
.messages-thread-player,
.messages-thread-subject {
  min-width: 0;
  overflow-wrap: anywhere;
}
.messages-thread-player { font-weight: 700; color: var(--tennis-primary); }
.messages-new { color: #b42318; font-size: .78rem; font-weight: 700; }
.messages-back { display: none; }
.messages-detail { min-height: 12rem; }
.messages-detail-header { margin-bottom: 1rem; }
.messages-stream { display: grid; gap: .75rem; padding: 0; list-style: none; }
.messages-entry { max-width: 85%; border-radius: var(--tennis-radius-md); background: var(--tennis-background); padding: .75rem 1rem; }
.messages-entry.messages-entry-own,
.messages-page-admin .messages-entry-clubAdmin,
.messages-page-player .messages-entry-player {
  margin-left: auto;
  background: var(--tennis-primary-soft);
}
.messages-entry p { margin: .25rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.messages-entry time { color: var(--tennis-text-muted); font-size: .8rem; }
.messages-reply { display: grid; gap: .65rem; margin-top: 1rem; border-top: 1px solid var(--tennis-border); padding-top: 1rem; }
.messages-resolved-note, .messages-inactive-note { border-radius: var(--tennis-radius-md); background: var(--tennis-background); padding: .75rem; }
.messages-feedback.is-error { color: var(--tennis-clay-dark); }
.messages-compose-overlay { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; overflow: auto; background: rgba(13, 42, 28, .48); padding: 1rem; }
.messages-compose-overlay[hidden] { display: none; }
.messages-compose-card { display: grid; gap: .65rem; width: min(34rem, 100%); }
.feedback-header { align-items: flex-start; gap: 1.25rem; padding-block: .25rem .5rem; }
.feedback-header-copy { display: grid; min-width: 0; gap: .45rem; }
.feedback-header .btn { flex: 0 0 auto; }
.feedback-privacy { display: grid; gap: .25rem; border: 1px solid #f0c98b; border-radius: var(--tennis-radius-md); background: #fff8e8; padding: .8rem 1rem; }
.feedback-privacy p { margin: 0; color: var(--tennis-text-muted); }
.feedback-thread-meta { grid-column: 1 / -1; color: var(--tennis-text-muted); font-size: .82rem; }
.feedback-detail-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.feedback-type-badge,
.feedback-status-badge { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: .2rem .55rem; font-size: .78rem; font-weight: 700; line-height: 1.2; }
.feedback-type-badge { border: 1px solid var(--tennis-border); background: #fff; color: var(--tennis-primary); }
.feedback-status-badge.is-open { background: var(--tennis-primary-soft); color: var(--tennis-green-dark); }
.feedback-status-badge.is-resolved { background: #eef1ee; color: var(--tennis-text-muted); }

@media (max-width: 767.98px) {
  .messages-header { align-items: stretch; flex-direction: column; }
  .messages-workspace { display: block; }
  .messages-detail-panel { display: none; }
  .messages-workspace.is-thread-open .messages-list-panel { display: none; }
  .messages-workspace.is-thread-open .messages-detail-panel { display: block; }
  .messages-back { display: inline-flex; margin-bottom: .75rem; }
  .messages-entry { max-width: 94%; }
}

.dashboard-nav-link[aria-current="page"] {
  color: #0b4f2a;
  background:
    linear-gradient(90deg, rgb(223 255 0 / 11%), rgb(25 107 44 / 10%));
}

.dashboard-nav-link[aria-current="page"] .dashboard-icon {
  fill: #0b4f2a;
}

.dashboard-nav-link:hover {
  color: var(--tennis-primary);
  background: var(--tennis-primary-soft);
}

.dashboard-nav-link-unavailable {
  cursor: default;
}

.dashboard-nav-link-unavailable:hover {
  color: #202720;
  background: #f2f5f1;
}

.dashboard-sidebar-spacer {
  min-height: 2rem;
  flex: 1;
}

.dashboard-utility-navigation {
  padding-top: 0.85rem;
  border-top: 1px solid var(--tennis-dashboard-border);
}

.dashboard-utility-nav-list .dashboard-nav-link {
  min-height: 2.85rem;
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.dashboard-utility-nav-list .dashboard-nav-link:hover {
  color: var(--tennis-text-muted);
}

.dashboard-league-card {
  padding: 1.15rem;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0%, rgb(223 255 0 / 20%), transparent 42%),
    linear-gradient(145deg, #124f25, #0c671f);
  border-radius: 0.75rem;
  box-shadow: var(--tennis-dashboard-shadow);
}

.dashboard-league-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  gap: 0.75rem;
}

.dashboard-league-heading .dashboard-icon {
  color: #ffe000;
}

.dashboard-league-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
}

.dashboard-league-name,
.dashboard-league-record,
.dashboard-league-meta {
  margin-bottom: 0.65rem;
  font-size: 0.8rem;
}

.dashboard-league-record {
  margin-top: 0.65rem;
  font-weight: 650;
}

.dashboard-progress {
  height: 0.42rem;
  overflow: hidden;
  background: rgb(255 255 255 / 23%);
  border-radius: 999px;
}

.dashboard-progress-value {
  display: block;
  height: 100%;
  background: #ffd21f;
  border-radius: inherit;
}

.dashboard-league-action {
  display: flex;
  width: 100%;
  min-height: 2.7rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  margin-top: 0.9rem;
  color: #fff;
  background: rgb(0 25 8 / 30%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.dashboard-main {
  min-width: 0;
  flex: 1;
}

.dashboard-mobile-bar {
  display: none;
}

.dashboard-hero {
  position: relative;
  min-height: 18rem;
  padding: 1.8rem 2rem;
  overflow: hidden;
  color: #fff;
  background-image: var(--tennis-dashboard-hero-background);
  background-position: center 63%;
  background-size: cover;
}

.dashboard-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.35rem;
  gap: 2rem;
}

.dashboard-greeting {
  margin: 0;
  color: #fff;
  font-size: clamp(1.65rem, 2.5vw, 2.15rem);
  font-weight: 750;
  letter-spacing: -0.035em;
}

.dashboard-user-tools,
.dashboard-user-profile {
  display: flex;
  align-items: center;
}

.dashboard-user-tools {
  gap: 1rem;
}

.dashboard-profile-menu {
  position: relative;
}

.dashboard-user-profile {
  gap: 0.65rem;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  font-weight: 650;
  text-align: left;
}

.dashboard-user-profile:hover {
  color: var(--tennis-ball);
}

.dashboard-user-profile .dashboard-icon {
  width: 0.9rem;
  transition: transform 160ms ease;
  transform: rotate(90deg);
}

.dashboard-user-profile[aria-expanded="true"] .dashboard-icon {
  transform: rotate(-90deg);
}

.dashboard-user-name {
  max-width: clamp(8rem, 16vw, 16rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-profile-menu-content {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.65rem);
  right: 0;
  width: max-content;
  min-width: 13.5rem;
  padding: 0.45rem;
  color: var(--tennis-text);
  background: rgb(255 255 255 / 97%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: var(--tennis-dashboard-shadow);
}

.dashboard-profile-menu-content[hidden] {
  display: none;
}

.dashboard-profile-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0.72rem 0.85rem;
  color: var(--tennis-text);
  background: transparent;
  border: 0;
  border-radius: calc(var(--tennis-radius-md) - 0.2rem);
  font: inherit;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
}

.dashboard-profile-menu-item:hover {
  color: var(--tennis-primary-hover);
  background: rgb(21 118 66 / 9%);
}

.dashboard-profile-menu-logout {
  padding-top: 0.35rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--tennis-dashboard-border);
}

.dashboard-profile-menu-logout .verification-resend-status {
  max-width: 17rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
}

.dashboard-user-avatar,
.dashboard-player-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #0b4f2a;
  background:
    linear-gradient(145deg, #f7e1ba, #d9f2cf);
  border: 2px solid rgb(255 255 255 / 82%);
  border-radius: 50%;
  font-weight: 800;
}

.dashboard-user-avatar {
  width: 2.75rem;
  height: 2.75rem;
}

.dashboard-player-avatar {
  width: 2.7rem;
  height: 2.7rem;
  border-color: #fff;
  box-shadow: 0 0.2rem 0.6rem rgb(20 43 27 / 12%);
  font-size: 0.72rem;
}

.dashboard-hero-summary {
  display: grid;
  grid-template-columns: minmax(10.5rem, 0.55fr) minmax(10.5rem, 0.55fr) minmax(20rem, 1.2fr);
  align-items: stretch;
  gap: 1rem;
}

.dashboard-hero-summary-admin {
  grid-template-columns:
    minmax(10.5rem, 0.55fr)
    minmax(10.5rem, 0.55fr)
    minmax(20rem, 1.2fr);
}

.dashboard-hero-summary-admin .dashboard-admin-message {
  grid-column: auto;
}

.dashboard-admin-summary-card {
  min-width: 0;
}

.dashboard-admin-content {
  padding: clamp(1rem, 2.5vw, 2rem);
}

.dashboard-admin-middle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.85fr);
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.dashboard-admin-league-progress,
.dashboard-admin-next-planning {
  align-self: stretch;
}

.dashboard-admin-league-progress,
.dashboard-admin-next-planning,
.dashboard-admin-insights {
  min-width: 0;
  padding: 1.15rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.7rem;
  box-shadow: var(--tennis-dashboard-shadow);
}

.dashboard-admin-insights {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.dashboard-admin-insight-presentation {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.9rem;
}

.dashboard-admin-insight-icon {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  flex: 0 0 auto;
  color: var(--tennis-primary);
  background: var(--tennis-primary-soft);
  border-radius: 0.65rem;
}

.dashboard-admin-insight-copy {
  min-width: 0;
}

.dashboard-admin-insight-message,
.dashboard-admin-insight-count {
  margin: 0;
  overflow-wrap: break-word;
}

.dashboard-admin-insight-message {
  color: var(--tennis-text);
  font-weight: 700;
}

.dashboard-admin-insight-count {
  margin-top: 0.25rem;
  color: var(--tennis-text-muted);
  font-size: 0.86rem;
}

.dashboard-admin-section-title {
  margin: 0;
  color: var(--tennis-text);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
}

.dashboard-admin-section-content {
  margin-top: 0.85rem;
}

.dashboard-admin-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: clip;
}

.dashboard-admin-progress-table {
  width: 100%;
  min-width: 39rem;
  border-collapse: collapse;
}

.dashboard-admin-progress-table th,
.dashboard-admin-progress-table td {
  padding: 0.8rem 0.65rem;
  border-bottom: 1px solid var(--tennis-dashboard-border);
  text-align: center;
  vertical-align: middle;
}

.dashboard-admin-progress-table th:first-child {
  text-align: left;
}

.dashboard-admin-progress-table thead th {
  color: var(--tennis-text-muted);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dashboard-admin-progress-table tbody tr:last-child th,
.dashboard-admin-progress-table tbody tr:last-child td {
  border-bottom: 0;
}

.dashboard-admin-progress-bar {
  width: 5rem;
  height: 0.45rem;
  margin-right: 0.45rem;
  overflow: hidden;
  vertical-align: middle;
  accent-color: var(--tennis-primary);
}

.dashboard-admin-progress-value,
.dashboard-admin-rounds {
  white-space: nowrap;
}

.dashboard-admin-planning-month {
  margin: 0 0 1rem;
  color: var(--tennis-primary);
  font-size: 1rem;
  font-weight: 750;
}

.dashboard-admin-planning-details {
  display: grid;
  margin: 0;
  gap: 0;
}

.dashboard-admin-planning-detail {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 1fr);
  padding: 0.65rem 0;
  gap: 0.75rem;
  border-bottom: 1px solid var(--tennis-dashboard-border);
}

.dashboard-admin-planning-detail dt {
  color: var(--tennis-text-muted);
  font-weight: 650;
}

.dashboard-admin-planning-detail dd {
  margin: 0;
  text-align: right;
  overflow-wrap: break-word;
}

.dashboard-admin-deadline {
  color: var(--tennis-text-muted);
}

.dashboard-admin-planning-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.2rem;
}

.dashboard-stat-card,
.dashboard-admin-message {
  min-height: 9.8rem;
  padding: 1.15rem 1.35rem;
  background: rgb(8 14 9 / 68%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 0.7rem;
  box-shadow: 0 0.6rem 1.5rem rgb(0 0 0 / 13%);
  backdrop-filter: blur(0.2rem);
}

.dashboard-stat-card .dashboard-icon {
  color: #52bd19;
}

.dashboard-stat-yellow .dashboard-icon {
  color: #ffe000;
}

.dashboard-stat-value {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.75rem;
  font-weight: 800;
}

.dashboard-stat-label {
  margin-bottom: 0.65rem;
  font-size: 0.86rem;
  font-weight: 750;
}

.dashboard-stat-detail {
  margin: 0;
  font-size: 0.75rem;
}

.dashboard-admin-message {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.dashboard-message-icon {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: #257925;
  border-radius: 50%;
}

.dashboard-admin-message h2 {
  margin-bottom: 0.55rem;
  color: #b8eb75;
  font-size: 0.9rem;
  font-weight: 750;
}

.dashboard-admin-message p {
  margin-bottom: 0.55rem;
  font-size: 0.83rem;
  line-height: 1.5;
}

.dashboard-admin-message p:last-child {
  margin-bottom: 0;
}

.dashboard-announcement-content {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.dashboard-announcement-title {
  font-weight: 750;
}

.dashboard-content {
  padding: 1rem;
}

.dashboard-reminder {
  display: grid;
  min-height: 2.75rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0.65rem 1rem;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
  color: #173c20;
  background: #f1f6e8;
  border: 1px solid #dde8c7;
  border-radius: 0.65rem;
  font-size: 0.82rem;
}

.dashboard-reminder-action {
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  color: #0b5c2c;
  border-radius: 0.4rem;
  font-weight: 750;
  text-decoration: none;
}

.dashboard-reminder-action:hover {
  color: var(--tennis-primary-hover);
  background: rgb(21 118 66 / 8%);
}

.dashboard-reminder p {
  margin: 0;
}

.dashboard-reminder-dismiss {
  width: 2rem;
  height: 2rem;
}

.dashboard-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(20rem, 1fr);
  align-items: start;
  gap: 0.75rem;
}

.dashboard-right-panel {
  display: grid;
  gap: 0.75rem;
}

.dashboard-compact-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.75rem;
}

.dashboard-compact-card-grid > .dashboard-widget {
  min-height: 14.5rem;
}

.dashboard-widget {
  min-width: 0;
  padding: 1.15rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.7rem;
  box-shadow: var(--tennis-dashboard-shadow);
}

.dashboard-widget h2 {
  margin: 0;
  color: #151a16;
  font-size: 1.05rem;
  font-weight: 780;
  letter-spacing: -0.025em;
}

.dashboard-widget-header,
.dashboard-widget-title-group {
  display: flex;
  align-items: center;
}

.dashboard-widget-header {
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.dashboard-card-link {
  color: var(--tennis-primary);
  border-radius: 0.3rem;
  font-size: 0.7rem;
  font-weight: 750;
  text-decoration: none;
}

.dashboard-card-link:hover {
  color: var(--tennis-primary-hover);
  text-decoration: underline;
}

.dashboard-card-content {
  min-width: 0;
}

.dashboard-widget-title-group {
  flex-wrap: wrap;
  gap: 0.65rem;
}

.dashboard-widget-title-group > span,
.dashboard-placeholder-label,
.dashboard-widget-subtitle,
.dashboard-alternatives-label {
  color: var(--tennis-text-muted);
  font-size: 0.72rem;
}

.dashboard-match-finder {
  min-height: 20rem;
}

.dashboard-match-scope {
  color: var(--tennis-text-muted);
  font-size: 0.7rem;
  white-space: nowrap;
}

.dashboard-match-content[aria-busy="true"] {
  min-height: 14rem;
}

.dashboard-match-state,
.dashboard-match-notice {
  padding: 1rem;
  margin: 0;
  color: var(--tennis-text-muted);
  background: #f7f9f5;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.55rem;
  line-height: 1.5;
}

.dashboard-match-notice {
  margin-bottom: 0.75rem;
  color: #26472c;
  background: #f1f6e8;
  border-color: #d7e5c2;
}

.dashboard-match-error {
  color: #6a2b1f;
  background: #fff1ed;
  border-color: #e5b6a8;
}

.dashboard-match-context {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
  gap: 0.4rem;
}

.dashboard-match-context span {
  padding: 0.3rem 0.55rem;
  color: #29442e;
  background: #f1f6e8;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.dashboard-match-grid-scroll {
  max-height: 27rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.55rem;
  scrollbar-gutter: stable;
}

.dashboard-match-grid-scroll:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 2px;
}

.dashboard-match-grid {
  width: 100%;
  min-width: 76rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.68rem;
  text-align: center;
}

.dashboard-match-grid th,
.dashboard-match-grid td {
  min-width: 4.25rem;
  padding: 0.55rem 0.3rem;
  background: #fff;
  border-right: 1px solid #edf0ec;
  border-bottom: 1px solid #edf0ec;
  vertical-align: middle;
}

.dashboard-match-grid thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  color: var(--tennis-text-muted);
  background: #f8faf7;
  font-weight: 750;
}

.dashboard-match-grid thead th span,
.dashboard-match-grid thead th small {
  display: block;
}

.dashboard-match-grid thead th small {
  margin-top: 0.15rem;
  color: #667168;
  font-size: 0.6rem;
}

.dashboard-match-grid .dashboard-match-player-column {
  position: sticky;
  z-index: 1;
  left: 0;
  width: 9rem;
  min-width: 9rem;
  text-align: left;
}

.dashboard-match-grid thead .dashboard-match-player-column {
  z-index: 3;
}

.dashboard-match-grid .dashboard-match-details-column {
  width: 12rem;
  min-width: 12rem;
}

.dashboard-match-grid td.dashboard-match-details-column {
  text-align: left;
}

.dashboard-match-details-column strong,
.dashboard-match-details-column span {
  display: block;
  margin-bottom: 0.25rem;
}

.dashboard-player-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
}

.dashboard-time-slot {
  display: grid;
  padding: 0.2rem;
  margin: 0.12rem 0;
  min-height: 1.8rem;
  place-items: center;
  color: #21341d;
  background: #dfeacc;
  border-radius: 0.25rem;
  font-size: 0.61rem;
  font-weight: 700;
}

.dashboard-match-slot-preview {
  display: grid;
  align-content: start;
  gap: 0.12rem;
}

.dashboard-match-slot-preview .dashboard-time-slot {
  margin: 0;
}

.dashboard-match-more-button {
  min-height: 1.8rem;
  padding: 0.15rem 0.25rem;
  color: var(--tennis-primary);
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  font-size: 0.61rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 0.12rem;
}

.dashboard-match-more-button:hover {
  color: var(--tennis-primary-hover);
}

.dashboard-match-more-button:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 2px;
}

.dashboard-slot-dialog-backdrop {
  position: fixed;
  z-index: 1090;
  display: grid;
  padding: 1rem;
  background: rgb(7 28 15 / 68%);
  inset: 0;
  place-items: center;
}

.dashboard-slot-dialog-backdrop[hidden] {
  display: none;
}

.dashboard-slot-dialog {
  width: min(100%, 28rem);
  max-height: min(36rem, calc(100vh - 2rem));
  padding: 1.5rem;
  overflow-y: auto;
  color: var(--tennis-text);
  background: var(--tennis-surface);
  border-radius: var(--tennis-radius-md);
  box-shadow: 0 1rem 3rem rgb(7 28 15 / 28%);
}

.dashboard-slot-dialog-date {
  margin: 0.45rem 0 1rem;
  color: var(--tennis-text-muted);
}

.dashboard-slot-dialog-list {
  display: grid;
  padding: 0;
  margin: 0 0 1.25rem;
  gap: 0.4rem;
  list-style: none;
}

.dashboard-slot-dialog-list .dashboard-time-slot {
  min-height: 2.5rem;
  margin: 0;
  font-size: 0.85rem;
}

.dashboard-slot-dialog-close {
  min-width: 7rem;
  min-height: 2.75rem;
}

.dashboard-time-unavailable {
  color: #8b928c;
  background: #f1f2f0;
}

.dashboard-match-availability-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.65rem;
  margin-top: 0.35rem;
  font-size: 0.67rem;
  text-decoration: none;
}

.dashboard-match-cards {
  display: none;
}

.dashboard-next-match,
.dashboard-recent-results {
  min-height: 14.5rem;
}

.dashboard-match-players {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0;
  gap: 0.75rem;
  font-size: 0.72rem;
}

.dashboard-match-meta {
  margin-bottom: 0.45rem;
  color: #343b36;
  font-size: 0.72rem;
}

.dashboard-match-opponent {
  margin: 1rem 0 0.7rem;
  color: #151a16;
  font-weight: 780;
}

.dashboard-match-empty {
  margin: 1rem 0 0;
  color: var(--tennis-text-muted);
  font-size: 0.8rem;
}

.dashboard-match-booking-required {
  color: #765712;
  font-weight: 700;
}

.dashboard-widget-action {
  display: inline-flex;
  min-height: 2.4rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  margin-top: 0.45rem;
  gap: 0.35rem;
  font-size: 0.7rem;
}

.dashboard-results-list {
  display: grid;
  padding: 0;
  margin: 1rem 0 0;
  gap: 0.9rem;
  list-style: none;
}

.dashboard-results-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
}

.dashboard-result-badge {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 800;
}

.dashboard-result-win {
  background: #2e8b16;
}

.dashboard-result-loss {
  background: #c11b18;
}

.dashboard-result-draw {
  background: #667168;
}

.dashboard-league-progress .dashboard-card-content {
  display: grid;
  align-content: start;
  margin-top: 1rem;
  gap: 0.55rem;
}

.dashboard-progress-count {
  margin: 0;
  color: #0b4f2a;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
}

.dashboard-progress-label,
.dashboard-progress-context {
  margin: 0;
  color: var(--tennis-text-muted);
  font-size: 0.72rem;
}

.dashboard-league-progress-bar {
  height: 0.55rem;
  overflow: hidden;
  background: #e3e9e2;
  border-radius: 999px;
}

.dashboard-league-progress-value {
  display: block;
  height: 100%;
  background: var(--tennis-primary);
  border-radius: inherit;
}

.dashboard-group-standings .dashboard-widget-header {
  margin-bottom: 0.65rem;
}

.dashboard-standings-table {
  width: 100%;
  margin-top: 0.55rem;
  border-collapse: collapse;
  font-size: 0.68rem;
}

.dashboard-standings-table th,
.dashboard-standings-table td {
  padding: 0.38rem 0.3rem;
  border-bottom: 1px solid #e6ebe6;
  text-align: left;
}

.dashboard-standings-table th:last-child,
.dashboard-standings-table td:last-child {
  text-align: right;
}

.dashboard-standings-table thead th {
  color: var(--tennis-text-muted);
  font-weight: 750;
}

.dashboard-standings-current {
  background: var(--tennis-primary-soft);
}

.dashboard-widget-subtitle {
  margin: 0.3rem 0 0.9rem;
}

.dashboard-court-recommendation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.8rem;
  gap: 0.75rem;
  background: #fff8e8;
  border: 1px solid #f4dfaa;
  border-radius: 0.55rem;
}

.dashboard-court-recommendation > .dashboard-icon {
  color: #ffb900;
  fill: #ffb900;
}

.dashboard-court-recommendation div {
  display: grid;
  gap: 0.15rem;
}

.dashboard-court-recommendation small,
.dashboard-court-recommendation span {
  color: var(--tennis-text-muted);
  font-size: 0.65rem;
}

.dashboard-court-recommendation strong {
  font-size: 0.88rem;
}

.dashboard-booking-action {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  padding: 0.55rem 0.8rem;
  gap: 0.4rem;
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
}

.dashboard-alternatives-label {
  margin: 0.75rem 0 0.4rem;
}

.dashboard-court-alternatives {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.dashboard-court-option {
  padding: 0.65rem;
  color: #2c352e;
  background: #fff;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.45rem;
  font-size: 0.67rem;
  font-weight: 700;
  text-align: center;
}

.dashboard-quick-actions {
  margin-top: 0.75rem;
}

.dashboard-quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0.65rem;
  gap: 0.75rem;
}

.dashboard-quick-action {
  display: grid;
  min-height: 3.5rem;
  align-items: center;
  padding: 0.7rem;
  gap: 0.65rem;
  color: #202720;
  background: #fff;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  grid-template-columns: auto minmax(0, 1fr) auto;
  text-align: left;
  text-decoration: none;
}

.dashboard-quick-action:hover {
  color: var(--tennis-primary);
  border-color: #a8c6ae;
}

.dashboard-quick-action:disabled {
  color: #657067;
  background: #f6f8f6;
  cursor: default;
}

.dashboard-quick-action-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.dashboard-quick-action-copy strong,
.dashboard-quick-action-copy small {
  overflow-wrap: anywhere;
}

.dashboard-quick-action-copy small {
  color: var(--tennis-text-muted);
  font-size: 0.65rem;
  font-weight: 500;
}

.dashboard-quick-dialog-backdrop {
  position: fixed;
  z-index: 1090;
  display: grid;
  overflow-y: auto;
  padding: 1rem;
  background: rgb(7 28 15 / 68%);
  inset: 0;
  place-items: center;
}

.dashboard-quick-dialog-backdrop[hidden] {
  display: none;
}

.dashboard-quick-dialog {
  width: min(100%, 44rem);
  max-height: min(42rem, calc(100vh - 2rem));
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow-y: auto;
  color: var(--tennis-text);
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
}

.dashboard-quick-dialog.is-compact {
  width: min(100%, 30rem);
}

.dashboard-quick-dialog-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-quick-dialog-title,
.dashboard-quick-dialog-description,
.dashboard-quick-dialog-status,
.dashboard-proposal-opponent-name {
  margin: 0;
}

.dashboard-quick-dialog-title {
  color: var(--tennis-primary-hover);
  font-weight: 800;
}

.dashboard-quick-dialog-description {
  margin-top: 0.4rem;
  color: var(--tennis-text-muted);
  line-height: 1.5;
}

.dashboard-quick-dialog-close {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.65rem;
  color: var(--tennis-primary);
  background: transparent;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  font-weight: 700;
}

.dashboard-quick-dialog-content {
  margin-top: 1.25rem;
}

.dashboard-quick-dialog-status {
  color: var(--tennis-text-muted);
}

.dashboard-quick-dialog-error {
  color: var(--tennis-clay-dark);
}

.dashboard-proposal-opponents {
  display: grid;
  gap: 0.85rem;
}

.dashboard-proposal-opponent {
  display: grid;
  padding: 1rem;
  gap: 0.75rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
}

.dashboard-proposal-opponent-name {
  color: var(--tennis-primary-hover);
  font-size: 1rem;
}

.dashboard-proposal-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-proposal-availability-slot {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  color: #174d32;
  background: var(--tennis-primary-soft);
  border: 1px solid #9bc9a7;
  border-radius: var(--tennis-radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-proposal-availability-slot:hover {
  color: var(--tennis-primary-hover);
  border-color: var(--tennis-primary);
}

.dashboard-find-player-form {
  display: grid;
  gap: 0.75rem;
}

.dashboard-find-player-form .form-label {
  margin: 0;
  font-weight: 700;
}

.dashboard-player-select {
  min-height: 3rem;
  border-radius: var(--tennis-radius-md);
}

@media (max-width: 575.98px) {
  .dashboard-quick-dialog-backdrop {
    padding: 0.75rem;
  }

  .dashboard-proposal-slot-list {
    display: grid;
  }

  .dashboard-proposal-availability-slot {
    width: 100%;
  }
}

.dashboard-sidebar-overlay {
  display: none;
}

.app-shell:has(.dashboard-view) .app-footer {
  display: none;
}

@media (max-width: 1199.98px) {
  .dashboard-sidebar {
    width: 12.5rem;
    flex-basis: 12.5rem;
  }

  .dashboard-primary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-summary {
    grid-template-columns: repeat(2, minmax(10rem, 1fr));
  }

  .dashboard-admin-message {
    grid-column: 1 / -1;
  }

}

@media (max-width: 991.98px) {
  .dashboard-hero-summary-admin {
    grid-template-columns: 1fr;
  }

  .dashboard-admin-middle-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .dashboard-admin-league-progress,
  .dashboard-admin-next-planning {
    align-self: start;
  }

  .dashboard-sidebar {
    position: fixed;
    left: 0;
    width: min(19rem, 86vw);
    flex-basis: auto;
    transform: translateX(-105%);
    transition: transform 180ms ease-out;
  }

  .dashboard-sidebar.is-open {
    transform: translateX(0);
  }

  .dashboard-sidebar-close {
    display: inline-flex;
  }

  .dashboard-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1020;
    display: block;
    width: 100%;
    height: 100%;
    background: rgb(4 18 9 / 52%);
    border: 0;
  }

  .dashboard-sidebar-overlay[hidden] {
    display: none;
  }

  .dashboard-mobile-bar {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--tennis-dashboard-border);
  }

  .dashboard-mobile-bar .dashboard-brand-logo {
    width: 2.3rem;
    height: 2.3rem;
  }

  .dashboard-menu-toggle {
    width: 2.8rem;
    height: 2.8rem;
  }

  .dashboard-hero {
    min-height: auto;
  }

  .dashboard-match-grid-scroll {
    display: none;
  }

  .dashboard-match-cards {
    display: grid;
    max-height: 32rem;
    overflow-y: auto;
    padding-right: 0.25rem;
    gap: 0.75rem;
    overscroll-behavior: contain;
  }

  .dashboard-match-card {
    padding: 0.9rem;
    background: #fff;
    border: 1px solid var(--tennis-dashboard-border);
    border-radius: 0.6rem;
  }

  .dashboard-match-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .dashboard-match-card-context,
  .dashboard-match-card-meta {
    margin: 0.55rem 0 0;
    color: var(--tennis-text-muted);
    font-size: 0.75rem;
  }

  .dashboard-match-slot-list {
    display: grid;
    padding: 0;
    margin: 0.7rem 0 0;
    gap: 0.35rem;
    list-style: none;
  }

  .dashboard-match-slot-list li {
    padding: 0.45rem 0.6rem;
    color: #21341d;
    background: #e6efd8;
    border-radius: 0.4rem;
    font-size: 0.76rem;
    font-weight: 700;
  }

  .dashboard-match-slot-list .dashboard-match-no-times {
    color: var(--tennis-text-muted);
    background: #f1f2f0;
  }
}

@media (max-width: 767.98px) {
  .dashboard-hero {
    padding: 1.4rem 1rem;
    background-position: 58% 60%;
  }

  .dashboard-hero-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }

  .dashboard-user-tools {
    width: 100%;
    justify-content: flex-end;
  }

  .dashboard-hero-summary,
  .dashboard-compact-card-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-stat-card,
  .dashboard-admin-message {
    min-height: auto;
  }

  .dashboard-content {
    padding: 0.75rem;
  }

  .dashboard-widget-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
  }

  .dashboard-match-scope {
    white-space: normal;
  }

  .dashboard-reminder {
    align-items: start;
  }

  .dashboard-reminder-action {
    align-self: center;
  }

  .dashboard-court-recommendation {
    grid-template-columns: auto 1fr;
  }

  .dashboard-booking-action {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .dashboard-quick-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479.98px) {
  .dashboard-user-name {
    max-width: 8rem;
  }

  .dashboard-profile-menu-content {
    right: 0;
    min-width: min(13.5rem, calc(100vw - 2rem));
  }

  .dashboard-court-alternatives,
  .dashboard-quick-action-grid {
    grid-template-columns: 1fr;
  }
}

.profile-container {
  width: 100%;
  min-width: 0;
  max-width: 72rem;
}

.profile-view-embedded {
  min-height: 0;
  background: none;
}

.profile-view-embedded .profile-container {
  width: 100%;
}

.profile-card-grid {
  display: grid;
  min-width: 0;
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
}

.profile-preference-grid {
  display: grid;
  min-width: 0;
  align-items: start;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.profile-preference-card {
  align-self: start;
}

.profile-current-summary {
  display: flex;
  min-width: 0;
  padding: 0.75rem;
  margin: 1rem 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  color: var(--tennis-text);
  background: #f4f8f3;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.75rem;
}

.profile-current-summary-label {
  color: #315d3d;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.profile-current-summary-note {
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.player-status {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  color: var(--tennis-text);
}

.player-status-label,
.player-status-inline,
.monthly-participation-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.player-status-available .player-status-label,
.player-status-inline.player-status-available,
.monthly-participation-playing {
  color: #174d32;
  background: #dff3e7;
}

.player-status-unavailable .player-status-label,
.player-status-inline.player-status-unavailable,
.monthly-participation-takingBreak {
  color: #70400b;
  background: #fff0d5;
}

.monthly-participation-no-response {
  color: #48534d;
  background: #e9eeeb;
}

.player-status-message {
  margin: 0;
  white-space: pre-wrap;
}

.player-card-status {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.player-status-note {
  width: 100%;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  color: var(--tennis-text);
  background: #f4f8f3;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.6rem;
}

.player-status-note-label,
.player-details-box-label {
  display: block;
  margin-bottom: 0.2rem;
  color: #315d3d;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.player-status-note-message {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dashboard-player-identity-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.player-availability-status {
  margin: 0 0 1rem;
}

.player-group-player-identity .monthly-participation-badge {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .profile-preference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profile-card {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.club-admin-profile-card {
  max-width: 46rem;
}

.profile-account-card {
  border-color: rgb(161 63 45 / 32%);
}

.system-admin-deletion-card {
  max-width: 42rem;
}

.account-deletions-list,
.dashboard-deletion-notification-list {
  display: grid;
  gap: 1rem;
}

.account-deletion-request-card {
  min-width: 0;
}

.account-deletion-request-time,
.dashboard-deletion-notification-time {
  margin: 0.75rem 0;
  color: var(--tennis-text-muted);
}

.account-deletion-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dashboard-deletion-notifications {
  margin-bottom: 1.5rem;
  border-color: rgb(203 124 44 / 35%);
}

.dashboard-deletion-notification + .dashboard-deletion-notification {
  padding-top: 1rem;
  border-top: 1px solid var(--tennis-border);
}

.dashboard-deletion-match-warning,
.account-deletion-blocker,
.account-deletions-status.is-error {
  color: var(--tennis-clay-dark);
  font-weight: 700;
}

.account-deletion-blocker {
  padding: 0.75rem;
  border: 1px solid rgb(203 124 44 / 35%);
  border-radius: var(--tennis-radius-md);
  background: rgb(255 246 232 / 80%);
}

.account-deletions-status.is-success {
  color: var(--tennis-green-dark);
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .account-deletion-request-actions,
  .account-deletion-request-actions .btn {
    width: 100%;
  }

  .account-deletion-request-actions {
    flex-direction: column;
  }
}

.profile-account-action-title {
  margin: 1rem 0 0.35rem;
  color: var(--tennis-text);
  font-size: 1.05rem;
  font-weight: 800;
}

.profile-account-description {
  max-width: 54rem;
}

.profile-account-delete {
  width: fit-content;
}

.profile-readonly-field,
.profile-readonly-value {
  background: #f4f8f3;
}

.profile-readonly-value {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--tennis-text);
}

.profile-loading,
.profile-feedback {
  color: var(--tennis-text-muted);
  line-height: 1.6;
}

.profile-form .form-select {
  color: var(--tennis-text);
  background-color: rgb(255 255 255 / 96%);
  border-color: #aebdb2;
  border-radius: 0.75rem;
}

.profile-form .form-select:focus {
  border-color: var(--tennis-focus);
  box-shadow: 0 0 0 0.25rem rgb(10 74 36 / 18%);
}

.profile-contact-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.profile-court-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.65rem 1rem;
}

.profile-court-option {
  min-width: 0;
  padding: 0.65rem 0.75rem 0.65rem 2.25rem;
  background: rgb(255 255 255 / 72%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.65rem;
}

.profile-court-option .form-check-label {
  overflow-wrap: anywhere;
}

.profile-court-option .form-check-input:checked {
  background-color: var(--tennis-primary);
  border-color: var(--tennis-primary);
}

.profile-court-option .form-check-input:focus,
.profile-contact-options .form-check-input:focus {
  border-color: var(--tennis-focus);
  box-shadow: 0 0 0 0.25rem rgb(10 74 36 / 18%);
}

.profile-contact-options .form-check-input:checked {
  background-color: var(--tennis-primary);
  border-color: var(--tennis-primary);
}

.sign-in-methods-card {
  min-width: 0;
  padding: clamp(1.15rem, 3vw, 1.6rem);
  color: var(--tennis-text);
  background: var(--tennis-surface-translucent);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
  backdrop-filter: blur(0.5rem);
}

.sign-in-methods-title {
  margin-bottom: 0.4rem;
  color: #0b4f2a;
  font-size: 1.35rem;
  font-weight: 800;
}

.sign-in-methods-description,
.sign-in-methods-loading {
  color: var(--tennis-text-muted);
  line-height: 1.55;
}

.sign-in-methods-description {
  margin-bottom: 1.15rem;
}

.sign-in-methods-list {
  border-top: 1px solid rgb(174 189 178 / 72%);
}

.sign-in-method-row {
  display: grid;
  min-width: 0;
  align-items: center;
  padding-block: 1rem;
  gap: 0.8rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.sign-in-method-row + .sign-in-method-row {
  border-top: 1px solid rgb(174 189 178 / 55%);
}

.sign-in-method-identity {
  min-width: 0;
}

.sign-in-method-name {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 750;
}

.sign-in-method-status {
  display: inline-flex;
  padding: 0.25rem 0.6rem;
  overflow-wrap: anywhere;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 750;
}

.sign-in-method-status.is-connected {
  color: #07562c;
  background: #d9f1df;
  border: 1px solid #8bc49a;
}

.sign-in-method-status.is-not-connected {
  color: #465149;
  background: #edf0ee;
  border: 1px solid #b9c2bc;
}

.google-link-button {
  width: auto;
  min-width: 11rem;
}

.sign-in-methods-feedback {
  line-height: 1.55;
}

.profile-page-actions {
  width: min(100%, 40rem);
  margin: 2rem auto 0;
}

.profile-page-actions .registration-back-link {
  display: flex;
  width: 100%;
  min-height: 3.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  background: rgb(255 255 255 / 92%);
  border: 1px solid rgb(174 189 178 / 82%);
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 0.8rem rgb(9 40 22 / 12%);
}

@media (min-width: 1200px) {
  .profile-preference-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .sign-in-method-row {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .google-link-button {
    width: 100%;
    min-width: 0;
  }
}

.availability-view {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgb(223 255 0 / 8%),
      transparent 32rem
    ),
    var(--tennis-dashboard-background);
}

.availability-container {
  width: min(100%, 92rem);
  margin-inline: auto;
}

.availability-view-embedded {
  min-height: 0;
  padding: 0;
  background: none;
}

.availability-view-embedded .availability-container {
  width: 100%;
}

.availability-page-header,
.availability-panel {
  background: rgb(255 255 255 / 88%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: var(--tennis-dashboard-shadow);
}

.availability-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  gap: 1rem 1.5rem;
}

.availability-page-header-embedded {
  grid-template-columns: minmax(0, 1fr) auto;
}

.availability-page-header .brand-mark {
  margin: 0;
}

.availability-page-header .brand-logo {
  width: 4rem;
}

.availability-title {
  margin: 0;
  color: #0b4f2a;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.availability-description {
  max-width: 48rem;
  margin: 0.45rem 0 0;
  color: var(--tennis-text-muted);
  line-height: 1.55;
}

.availability-dashboard-link {
  min-height: 3rem;
  padding-inline: 1.1rem;
  align-content: center;
  border-radius: var(--tennis-radius-md);
  font-weight: 700;
  text-decoration: none;
}

.availability-feedback {
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  color: var(--tennis-text-muted);
  background: rgb(255 255 255 / 72%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.75rem;
  line-height: 1.5;
}

.availability-feedback-success {
  color: #0b4f2a;
  background: #e4f2e7;
  border-color: #9fc9a8;
}

.availability-feedback-error {
  color: #6a2b1f;
  background: #fff1ed;
  border-color: #e5b6a8;
}

.availability-workspace {
  display: grid;
  grid-template-columns: minmax(31rem, 1.25fr) minmax(20rem, 0.75fr);
  align-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.availability-panel {
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.availability-month-navigation {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.75rem;
}

.availability-month-label,
.availability-panel-title {
  margin: 0;
  color: #0b4f2a;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.availability-month-label {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  text-align: center;
}

.availability-month-button {
  display: inline-grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  color: var(--tennis-primary);
  background: var(--tennis-primary-soft);
  border: 1px solid #a8c6ae;
  border-radius: 0.75rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.availability-month-button:hover:not(:disabled) {
  color: #fff;
  background: var(--tennis-primary);
}

.availability-calendar {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0.3rem;
}

.availability-calendar th {
  padding: 0.35rem 0.1rem;
  color: var(--tennis-text-muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: center;
}

.availability-calendar td {
  padding: 0;
  vertical-align: top;
}

.availability-day-button {
  display: flex;
  width: 100%;
  min-height: 4.8rem;
  padding: 0.55rem 0.45rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  color: var(--tennis-text);
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-border);
  border-radius: 0.65rem;
  text-align: left;
}

.availability-day-button:hover:not(:disabled) {
  border-color: var(--tennis-primary);
  box-shadow: 0 0.25rem 0.75rem rgb(18 79 37 / 12%);
}

.availability-day-button.is-today {
  border-color: var(--tennis-clay);
  box-shadow: inset 0 0 0 1px var(--tennis-clay);
}

.availability-day-button.is-selected {
  color: #083b20;
  background: var(--tennis-primary-soft);
  border-color: var(--tennis-primary);
  box-shadow: inset 0 0 0 2px var(--tennis-primary);
}

.availability-day-button.has-availability {
  background:
    linear-gradient(145deg, #eef8ef, #e1f0e4);
}

.availability-day-button.has-scheduled-match,
.availability-day-button.has-availability.has-scheduled-match {
  color: #70400b;
  background: #fff0d5;
  border-color: #e1c58f;
}

.availability-day-button:disabled {
  color: #667069;
  background: #edf0ed;
  border-color: #d8ddd9;
  cursor: not-allowed;
  opacity: 0.78;
}

.availability-day-button.has-scheduled-match:disabled {
  color: #4c554f;
  border-color: #d4a95f;
  box-shadow: inset 0.2rem 0 #d4a95f;
  opacity: 1;
}

.availability-day-button.is-selected.has-scheduled-match:disabled {
  box-shadow: inset 0 0 0 2px var(--tennis-primary);
}

.availability-day-button.is-outside {
  opacity: 0.38;
}

.availability-day-number {
  font-weight: 800;
}

.availability-day-state {
  color: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
}

.availability-panel-description,
.availability-inline-empty,
.availability-recurrence-preview {
  color: var(--tennis-text-muted);
  line-height: 1.55;
}

.availability-panel-description {
  margin: 0.45rem 0 1.25rem;
}

.availability-inline-empty {
  padding: 1rem;
  margin: 0;
  background: #f2f5f1;
  border-radius: 0.75rem;
}

.availability-slots-fieldset,
.availability-recurrence-fields {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.availability-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.availability-slot-button {
  display: flex;
  min-height: 4.2rem;
  padding: 0.75rem 0.85rem;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  color: var(--tennis-text);
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-border);
  border-radius: 0.75rem;
  text-align: left;
}

.availability-slot-button:hover:not(:disabled) {
  border-color: var(--tennis-primary);
}

.availability-slot-button.is-selected {
  color: #083b20;
  background: #e1f0e4;
  border-color: var(--tennis-primary);
  box-shadow: inset 0.25rem 0 var(--tennis-primary);
}

.availability-slot-button:disabled {
  color: #667069;
  background: #edf0ed;
  cursor: not-allowed;
  opacity: 0.82;
}

.availability-view-read-only .availability-slot-button.is-selected:disabled {
  color: #123d22;
  background: #dbe9df;
  border-color: #456d52;
  box-shadow: inset 0.25rem 0 #2e6b43;
  cursor: default;
  opacity: 1;
}

.availability-slot-button.has-scheduled-match:disabled {
  color: #70400b;
  background: #fff0d5;
  border-color: #e1c58f;
  box-shadow: inset 0.25rem 0 #d4a95f;
  opacity: 1;
}

.availability-view-read-only
  .availability-slot-button.is-proposal-selected {
  color: #083b20;
  background: var(--tennis-primary-soft);
  border-color: var(--tennis-primary);
  box-shadow: inset 0 0 0 2px var(--tennis-primary);
}

.availability-view-read-only
  .availability-slot-button.is-selected
  .availability-slot-state {
  color: #164d2b;
  font-weight: 800;
}

.availability-slot-time {
  font-weight: 800;
}

.availability-slot-state {
  font-size: 0.75rem;
  font-weight: 650;
}

.availability-proposal-action {
  display: grid;
  gap: 0.75rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--tennis-border);
}

.availability-proposal-action[hidden] {
  display: none;
}

.availability-proposal-selection {
  min-height: 1.5rem;
  margin: 0;
  color: var(--tennis-text-muted);
}

.availability-proposal-action .btn {
  justify-self: start;
  min-height: 3.15rem;
}

.availability-recurrence-panel {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.availability-recurrence-toggle {
  margin: 0 0 1.25rem;
}

.availability-recurrence-toggle .form-check-input:checked {
  background-color: var(--tennis-primary);
  border-color: var(--tennis-primary);
}

.availability-recurrence-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.availability-recurrence-fields .form-label {
  color: var(--tennis-text);
  font-weight: 700;
}

.availability-recurrence-fields .form-control,
.availability-recurrence-fields .form-select {
  min-height: 3.1rem;
  border-color: #aebdb2;
  border-radius: 0.75rem;
}

.availability-recurrence-error {
  margin: 0.85rem 0 0;
  color: #8c2f1b;
  font-weight: 650;
}

.availability-recurrence-preview {
  margin: 0.85rem 0 0;
}

.availability-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  gap: 0.75rem;
}

.availability-actions .btn {
  min-height: 3.15rem;
  padding-inline: 1.25rem;
  border-radius: var(--tennis-radius-md);
  font-weight: 750;
}

.availability-remove-button {
  color: var(--tennis-clay-dark);
  background: #fff;
  border: 2px solid var(--tennis-clay);
}

.availability-remove-button:hover:not(:disabled) {
  color: #fff;
  background: var(--tennis-clay-dark);
  border-color: var(--tennis-clay-dark);
}

.availability-month-button:focus-visible,
.availability-day-button:focus-visible,
.availability-slot-button:focus-visible,
.availability-proposal-action .btn:focus-visible,
.availability-dashboard-link:focus-visible,
.availability-actions .btn:focus-visible,
.availability-recurrence-fields .form-control:focus,
.availability-recurrence-fields .form-select:focus,
.availability-recurrence-toggle .form-check-input:focus {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
}

.players-view {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgb(223 255 0 / 8%),
      transparent 32rem
    ),
    var(--tennis-dashboard-background);
}

.players-container {
  width: min(100%, 76rem);
  margin-inline: auto;
}

.players-view-embedded {
  min-height: 0;
  padding: 0;
  background: none;
}

.players-view-embedded .players-container {
  width: 100%;
}

.players-page-header,
.player-card,
.player-details-card {
  background: rgb(255 255 255 / 90%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: var(--tennis-dashboard-shadow);
}

.players-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  gap: 1rem 1.5rem;
}

.players-page-header-embedded {
  display: block;
}

.players-page-header-embedded .players-description {
  margin-top: 0;
}

.players-page-header .brand-mark,
.player-details-card .brand-mark {
  margin: 0;
}

.players-title {
  margin: 0;
  overflow-wrap: anywhere;
  color: #0b4f2a;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.players-description,
.players-status,
.players-empty {
  color: var(--tennis-text-muted);
  line-height: 1.55;
}

.players-description {
  max-width: 48rem;
  margin: 0.45rem 0 0;
}

.players-status,
.players-empty {
  padding: 1rem;
  margin: 1rem 0;
  background: rgb(255 255 255 / 78%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.75rem;
}

.players-status-error {
  color: #6a2b1f;
  background: #fff1ed;
  border-color: #e5b6a8;
}

.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  padding: 0;
  margin: 1rem 0 0;
  gap: 1rem;
  list-style: none;
}

.player-card {
  display: flex;
  min-width: 0;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  flex-direction: column;
}

.player-card-header {
  display: flex;
  min-width: 0;
  margin-bottom: 0.85rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.player-card-header .player-card-name {
  min-width: 0;
}

.player-card-name {
  width: 100%;
  margin: 0 0 0.2rem;
  overflow-wrap: break-word;
  color: #0b4f2a;
  font-size: 1.25rem;
  font-weight: 800;
  hyphens: none;
  word-break: normal;
}

.player-card-header .player-current-group-badge {
  width: min(100%, 16rem);
  max-width: 16rem;
}

.player-current-group-badge {
  display: inline-flex;
  max-width: 11rem;
  padding: 0.45rem 0.65rem;
  flex: 0 0 auto;
  flex-direction: column;
  color: #0b4f2a;
  background: #e2f0df;
  border: 1px solid #b5d1b5;
  border-radius: 0.6rem;
  line-height: 1.25;
}

.player-current-group-label {
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.player-current-group-name {
  overflow-wrap: break-word;
  font-size: 0.82rem;
  word-break: normal;
}

.player-current-group-context {
  margin-top: 0.15rem;
  overflow-wrap: break-word;
  color: #315d3d;
  font-size: 0.7rem;
  word-break: normal;
}

.player-card-actions,
.player-details-actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
  gap: 0.75rem;
}

.player-card-actions .btn,
.player-details-actions .btn,
.players-back-link {
  min-height: 3rem;
  align-content: center;
  border-radius: var(--tennis-radius-md);
  font-weight: 700;
  text-decoration: none;
}

.player-details-card {
  width: min(100%, 58rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-inline: auto;
}

.player-details-layout {
  display: grid;
  min-width: 0;
  align-items: start;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
}

.player-details-main,
.player-details-aside {
  min-width: 0;
}

.player-details-aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.player-details-aside .player-current-group-badge,
.player-details-status-box,
.player-details-note-box {
  width: 100%;
  max-width: none;
}

.player-details-status-box {
  padding: 0.65rem 0.75rem;
  background: #f4f8f3;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.6rem;
}

.player-details-note-box {
  margin: 0;
}

.player-public-details {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr);
  margin: 1.5rem 0 0;
  gap: 0.75rem 1.25rem;
}

.player-public-term {
  color: #0b4f2a;
  font-weight: 750;
}

.player-public-value {
  margin: 0;
  overflow-wrap: anywhere;
}

.players-text-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--tennis-primary);
  font-weight: 700;
}

.player-availability-loading {
  display: grid;
  place-items: center;
}

.player-card-actions .btn:focus-visible,
.player-details-actions .btn:focus-visible,
.players-back-link:focus-visible,
.players-text-link:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
}

@media (max-width: 47.999rem) {
  .players-page-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .players-back-link {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
  }

  .player-card-actions,
  .player-details-actions {
    display: grid;
  }

  .player-current-group-badge {
    max-width: min(100%, 16rem);
  }

  .player-public-details {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .player-public-value {
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 61.999rem) {
  .player-details-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .player-details-aside {
    width: 100%;
  }
}

.admin-pending-card {
  width: 100%;
  max-width: 54rem;
}

.announcement-dashboard-content,
.pending-users-dashboard-content,
.admin-placeholder-content {
  padding: clamp(1rem, 2.5vw, 2rem);
}

.announcement-page-card-embedded,
.admin-pending-card-embedded {
  max-width: none;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  background: var(--tennis-surface);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
}

.admin-user-list {
  display: grid;
  margin: 0;
  gap: 1rem;
}

.admin-user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem;
  gap: 1.5rem;
  background: rgb(255 255 255 / 76%);
  border: 1px solid rgb(174 189 178 / 70%);
  border-radius: 0.75rem;
}

.admin-user-details {
  min-width: 0;
}

.admin-user-name,
.admin-user-email,
.admin-user-date {
  overflow-wrap: anywhere;
}

.admin-user-name {
  margin-bottom: 0.35rem;
  color: var(--tennis-text);
  font-weight: 750;
}

.admin-user-email {
  margin-bottom: 0.25rem;
  color: var(--tennis-text);
}

.admin-user-date {
  margin: 0;
  color: var(--tennis-text-muted);
  font-size: 0.9rem;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.admin-approve-button,
.admin-reject-button {
  min-width: 8rem;
  min-height: 3rem;
  border-radius: 0.75rem;
  font-weight: 700;
}

.admin-loading,
.admin-empty,
.admin-status {
  color: var(--tennis-text-muted);
  line-height: 1.6;
}

.admin-status.text-success {
  color: var(--tennis-primary) !important;
}

.announcement-container {
  max-width: 92rem;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.announcement-page-card {
  width: 100%;
  max-width: none;
}

.admin-section-navigation {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--tennis-border);
}

.admin-section-navigation-list {
  display: flex;
  padding: 0;
  margin: 0;
  gap: 0.25rem 1.5rem;
  list-style: none;
}

.admin-section-navigation-link {
  display: inline-flex;
  padding: 0.65rem 0.25rem;
  color: var(--tennis-text-muted);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 0.2rem solid transparent;
}

.admin-section-navigation-link:hover {
  color: var(--tennis-primary);
}

.admin-section-navigation-link[aria-current="page"] {
  color: var(--tennis-primary);
  border-bottom-color: var(--tennis-primary);
}

.admin-section-navigation-link:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
  border-radius: 0.15rem;
}

.announcement-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1.5rem 2rem;
}

.announcement-page-heading {
  max-width: 48rem;
}

.announcement-page-header .registration-description {
  margin-bottom: 0;
}

.announcement-create-button {
  min-height: 3.25rem;
  padding-inline: 1.5rem;
  flex: 0 0 auto;
  border-radius: var(--tennis-radius-md);
  font-weight: 750;
}

.announcement-workspace {
  display: grid;
  grid-template-columns: minmax(17rem, 0.8fr) minmax(28rem, 1.7fr);
  align-items: start;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.announcement-panel {
  min-width: 0;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: rgb(255 255 255 / 82%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: var(--tennis-dashboard-shadow);
}

.announcement-panel-title {
  margin: 0;
  color: #0b4f2a;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.announcement-panel-description {
  margin: 0.5rem 0 1.25rem;
  color: var(--tennis-text-muted);
}

.announcement-list {
  display: grid;
  margin: 0;
  gap: 0.75rem;
}

.announcement-list-feedback,
.announcement-empty {
  margin: 0;
  color: var(--tennis-text-muted);
  line-height: 1.6;
}

.announcement-list-feedback + .announcement-list,
.announcement-empty + .announcement-list {
  margin-top: 1rem;
}

.announcement-list-item {
  display: flex;
  width: 100%;
  padding: 1rem;
  flex-direction: column;
  gap: 0.45rem;
  color: var(--tennis-text);
  text-align: left;
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-border);
  border-radius: 0.75rem;
}

.announcement-list-item:hover {
  border-color: var(--tennis-green);
}

.announcement-list-item.is-selected {
  background: var(--tennis-primary-soft);
  border-color: var(--tennis-primary);
  box-shadow: inset 0.25rem 0 var(--tennis-primary);
}

.announcement-list-item:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
}

.announcement-list-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.announcement-list-item-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 750;
  line-height: 1.35;
}

.announcement-list-item-audience,
.announcement-list-item-updated {
  color: var(--tennis-text-muted);
  font-size: 0.875rem;
}

.announcement-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.announcement-status {
  display: inline-flex;
  padding: 0.35rem 0.65rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.announcement-status-draft {
  color: #6a2b1f;
  background: #fbe5df;
}

.announcement-status-published {
  color: #0b4f2a;
  background: #dff0e2;
}

.announcement-status-archived {
  color: #3e4841;
  background: #e8ece9;
}

.announcement-form .form-label {
  color: var(--tennis-text);
  font-weight: 700;
}

.announcement-form .form-control,
.announcement-form .form-select {
  min-height: 3.25rem;
  color: var(--tennis-text);
  background-color: rgb(255 255 255 / 96%);
  border-color: #aebdb2;
  border-radius: 0.75rem;
}

.announcement-form .form-control:hover,
.announcement-form .form-select:hover {
  border-color: var(--tennis-green);
}

.announcement-form .form-control:focus,
.announcement-form .form-select:focus {
  border-color: var(--tennis-focus);
  box-shadow: 0 0 0 0.25rem rgb(10 74 36 / 18%);
}

.announcement-content-input {
  min-height: 13rem !important;
  resize: vertical;
}

.announcement-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.announcement-form-actions .btn {
  min-width: 8.5rem;
  min-height: 3.1rem;
  padding-inline: 1.25rem;
  border-radius: var(--tennis-radius-md);
  font-weight: 750;
}

.announcement-archive-button {
  color: var(--tennis-clay-dark);
  background: transparent;
  border: 2px solid var(--tennis-clay);
}

.announcement-archive-button:hover,
.announcement-archive-button:focus-visible {
  color: #fff;
  background: var(--tennis-clay-dark);
  border-color: var(--tennis-clay-dark);
}

.announcement-action-status {
  margin-top: 1rem;
  color: var(--tennis-text-muted);
  line-height: 1.5;
}

.announcement-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem 2rem;
}

.announcement-footer-actions .logout-control {
  margin-top: 0;
}

.registration-form .verification-resend-button {
  min-height: 3.5rem;
  padding-block: 0.75rem;
  font-size: 1rem;
}

.verification-resend-status {
  line-height: 1.55;
}

.registration-account-prompt {
  margin: 1.75rem 0 0.75rem;
  color: var(--tennis-text-muted);
}

.registration-account-prompt a,
.registration-back-link {
  color: var(--tennis-primary);
  font-weight: 650;
}

.registration-account-prompt a:hover,
.registration-back-link:hover {
  color: var(--tennis-primary-hover);
}

.registration-back-link {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

.registration-account-prompt a:focus-visible,
.registration-back-link:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
  border-radius: 0.15rem;
}

.app-footer {
  color: rgb(255 255 255 / 84%);
  background: #0b321c;
  border-top: 1px solid rgb(255 255 255 / 15%);
}

.app-shell:has(.welcome-view, .registration-view) .app-footer {
  color: rgb(255 255 255 / 92%);
  background: rgb(8 38 21 / 48%);
  border-top-color: rgb(255 255 255 / 10%);
  text-shadow: 0 1px 2px rgb(0 0 0 / 28%);
}

.app-shell:has(.welcome-view, .registration-view) .footer-content {
  min-height: 4rem;
}

.footer-content {
  min-height: 4.5rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.footer-links a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
}

.footer-links a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 0.15rem;
}

@media (max-width: 575.98px) {
  .welcome-card {
    padding-inline: 1.25rem;
  }

  .registration-card {
    padding: 1.5rem 1.25rem;
    border-radius: 1.15rem;
  }

  .brand-mark-compact .brand-logo {
    width: 4rem;
  }

  .dashboard-summary-item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .admin-user-item {
    align-items: stretch;
    flex-direction: column;
    gap: 1rem;
  }

  .admin-user-actions,
  .admin-approve-button,
  .admin-reject-button {
    width: 100%;
  }

  .admin-section-navigation-list,
  .announcement-page-header,
  .announcement-footer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-section-navigation-list {
    gap: 0;
  }

  .announcement-create-button,
  .announcement-form-actions .btn {
    width: 100%;
  }

  .announcement-list-item-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .welcome-view {
    min-height: 40rem;
    padding-top: 4.5rem;
    padding-bottom: 4rem;
  }

  .welcome-view,
  .registration-view {
    background-image:
      radial-gradient(
        ellipse at 13% 3%,
        rgb(255 242 207 / 68%) 0%,
        rgb(255 220 159 / 29%) 31%,
        transparent 60%
      ),
      linear-gradient(
        to bottom,
        rgb(255 247 229 / 52%) 0%,
        rgb(255 234 205 / 31%) 39%,
        rgb(255 232 199 / 6%) 69%,
        rgb(8 25 14 / 12%) 100%
      );
  }

  .welcome-view .brand-logo {
    width: 6.5rem;
  }

  .welcome-title {
    font-size: clamp(3rem, 13vw, 3.4rem);
  }

  .welcome-kicker {
    margin-bottom: 1.75rem;
  }

  .welcome-actions {
    max-width: 20rem;
    margin-top: 2rem;
  }

  .welcome-actions .btn {
    min-height: 4rem;
  }

  .footer-content {
    padding-block: 1.25rem;
  }

  .app-shell:has(.welcome-view, .registration-view) .footer-content {
    padding-block: 0.75rem;
  }
}

@media (max-width: 991.98px) {
  .availability-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 767.98px) {
  .availability-view {
    padding: 0.75rem;
  }

  .availability-page-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .availability-page-header-embedded {
    grid-template-columns: minmax(0, 1fr);
  }

  .availability-dashboard-link {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .availability-recurrence-inputs {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .availability-page-header {
    padding: 1rem;
  }

  .availability-page-header .brand-logo {
    width: 3.25rem;
  }

  .availability-calendar {
    border-spacing: 0.12rem;
  }

  .availability-day-button {
    min-height: 3.5rem;
    padding: 0.35rem 0.25rem;
    border-radius: 0.45rem;
  }

  .availability-day-state {
    font-size: 0.52rem;
  }

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

  .availability-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .availability-actions .btn {
    width: 100%;
  }

  .availability-proposal-action .btn {
    width: 100%;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.dashboard-proposal-slot-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.dashboard-match-proposal-link {
  margin-top: 0.35rem;
  white-space: nowrap;
}

.match-proposal-view {
  align-items: flex-start;
  background: var(--tennis-background);
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 5rem);
  padding: clamp(1rem, 4vw, 3rem);
}

.match-proposal-card {
  background: var(--tennis-surface);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
  max-width: 42rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  width: 100%;
}

.match-proposal-form {
  display: grid;
  gap: 0.8rem;
}

.match-proposal-opponent,
.match-proposal-date {
  margin: 0;
}

.match-proposal-booking-link {
  font-weight: 600;
  width: fit-content;
}

.match-proposal-status,
.match-proposal-feedback {
  min-height: 1.5rem;
}

.match-proposal-status.is-error,
.match-proposal-feedback.is-error {
  color: var(--tennis-clay-dark);
}

.match-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.2rem;
}

.match-proposal-success {
  display: grid;
  gap: 1rem;
}

.match-proposal-success p {
  margin: 0;
}

.match-proposal-communication {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 575.98px) {
  .match-proposal-actions {
    flex-direction: column;
  }

  .match-proposal-actions .btn,
  .match-proposal-communication .btn {
    width: 100%;
  }
}

.matches-content {
  display: grid;
  gap: 1.25rem;
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

.matches-panel,
.match-response-panel {
  background: var(--tennis-surface);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  width: 100%;
}

.matches-panel {
  max-width: 82rem;
}

.match-response-panel {
  max-width: 58rem;
}

.matches-section-title {
  color: var(--tennis-text);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 0 0 1.25rem;
}

.matches-status,
.match-response-feedback {
  margin: 0;
  min-height: 1.5rem;
}

.matches-status.is-error,
.match-response-feedback.is-error {
  color: var(--tennis-clay-dark);
}

.incoming-proposal-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.incoming-proposal-item {
  align-content: start;
  border: 1px solid var(--tennis-border);
  border-radius: var(--tennis-radius-md);
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 1rem;
  background: var(--tennis-surface);
}

.incoming-proposal-status,
.incoming-proposal-sender,
.incoming-proposal-time,
.incoming-proposal-center {
  margin: 0;
}

.incoming-proposal-status {
  color: var(--tennis-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.incoming-proposal-item .btn {
  align-self: end;
  justify-self: start;
  margin-top: 0.45rem;
}

.match-response-details {
  display: grid;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}

.match-response-detail-row {
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(9rem, 0.4fr) minmax(0, 1fr);
}

.match-response-detail-label {
  color: var(--tennis-text-muted);
  font-weight: 600;
}

.match-response-detail-value {
  margin: 0;
}

.match-response-actions,
.match-response-success {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.match-response-success {
  align-items: flex-start;
  flex-direction: column;
}

.match-response-success h2,
.match-response-success p {
  margin: 0;
}

.dashboard-stat-link {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-underline-offset: 0.15em;
}

.matches-booking-host,
.court-booking-sections {
  display: grid;
  gap: 1.25rem;
}

.court-booking-list {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.court-booking-required-grid {
  grid-template-columns: repeat(2, minmax(20rem, 1fr));
}

.scheduled-match-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.match-result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.court-booking-item {
  border: 1px solid var(--tennis-border);
  border-radius: var(--tennis-radius-md);
  display: grid;
  gap: 0.85rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.court-booking-required-item {
  background: color-mix(
    in srgb,
    var(--tennis-ball) 8%,
    var(--tennis-surface)
  );
  border-color: color-mix(
    in srgb,
    var(--tennis-ball) 28%,
    var(--tennis-border)
  );
}

.scheduled-match-card {
  background: var(--tennis-primary-soft);
  border-color: color-mix(
    in srgb,
    var(--tennis-primary) 24%,
    var(--tennis-border)
  );
}

.court-booking-status,
.court-booking-opponent,
.court-booking-time,
.court-booking-proposed-center,
.court-booking-explanation,
.court-booking-feedback,
.court-booking-booked-title,
.court-booking-booked-center,
.court-booking-booked-by,
.court-booking-secondary-status,
.court-booking-sharing-help {
  margin: 0;
}

.court-booking-status,
.court-booking-booked-title {
  color: var(--tennis-primary);
  font-weight: 700;
}

.court-booking-status.is-required {
  color: var(--tennis-clay-dark);
}

.court-booking-secondary-status {
  color: var(--tennis-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

.court-booking-booked-by {
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
}

.court-booking-centers {
  border: 0;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.court-booking-legend {
  color: var(--tennis-text);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.court-booking-center-choice {
  align-items: center;
  border: 1px solid var(--tennis-border);
  border-radius: var(--tennis-radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: space-between;
  padding: 0.75rem;
}

.court-booking-center-label {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.court-booking-calendar-link {
  color: var(--tennis-primary);
  font-weight: 700;
}

.court-booking-form,
.court-booking-sharing {
  display: grid;
  gap: 0.85rem;
}

.court-booking-share-toggle {
  align-self: end;
  justify-self: start;
  margin-top: auto;
}

.court-booking-sharing[hidden],
.court-booking-share-toggle[hidden] {
  display: none;
}

.court-booking-feedback {
  min-height: 1.5rem;
}

.court-booking-feedback.is-error {
  color: var(--tennis-clay-dark);
}

.matches-status.is-success {
  color: var(--tennis-primary);
  font-weight: 700;
}

.schedule-results-content,
.schedule-results-layout {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.schedule-results-competition,
.schedule-results-group-identity,
.schedule-result-time,
.schedule-result-location,
.schedule-result-context,
.schedule-results-small-empty,
.schedule-results-empty-text,
.schedule-result-outcome {
  color: var(--tennis-text-muted);
  margin: 0;
}

.schedule-results-competition {
  font-weight: 700;
}

.schedule-result-context {
  font-size: 0.88rem;
  font-weight: 650;
}

.schedule-results-admin-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-results-admin-layout > .schedule-results-competition {
  grid-column: 1 / -1;
}

.schedule-admin-overview-list {
  grid-template-columns: minmax(0, 1fr);
}

.schedule-results-section {
  min-width: 0;
}

.schedule-results-match-group {
  container-name: schedule-match-group;
  container-type: inline-size;
}

.schedule-results-list,
.schedule-upcoming-list {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.schedule-result-card,
.schedule-upcoming-card,
.schedule-results-group-card,
.schedule-results-empty-card {
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: var(--tennis-shadow);
  min-width: 0;
  padding: 1rem;
}

.schedule-result-card,
.schedule-upcoming-card {
  display: grid;
  gap: 0.45rem;
}

.schedule-result-players,
.schedule-results-group-title,
.schedule-results-subheading,
.schedule-results-empty-title {
  margin: 0;
  overflow-wrap: break-word;
}

.schedule-result-players {
  font-size: 1rem;
}

.schedule-result-score {
  color: var(--tennis-primary);
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0.2rem 0 0;
}

.schedule-results-groups {
  display: grid;
  align-items: start;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.schedule-results-group-card {
  background: var(--tennis-surface-translucent);
}

.schedule-results-group-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.schedule-results-my-group-badge {
  display: inline-flex;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  color: #174d32;
  background: #dff3e7;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.schedule-results-subheading {
  font-size: 1rem;
  margin-top: 1.15rem;
}

.schedule-results-small-empty {
  margin-top: 0.65rem;
}

.schedule-results-empty-card {
  box-shadow: none;
}

.schedule-results-empty-text {
  margin-top: 0.4rem;
}

@container schedule-match-group (min-width: 40rem) {
  .schedule-results-match-group > .schedule-results-list,
  .schedule-results-match-group > .schedule-upcoming-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .schedule-results-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.leaderboard-content,
.leaderboard-layout {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.leaderboard-competition {
  color: var(--tennis-text-muted);
  font-weight: 700;
  margin: 0;
}

.leaderboard-section-description {
  color: var(--tennis-text-muted);
  margin: 0.35rem 0 0;
}

.leaderboard-section-host {
  min-width: 0;
}

.leaderboard-layout-admin {
  grid-template-columns: minmax(0, 1fr);
}

.leaderboard-season-panel {
  border-top: 0.25rem solid var(--tennis-primary);
}

.leaderboard-group-panel {
  background: var(--tennis-surface-translucent);
}

.leaderboard-admin-groups,
.leaderboard-admin-group-list,
.leaderboard-admin-group-results {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.leaderboard-month-field {
  margin-top: 0.25rem;
  max-width: 18rem;
}

.leaderboard-month-select {
  min-height: var(--tennis-touch-target);
}

.leaderboard-admin-group-card {
  background: var(--tennis-surface-translucent);
  min-width: 0;
}

.leaderboard-panel,
.leaderboard-empty-card {
  min-width: 0;
}

.leaderboard-table-wrapper {
  margin-top: 1rem;
  max-width: 100%;
  overflow-x: auto;
}

.leaderboard-table {
  border-collapse: collapse;
  min-width: 42rem;
  width: 100%;
}

.leaderboard-table th,
.leaderboard-table td {
  border-bottom: 1px solid var(--tennis-border);
  padding: 0.85rem 0.75rem;
  text-align: center;
  vertical-align: middle;
}

.help-content,
.help-topic-groups,
.help-topic-section {
  display: grid;
  min-width: 0;
}

.help-content {
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1rem, 2.5vw, 2rem);
}

.help-introduction {
  max-width: 48rem;
}

.help-introduction-title,
.help-topic-section-title,
.help-topic-title,
.help-topic-placeholder-title {
  margin: 0;
}

.help-introduction-title {
  color: var(--tennis-text);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
}

.help-introduction-description,
.help-topic-description,
.help-topic-placeholder-description {
  color: var(--tennis-text-muted);
}

.help-introduction-description {
  margin: 0.45rem 0 0;
  font-size: 1rem;
}

.help-topic-groups {
  gap: clamp(1.5rem, 3vw, 2rem);
}

.help-topic-section {
  gap: 0.85rem;
}

.help-topic-section-title {
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-topic-grid {
  display: grid;
  min-width: 0;
  gap: clamp(0.85rem, 1.8vw, 1.2rem);
}

.help-topic-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.help-topic-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-topic-card {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  padding: clamp(1rem, 2vw, 1.35rem);
  gap: 0.8rem 1rem;
  color: var(--tennis-text);
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: var(--tennis-dashboard-shadow);
  text-decoration: none;
}

.help-topic-card:hover {
  color: var(--tennis-text);
  border-color: #b8cdbd;
  box-shadow: 0 0.65rem 2rem rgb(28 56 37 / 11%);
}

.help-topic-card:focus-visible,
.help-back-link:focus-visible {
  outline: 0.2rem solid var(--tennis-focus);
  outline-offset: 0.18rem;
}

.help-topic-icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  grid-row: 1 / span 2;
  place-items: center;
  font-size: 2.25rem;
  line-height: 1;
}

.help-topic-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 0.4rem;
}

.help-topic-title {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  overflow-wrap: anywhere;
}

.help-topic-description {
  margin: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.help-topic-affordance {
  align-self: end;
  color: var(--tennis-primary);
  font-size: 0.86rem;
  font-weight: 750;
}

.help-topic-content {
  align-content: start;
}

.help-topic-placeholder {
  width: 100%;
  max-width: 48rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.help-topic-placeholder-description {
  margin: 0.65rem 0 1.25rem;
}

.help-back-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--tennis-primary);
  font-weight: 700;
  text-underline-offset: 0.18em;
}

.help-detail-content {
  width: 100%;
  overflow-x: clip;
}

.help-detail-introduction {
  display: grid;
  max-width: 52rem;
  gap: 0.75rem;
}

.help-detail-intro-copy,
.help-detail-section-description,
.help-journey-step-description,
.help-feature-description,
.help-detail-hint,
.help-account-menu-caption {
  color: var(--tennis-text-muted);
}

.help-detail-intro-copy {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.65;
}

.help-journey,
.help-other-features {
  display: grid;
  min-width: 0;
}

.help-journey {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  gap: 0.55rem;
  background: linear-gradient(145deg, #f4faf2, #edf6eb);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
}

.help-detail-section-title,
.help-journey-step-title,
.help-feature-title {
  margin: 0;
}

.help-detail-section-title {
  color: var(--tennis-text);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
}

.help-detail-section-description {
  max-width: 48rem;
  margin: 0;
  line-height: 1.6;
}

.help-journey-grid {
  display: grid;
  min-width: 0;
  padding: 0;
  margin: 0;
  gap: clamp(3rem, 5vw, 4.25rem) clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.help-journey-visual {
  position: relative;
  min-width: 0;
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
}

.help-journey-path {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  inset: 0;
}

.help-journey-path-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.82;
}

.help-journey-step {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  align-content: start;
  justify-items: center;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  gap: 0.55rem;
  text-align: center;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: var(--tennis-dashboard-shadow);
}

.help-journey-step:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.help-journey-step:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.help-journey-step:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.help-journey-step:nth-child(4) {
  grid-column: 4;
  grid-row: 1;
}

.help-journey-step:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}

.help-journey-step:nth-child(6) {
  grid-column: 3;
  grid-row: 2;
}

.help-journey-step:nth-child(7) {
  grid-column: 2;
  grid-row: 2;
}

.help-journey-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  background: #fff;
  border: 1px solid #dce9d9;
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.75rem rgb(28 56 37 / 7%);
  font-size: 1.75rem;
  line-height: 1;
}

.help-journey-number {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  color: #fff;
  background: var(--tennis-primary);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
}

.help-journey-step-title {
  font-size: clamp(0.96rem, 1.35vw, 1.08rem);
  overflow-wrap: break-word;
}

.help-journey-step-description {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.help-journey-connector {
  display: none;
}

.help-other-features {
  gap: 0.55rem;
}

.help-other-features-grid {
  display: grid;
  min-width: 0;
  margin-top: 0.7rem;
  gap: clamp(0.9rem, 2vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.help-feature-card {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: start;
  padding: clamp(1.15rem, 2.5vw, 1.65rem);
  gap: 0.65rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-dashboard-shadow);
}

.help-feature-icon {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--tennis-primary);
}

.help-feature-title {
  font-size: 1.15rem;
}

.help-feature-description {
  margin: 0;
  line-height: 1.55;
}

.help-feature-list {
  display: grid;
  padding-left: 1.2rem;
  margin: 0.15rem 0 0;
  gap: 0.35rem;
  color: var(--tennis-text);
  line-height: 1.5;
}

.help-feature-list li::marker {
  color: var(--tennis-primary);
}

.help-account-menu-mockup {
  display: grid;
  min-width: 0;
  padding: 0;
  margin: 0.45rem 0 0;
  gap: 0.55rem;
}

.help-account-menu-caption {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

.help-account-menu-bar {
  display: grid;
  position: relative;
  min-height: 9.5rem;
  align-content: start;
  justify-items: end;
  padding: 0.85rem;
  gap: 0.45rem;
  background-image: var(--tennis-dashboard-hero-background);
  background-position: center 63%;
  background-size: cover;
  border-radius: var(--tennis-radius-md);
}

.help-account-menu-trigger {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 650;
}

.help-account-menu-trigger .dashboard-icon {
  width: 0.75rem;
  transform: rotate(-90deg);
}

.help-account-menu-avatar {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  color: #0b4f2a;
  background: linear-gradient(145deg, #f7e1ba, #d9f2cf);
  border: 2px solid rgb(255 255 255 / 82%);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
}

.help-account-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-account-menu-list {
  width: min(100%, 11rem);
  padding: 0.3rem;
  color: var(--tennis-text);
  background: rgb(255 255 255 / 97%);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: var(--tennis-dashboard-shadow);
}

.help-account-menu-item {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--tennis-radius-md) - 0.2rem);
  font-size: 0.78rem;
  font-weight: 650;
}

.help-account-menu-item.is-current {
  color: var(--tennis-primary-hover);
  background: rgb(21 118 66 / 9%);
}

.help-account-menu-item + .help-account-menu-item {
  padding-top: 0.55rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--tennis-dashboard-border);
}

.help-detail-hint {
  padding: 0.8rem 1rem;
  margin: 0;
  background: var(--tennis-primary-soft);
  border-radius: var(--tennis-radius-md);
  font-size: 0.9rem;
}

.help-profile-help-content,
.help-profile-guide,
.help-profile-guide-layout,
.help-profile-preview,
.help-profile-callouts {
  min-width: 0;
}

.help-profile-guide {
  display: grid;
  gap: 1rem;
}

.help-profile-guide-layout {
  display: grid;
  min-width: 0;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.help-profile-guide-mockup {
  min-width: 0;
  padding: 0;
  margin: 0;
}

.help-profile-guide-caption {
  margin-bottom: 0.6rem;
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
}

.help-profile-preview {
  display: grid;
  padding: clamp(0.75rem, 2vw, 1.15rem);
  gap: 0.75rem;
  background: #f4f8f3;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-dashboard-shadow);
}

.help-profile-preview > .help-account-menu-bar {
  min-height: 8.75rem;
}

.help-profile-preview-card {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: start;
  padding: 0.75rem;
  gap: 0.4rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
}

.help-profile-preview-main {
  padding: 0.9rem;
}

.help-profile-preview-secondary {
  display: grid;
  min-width: 0;
  align-items: start;
  gap: 0.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.help-profile-preview-title {
  padding-right: 2rem;
  margin: 0 0 0.15rem;
  color: var(--tennis-primary-hover);
  font-size: 0.8rem;
  font-weight: 800;
}

.help-profile-preview-row {
  min-width: 0;
  padding: 0.38rem 0.5rem;
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  background: var(--tennis-primary-soft);
  border-radius: 0.45rem;
  font-size: 0.68rem;
  line-height: 1.35;
}

.help-profile-preview-marker {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 1;
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.68rem;
  box-shadow: 0 0.15rem 0.45rem rgb(9 40 22 / 15%);
}

.help-account-menu-bar > .help-profile-preview-marker {
  top: 0.65rem;
  right: auto;
  left: 0.65rem;
}

.help-profile-preview-choices {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.help-profile-preview-choice {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  padding: 0.32rem 0.45rem;
  gap: 0.3rem;
  color: var(--tennis-text-muted);
  background: #f3f5f3;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 999px;
  font-size: 0.64rem;
  line-height: 1.25;
}

.help-profile-preview-choice-indicator {
  width: 0.48rem;
  height: 0.48rem;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid #87958b;
  border-radius: 50%;
}

.help-profile-preview-choice.is-selected {
  color: #174d32;
  background: #dff3e7;
  border-color: #9bc9a7;
  font-weight: 750;
}

.help-profile-preview-choice.is-selected
  .help-profile-preview-choice-indicator {
  background: var(--tennis-primary);
  border-color: var(--tennis-primary);
  box-shadow: inset 0 0 0 0.1rem #fff;
}

.help-profile-preview-detail {
  padding-top: 0.4rem;
  color: var(--tennis-text-muted);
  border-top: 1px solid var(--tennis-dashboard-border);
  font-size: 0.62rem;
  line-height: 1.35;
}

.help-profile-provider-row {
  display: grid;
  min-width: 0;
  align-items: center;
  padding: 0.38rem 0;
  gap: 0.35rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.help-profile-provider-row + .help-profile-provider-row {
  border-top: 1px solid var(--tennis-dashboard-border);
}

.help-profile-provider-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.3rem;
  color: var(--tennis-text);
  font-size: 0.62rem;
  font-weight: 700;
}

.help-profile-provider-icon,
.help-profile-google-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
}

.help-profile-provider-status {
  padding: 0.18rem 0.35rem;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.help-profile-provider-status.is-connected {
  color: #07562c;
  background: #d9f1df;
  border: 1px solid #8bc49a;
}

.help-profile-provider-status.is-not-connected {
  color: #465149;
  background: #edf0ee;
  border: 1px solid #b9c2bc;
}

.help-profile-callouts {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 0.75rem;
  list-style: none;
}

.help-profile-callout {
  display: grid;
  min-width: 0;
  align-items: start;
  padding: 0.9rem;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
}

.help-profile-callout-number {
  display: inline-grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  color: #fff;
  background: var(--tennis-primary);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
}

.help-profile-callout-copy {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
}

.help-profile-callout-title {
  margin: 0;
  font-size: 1rem;
}

.help-profile-callout-description {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.help-profile-good-to-know {
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--tennis-primary-soft);
  border: 1px solid #d7e8d7;
  border-radius: var(--tennis-radius-md);
}

.help-profile-good-to-know-title {
  margin: 0;
  color: var(--tennis-primary-hover);
  font-size: 1rem;
}

.help-profile-good-to-know-list {
  display: grid;
  padding-left: 1.2rem;
  margin: 0.65rem 0 0;
  gap: 0.35rem;
  color: var(--tennis-text-muted);
  line-height: 1.5;
}

.help-profile-good-to-know-list li::marker {
  color: var(--tennis-primary);
}

.help-availability-help-content,
.help-availability-guide,
.help-availability-guide-layout,
.help-availability-preview,
.help-availability-preview-workspace,
.help-availability-callouts,
.help-availability-labels,
.help-availability-legend {
  min-width: 0;
}

.help-availability-guide,
.help-availability-labels {
  display: grid;
  gap: 1rem;
}

.help-availability-guide-layout {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.help-availability-guide-mockup {
  min-width: 0;
  margin: 0;
}

.help-availability-guide-caption {
  margin-bottom: 0.6rem;
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
}

.help-availability-preview {
  display: grid;
  padding: clamp(0.75rem, 2vw, 1.15rem);
  gap: 0.75rem;
  background: #f4f8f3;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-dashboard-shadow);
}

.help-availability-preview-workspace {
  display: grid;
  align-items: start;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.help-availability-preview-panel {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: start;
  padding: 0.8rem;
  gap: 0.5rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
}

.help-availability-preview-title {
  padding-right: 2rem;
  margin: 0;
  color: var(--tennis-primary-hover);
  font-size: 0.78rem;
  font-weight: 800;
}

.help-availability-preview-marker {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.68rem;
  box-shadow: 0 0.15rem 0.45rem rgb(9 40 22 / 15%);
}

.help-availability-preview-weekdays,
.help-availability-preview-days {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.help-availability-preview-weekdays {
  color: var(--tennis-text-muted);
  font-size: 0.55rem;
  font-weight: 750;
  text-align: center;
}

.help-availability-preview-day {
  display: grid;
  min-width: 0;
  min-height: 2.9rem;
  place-content: center;
  padding: 0.25rem 0.1rem;
  color: var(--tennis-text);
  background: #f7f9f7;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.45rem;
  text-align: center;
}

.help-availability-preview-day.is-selected {
  background: #e2f0df;
  border-color: var(--tennis-primary);
  box-shadow: inset 0 0 0 1px var(--tennis-primary);
}

.help-availability-preview-day.has-availability {
  color: #174d32;
  background: #dff3e7;
  border-color: #9bc9a7;
}

.help-availability-preview-day.has-match {
  color: #70400b;
  background: #fff0d5;
  border-color: #e1c58f;
}

.help-availability-preview-day.is-past {
  color: #747d77;
  background: #edf0ee;
  opacity: 0.78;
}

.help-availability-preview-day-number {
  font-size: 0.68rem;
  font-weight: 800;
}

.help-availability-preview-day-state {
  min-height: 0.7rem;
  overflow-wrap: anywhere;
  font-size: 0.46rem;
  line-height: 1.15;
}

.help-availability-preview-slot {
  display: grid;
  min-width: 0;
  padding: 0.52rem 0.6rem;
  gap: 0.15rem;
  color: var(--tennis-text-muted);
  background: #f7f9f7;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.55rem;
}

.help-availability-preview-slot.is-selected {
  color: #174d32;
  background: #dff3e7;
  border-color: #9bc9a7;
}

.help-availability-preview-slot-time {
  font-size: 0.68rem;
  font-weight: 800;
}

.help-availability-preview-slot-state {
  font-size: 0.56rem;
  line-height: 1.25;
}

.help-availability-preview-recurrence {
  gap: 0.6rem;
}

.help-availability-preview-toggle {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  color: var(--tennis-text);
  font-size: 0.64rem;
  font-weight: 700;
}

.help-availability-preview-toggle-control {
  position: relative;
  width: 1.65rem;
  height: 0.9rem;
  background: var(--tennis-primary);
  border-radius: 999px;
}

.help-availability-preview-toggle-control::after {
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  width: 0.66rem;
  height: 0.66rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0.08rem 0.2rem rgb(9 40 22 / 18%);
  content: "";
}

.help-availability-preview-recurrence-fields {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.help-availability-preview-field {
  display: grid;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  gap: 0.08rem;
  background: #f7f9f7;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.45rem;
}

.help-availability-preview-field-label {
  color: var(--tennis-text-muted);
  font-size: 0.5rem;
  font-weight: 750;
  text-transform: uppercase;
}

.help-availability-preview-field-value,
.help-availability-preview-recurrence-status {
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.58rem;
  line-height: 1.3;
}

.help-availability-preview-recurrence-status {
  color: var(--tennis-primary-hover);
  font-weight: 700;
}

.help-availability-preview-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.help-availability-preview-action {
  position: relative;
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 0.75rem;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  font-size: 0.62rem;
  font-weight: 750;
  text-align: center;
}

.help-availability-preview-action.is-primary {
  color: #fff;
  background: var(--tennis-primary);
  border-color: var(--tennis-primary);
}

.help-availability-preview-action.is-remove {
  color: #7b3528;
  background: #fff4f0;
  border-color: #e5b6a8;
}

.help-availability-preview-action.is-secondary {
  color: var(--tennis-primary-hover);
  background: #fff;
}

.help-availability-preview-action .help-availability-preview-marker {
  top: -0.65rem;
  right: -0.45rem;
}

.help-availability-callouts {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 0.75rem;
  list-style: none;
}

.help-availability-callout {
  display: grid;
  min-width: 0;
  align-items: start;
  padding: 0.9rem;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
}

.help-availability-callout > .help-availability-preview-marker {
  position: static;
}

.help-availability-callout-copy {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
}

.help-availability-callout-title {
  margin: 0;
  font-size: 1rem;
}

.help-availability-callout-description {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.help-availability-legend {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.help-availability-legend-item {
  display: grid;
  min-width: 0;
  align-items: start;
  padding: 0.8rem;
  gap: 0.55rem;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
}

.help-availability-legend-indicator {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.15rem;
  background: #edf0ee;
  border: 1px solid #b9c2bc;
  border-radius: 50%;
}

.help-availability-legend-indicator.has-availability {
  background: #dff3e7;
  border-color: #70ac80;
}

.help-availability-legend-indicator.has-match {
  background: #fff0d5;
  border-color: #d4a95f;
}

.help-availability-legend-indicator.is-selected {
  background: var(--tennis-primary-soft);
  border: 2px solid var(--tennis-primary);
}

.help-availability-legend-indicator.is-past {
  background: #dfe3e0;
  border-color: #9da69f;
}

.help-availability-legend-copy {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
  color: var(--tennis-text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.help-availability-legend-copy strong {
  color: var(--tennis-text);
  font-size: 0.86rem;
}

.help-availability-good-to-know {
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--tennis-primary-soft);
  border: 1px solid #d7e8d7;
  border-radius: var(--tennis-radius-md);
}

.help-availability-good-to-know-title {
  margin: 0;
  color: var(--tennis-primary-hover);
  font-size: 1rem;
}

.help-availability-good-to-know-list {
  display: grid;
  padding-left: 1.2rem;
  margin: 0.65rem 0 0;
  gap: 0.35rem;
  color: var(--tennis-text-muted);
  line-height: 1.5;
}

.help-availability-good-to-know-list li::marker {
  color: var(--tennis-primary);
}

.help-find-match-help-content,
.help-find-match-guide,
.help-find-match-guide-layout,
.help-find-match-preview,
.help-find-match-preview-opponent,
.help-find-match-preview-next,
.help-find-match-callouts,
.help-find-match-comparison,
.help-find-match-comparison-grid {
  min-width: 0;
}

.help-find-match-guide,
.help-find-match-comparison {
  display: grid;
  gap: 1rem;
}

.help-find-match-guide-layout {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.help-find-match-guide-mockup {
  min-width: 0;
  margin: 0;
}

.help-find-match-guide-caption {
  margin-bottom: 0.6rem;
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
}

.help-find-match-preview {
  display: grid;
  align-items: stretch;
  padding: clamp(0.75rem, 2vw, 1.15rem);
  gap: 0.75rem;
  background: #f4f8f3;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-dashboard-shadow);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.help-find-match-preview-opponent,
.help-find-match-preview-next {
  position: relative;
  display: grid;
  align-content: start;
  padding: 0.85rem;
  gap: 0.75rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
}

.help-find-match-preview-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
}

.help-find-match-preview-avatar {
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--tennis-primary);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
}

.help-find-match-preview-identity-copy {
  display: grid;
  min-width: 0;
  gap: 0.3rem;
  font-size: 0.78rem;
}

.help-find-match-preview-identity-copy strong {
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.88rem;
}

.help-find-match-preview-identity-copy .player-status-inline {
  width: fit-content;
  font-size: 0.6rem;
}

.help-find-match-preview-common,
.help-find-match-preview-details {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 0.7rem;
  gap: 0.5rem;
  background: var(--tennis-primary-soft);
  border: 1px solid #d7e8d7;
  border-radius: calc(var(--tennis-radius-md) - 0.15rem);
}

.help-find-match-preview-marker {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.68rem;
  box-shadow: 0 0.15rem 0.45rem rgb(9 40 22 / 15%);
}

.help-find-match-callout > .help-find-match-preview-marker {
  position: static;
}

.help-find-match-preview-label {
  padding-right: 1.8rem;
  margin: 0;
  color: var(--tennis-primary-hover);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.help-find-match-preview-common-slots {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
}

.help-find-match-preview-slot {
  display: block;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  overflow-wrap: break-word;
  color: #174d32;
  background: #dff3e7;
  border: 1px solid #9bc9a7;
  border-radius: 0.5rem;
  font-size: 0.67rem;
  font-weight: 750;
  text-align: center;
}

.help-find-match-preview-next-time {
  padding-right: 1.8rem;
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.88rem;
  line-height: 1.4;
}

.help-find-match-preview-details {
  padding-top: 0.75rem;
  background: #f7f9f7;
  border-color: var(--tennis-dashboard-border);
}

.help-find-match-preview-detail {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.help-find-match-preview-detail + .help-find-match-preview-detail {
  padding-top: 0.45rem;
  border-top: 1px solid var(--tennis-dashboard-border);
}

.help-find-match-preview-detail-label {
  color: var(--tennis-text-muted);
  font-size: 0.58rem;
}

.help-find-match-preview-detail-value {
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.68rem;
}

.help-find-match-preview-actions {
  display: grid;
  min-width: 0;
  gap: 0.55rem;
}

.help-find-match-preview-action {
  position: relative;
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tennis-primary);
  border-radius: var(--tennis-radius-md);
  font-size: 0.64rem;
  font-weight: 750;
  text-align: center;
}

.help-find-match-preview-action.is-primary {
  color: #fff;
  background: var(--tennis-primary);
}

.help-find-match-preview-action.is-secondary {
  color: var(--tennis-primary-hover);
  background: #fff;
}

.help-find-match-preview-action .help-find-match-preview-marker {
  top: -0.55rem;
  right: -0.4rem;
}

.help-find-match-comparison-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-find-match-comparison-item {
  display: grid;
  min-width: 0;
  padding: 1rem;
  gap: 0.35rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: 0 0.3rem 0.9rem rgb(9 40 22 / 6%);
}

.help-find-match-comparison-title {
  margin: 0;
  color: var(--tennis-primary-hover);
  font-size: 0.95rem;
}

.help-find-match-comparison-description {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.help-proposal-help-content,
.help-proposal-guide,
.help-proposal-guide-layout,
.help-proposal-preview,
.help-proposal-preview-stage,
.help-proposal-preview-stage-body,
.help-proposal-callouts {
  min-width: 0;
}

.help-proposal-guide {
  display: grid;
  gap: 1rem;
}

.help-proposal-guide-layout {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.help-proposal-guide-mockup {
  min-width: 0;
  margin: 0;
}

.help-proposal-guide-caption {
  margin-bottom: 0.6rem;
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
}

.help-proposal-preview {
  display: grid;
  align-items: start;
  padding: clamp(0.75rem, 2vw, 1.15rem);
  gap: 0.75rem;
  background: #f4f8f3;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-dashboard-shadow);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-proposal-preview-stage {
  position: relative;
  display: grid;
  align-content: start;
  padding: 0.85rem;
  gap: 0.6rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
}

.help-proposal-preview-stage.is-review,
.help-proposal-preview-stage.is-scheduled {
  grid-column: 1 / -1;
}

.help-proposal-preview-stage-title {
  padding-right: 1.9rem;
  margin: 0;
  color: var(--tennis-primary-hover);
  font-size: 0.76rem;
  font-weight: 800;
}

.help-proposal-preview-stage-body {
  display: grid;
  align-content: start;
  gap: 0.55rem;
}

.help-proposal-preview-marker {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  width: 1.55rem;
  height: 1.55rem;
  font-size: 0.68rem;
  box-shadow: 0 0.15rem 0.45rem rgb(9 40 22 / 15%);
}

.help-proposal-callout > .help-proposal-preview-marker {
  position: static;
}

.help-proposal-preview-opponent {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--tennis-text);
  font-size: 0.7rem;
}

.help-proposal-preview-opponent strong {
  overflow-wrap: break-word;
}

.help-proposal-preview-opponent .player-status-inline {
  flex: 0 0 auto;
  font-size: 0.56rem;
}

.help-proposal-preview-details {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-proposal-preview-detail {
  display: grid;
  min-width: 0;
  padding: 0.42rem 0.5rem;
  gap: 0.08rem;
  background: #f7f9f7;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.45rem;
}

.help-proposal-preview-detail-label {
  color: var(--tennis-text-muted);
  font-size: 0.52rem;
}

.help-proposal-preview-detail-value {
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.61rem;
}

.help-proposal-preview-booking-link {
  width: fit-content;
  color: var(--tennis-primary-hover);
  font-size: 0.6rem;
  font-weight: 750;
}

.help-proposal-preview-check {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--tennis-text-muted);
  font-size: 0.58rem;
  line-height: 1.35;
}

.help-proposal-preview-checkbox {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: var(--tennis-primary);
  border-radius: 0.25rem;
  font-size: 0.64rem;
  font-weight: 800;
}

.help-proposal-preview-action {
  display: inline-flex;
  min-width: 0;
  min-height: 2.15rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.6rem;
  overflow-wrap: break-word;
  border: 1px solid var(--tennis-primary);
  border-radius: var(--tennis-radius-md);
  font-size: 0.61rem;
  font-weight: 750;
  text-align: center;
}

.help-proposal-preview-action.is-primary {
  color: #fff;
  background: var(--tennis-primary);
}

.help-proposal-preview-action.is-secondary {
  color: var(--tennis-primary-hover);
  background: #fff;
}

.help-proposal-preview-status {
  display: inline-flex;
  width: fit-content;
  padding: 0.22rem 0.45rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 800;
}

.help-proposal-preview-status-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.help-proposal-preview-status-label {
  color: var(--tennis-text-muted);
  font-size: 0.56rem;
  font-weight: 700;
}

.help-proposal-preview-status.is-pending {
  color: #70400b;
  background: #fff0d5;
  border-color: #e1c58f;
}

.help-proposal-preview-status.is-accepted {
  color: #07562c;
  background: #dff3e7;
  border-color: #9bc9a7;
}

.help-proposal-preview-note,
.help-proposal-preview-checked {
  margin: 0;
  color: var(--tennis-text-muted);
  font-size: 0.58rem;
  line-height: 1.4;
}

.help-proposal-preview-share-actions,
.help-proposal-preview-response-actions {
  display: grid;
  min-width: 0;
  gap: 0.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-proposal-preview-message {
  display: grid;
  min-width: 0;
  padding: 0.6rem;
  gap: 0.3rem;
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  background: var(--tennis-primary-soft);
  border: 1px solid #d7e8d7;
  border-radius: 0.55rem;
  font-size: 0.56rem;
  line-height: 1.4;
}

.help-proposal-preview-person {
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.7rem;
}

.help-proposal-preview-summary {
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  font-size: 0.61rem;
}

.help-proposal-preview-booking-required {
  display: grid;
  min-width: 0;
  padding: 0.7rem;
  gap: 0.25rem;
  color: #70400b;
  background: #fff0d5;
  border: 1px solid #e1c58f;
  border-radius: 0.55rem;
  font-size: 0.61rem;
  line-height: 1.4;
}

.help-proposal-preview-booking-required strong {
  font-size: 0.68rem;
}

.help-scheduled-help-content,
.help-scheduled-guide,
.help-scheduled-guide-layout,
.help-scheduled-guide-mockup,
.help-scheduled-preview,
.help-scheduled-preview-stage,
.help-scheduled-callouts {
  min-width: 0;
}

.help-scheduled-guide {
  display: grid;
  gap: 1rem;
}

.help-scheduled-guide-layout {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.help-scheduled-guide-mockup {
  margin: 0;
}

.help-scheduled-preview-stage.is-required,
.help-scheduled-preview-stage.is-cancellation {
  grid-column: 1 / -1;
}

.help-scheduled-center-list {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

.help-scheduled-center-choice {
  display: grid;
  min-width: 0;
  align-items: center;
  padding: 0.42rem 0.5rem;
  gap: 0.35rem;
  background: #f7f9f7;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.45rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.help-scheduled-center-choice.is-selected {
  background: var(--tennis-primary-soft);
  border-color: #a8cdaa;
}

.help-scheduled-center-indicator {
  color: var(--tennis-primary);
  font-size: 0.65rem;
}

.help-scheduled-center-name {
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.6rem;
  font-weight: 700;
}

.help-scheduled-center-choice .help-proposal-preview-booking-link {
  font-size: 0.52rem;
  text-align: right;
}

.help-scheduled-external-note,
.help-scheduled-cancellation-warning {
  margin: 0;
  font-size: 0.58rem;
  line-height: 1.4;
}

.help-scheduled-external-note {
  color: var(--tennis-text-muted);
}

.help-scheduled-confirmation-state {
  display: grid;
  padding: 0.58rem;
  gap: 0.18rem;
  color: #07562c;
  background: #dff3e7;
  border: 1px solid #9bc9a7;
  border-radius: 0.55rem;
  font-size: 0.58rem;
  line-height: 1.35;
}

.help-scheduled-confirmation-state strong {
  font-size: 0.68rem;
}

.help-scheduled-sharing-textarea {
  min-height: 3.8rem;
  padding: 0.55rem;
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  background: #fff;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.45rem;
  font-size: 0.58rem;
  line-height: 1.4;
}

.help-scheduled-match-title {
  color: var(--tennis-primary-hover);
  font-size: 0.72rem;
}

.help-proposal-preview-action.is-danger {
  color: #9b2c2c;
  background: #fff;
  border-color: #c85f5f;
}

.help-scheduled-preview-stage.is-cancellation {
  background: #fffafa;
  border-color: #e7bbbb;
}

.help-scheduled-cancellation-warning {
  color: #7d3232;
  font-weight: 650;
}

.help-results-help-content,
.help-results-guide,
.help-results-guide-layout,
.help-results-guide-mockup,
.help-results-preview,
.help-results-preview-stage,
.help-results-callouts,
.help-results-comparison,
.help-results-comparison-grid {
  min-width: 0;
}

.help-results-guide,
.help-results-comparison {
  display: grid;
  gap: 1rem;
}

.help-results-guide-layout {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.help-results-guide-mockup {
  margin: 0;
}

.help-results-preview-stage.is-entry,
.help-results-preview-stage.is-correction {
  grid-column: 1 / -1;
}

.help-results-match-context,
.help-results-competition {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.63rem;
  font-weight: 750;
}

.help-results-outcomes {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}

.help-results-field-label {
  width: 100%;
  color: var(--tennis-text-muted);
  font-size: 0.55rem;
}

.help-results-outcome-option {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--tennis-text-muted);
  font-size: 0.58rem;
}

.help-results-outcome-option.is-selected {
  color: var(--tennis-text);
  font-weight: 750;
}

.help-results-outcome-indicator {
  color: var(--tennis-primary);
  font-size: 0.66rem;
}

.help-results-score-grid,
.help-results-state-grid,
.help-results-comparison-grid {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-results-score-field {
  display: grid;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  gap: 0.1rem;
  background: #fff;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.45rem;
}

.help-results-score-value {
  color: var(--tennis-text);
  font-size: 0.68rem;
}

.help-results-state-card {
  display: grid;
  min-width: 0;
  padding: 0.55rem;
  gap: 0.2rem;
  border: 1px solid;
  border-radius: 0.5rem;
  font-size: 0.56rem;
  line-height: 1.35;
}

.help-results-state-card.is-played {
  color: #07562c;
  background: #dff3e7;
  border-color: #9bc9a7;
}

.help-results-state-card.is-not-played {
  color: var(--tennis-text-muted);
  background: #f4f5f4;
  border-color: var(--tennis-dashboard-border);
}

.help-results-table-wrapper {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.5rem;
}

.help-results-table {
  width: 100%;
  color: var(--tennis-text-muted);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: clamp(0.43rem, 1.25vw, 0.53rem);
  text-align: center;
}

.help-results-table th,
.help-results-table td {
  padding: 0.3rem 0.16rem;
  overflow-wrap: break-word;
  border-bottom: 1px solid var(--tennis-dashboard-border);
}

.help-results-table th:nth-child(2),
.help-results-table td:nth-child(2) {
  width: 30%;
  text-align: left;
}

.help-results-table thead th {
  color: var(--tennis-text-muted);
  background: #f7f9f7;
  font-weight: 750;
  text-transform: uppercase;
}

.help-results-table tbody tr:last-child > * {
  border-bottom: 0;
}

.help-results-table .is-current-player {
  color: var(--tennis-text);
  background: var(--tennis-primary-soft);
}

.help-results-table .is-points,
.help-results-you-label {
  color: var(--tennis-primary);
  font-weight: 800;
}

.help-results-comparison-card {
  min-width: 0;
  padding: 1rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: 0 0.3rem 0.9rem rgb(9 40 22 / 6%);
}

.help-messages-help-content,
.help-messages-guide,
.help-messages-guide-layout,
.help-messages-guide-mockup,
.help-messages-preview,
.help-messages-preview-stage,
.help-messages-callouts,
.help-messages-principle,
.help-messages-principle-grid {
  min-width: 0;
}

.help-messages-privacy-notice {
  display: grid;
  max-width: 58rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  gap: 0.35rem;
  color: #70400b;
  background: #fff8e8;
  border: 1px solid #e1c58f;
  border-radius: var(--tennis-radius-lg);
}

.help-messages-privacy-title,
.help-messages-privacy-copy {
  margin: 0;
}

.help-messages-privacy-title {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.help-messages-privacy-copy {
  max-width: 52rem;
  overflow-wrap: break-word;
  font-size: 0.94rem;
  line-height: 1.55;
}

.help-messages-principle,
.help-messages-guide {
  display: grid;
  gap: 1rem;
}

.help-messages-principle {
  gap: 0.55rem;
}

.help-messages-principle-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-messages-principle-card {
  display: grid;
  min-width: 0;
  padding: 0.9rem 1rem;
  gap: 0.25rem;
  background: var(--tennis-dashboard-card);
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: var(--tennis-radius-md);
  box-shadow: 0 0.3rem 0.9rem rgb(9 40 22 / 6%);
}

.help-messages-principle-card strong {
  color: var(--tennis-primary-hover);
}

.help-messages-principle-card span {
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.help-messages-guide-layout {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.help-messages-guide-mockup {
  margin: 0;
}

.help-messages-preview-stage.is-compose,
.help-messages-preview-stage.is-resolved {
  grid-column: 1 / -1;
}

.help-messages-preview-recipient {
  color: var(--tennis-text);
  font-size: 0.68rem;
}

.help-messages-preview-field {
  display: grid;
  min-width: 0;
  min-height: 2.35rem;
  align-content: center;
  padding: 0.42rem 0.5rem;
  gap: 0.1rem;
  background: #fff;
  border: 1px solid var(--tennis-dashboard-border);
  border-radius: 0.45rem;
}

.help-messages-preview-field.is-multiline {
  min-height: 3.65rem;
  align-content: start;
}

.help-messages-preview-field-value {
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  font-size: 0.58rem;
  line-height: 1.4;
}

.help-messages-preview-stage.is-privacy {
  background: #fffaf0;
  border-color: #e1c58f;
}

.help-messages-preview-boundary {
  display: grid;
  min-width: 0;
  padding: 0.55rem;
  gap: 0.18rem;
  border: 1px solid;
  border-radius: 0.5rem;
  font-size: 0.56rem;
  line-height: 1.4;
}

.help-messages-preview-boundary.is-suitable {
  color: #07562c;
  background: #e8f5eb;
  border-color: #aad0b2;
}

.help-messages-preview-boundary.is-avoid {
  color: #70400b;
  background: #fff8e8;
  border-color: #e1c58f;
}

.help-messages-preview-thread-heading,
.help-messages-preview-list-heading,
.help-messages-preview-lifecycle {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.help-messages-preview-thread-heading strong,
.help-messages-preview-list-heading strong {
  overflow-wrap: break-word;
  color: var(--tennis-text);
  font-size: 0.66rem;
}

.help-messages-preview-status.is-open {
  color: #70400b;
  background: #fff0d5;
  border-color: #e1c58f;
}

.help-messages-preview-status.is-resolved {
  color: #07562c;
  background: #dff3e7;
  border-color: #9bc9a7;
}

.help-messages-preview-bubble {
  display: grid;
  width: min(86%, 16rem);
  padding: 0.48rem 0.55rem;
  gap: 0.14rem;
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  background: #f3f5f3;
  border-radius: 0.6rem 0.6rem 0.6rem 0.2rem;
  font-size: 0.56rem;
  line-height: 1.4;
}

.help-messages-preview-bubble strong {
  color: var(--tennis-text);
  font-size: 0.54rem;
}

.help-messages-preview-bubble.is-own {
  justify-self: end;
  background: var(--tennis-primary-soft);
  border-radius: 0.6rem 0.6rem 0.2rem;
}

.help-messages-preview-new-topic,
.help-messages-preview-resolved-note {
  min-width: 0;
  padding: 0.52rem 0.6rem;
  overflow-wrap: break-word;
  color: var(--tennis-text-muted);
  background: #f7f9f7;
  border: 1px dashed #b8cdbd;
  border-radius: 0.5rem;
  font-size: 0.57rem;
  line-height: 1.4;
}

.help-messages-preview-new-topic {
  display: grid;
  gap: 0.1rem;
  text-align: center;
}

.help-messages-preview-new-topic strong {
  color: var(--tennis-primary-hover);
}

.help-messages-preview-tabs {
  display: flex;
  min-width: 0;
  border-bottom: 1px solid var(--tennis-dashboard-border);
}

.help-messages-preview-tabs span {
  padding: 0.35rem 0.55rem;
  color: var(--tennis-text-muted);
  font-size: 0.57rem;
  font-weight: 750;
}

.help-messages-preview-tabs .is-current {
  color: var(--tennis-primary-hover);
  border-bottom: 2px solid var(--tennis-primary);
}

.help-messages-preview-list-item {
  display: grid;
  min-width: 0;
  padding: 0.55rem;
  gap: 0.12rem;
  color: var(--tennis-text-muted);
  background: var(--tennis-primary-soft);
  border: 1px solid #b8d4bc;
  border-radius: 0.5rem;
  font-size: 0.57rem;
}

.help-messages-preview-list-item small {
  font-size: 0.51rem;
}

.help-messages-preview-new {
  padding: 0.14rem 0.35rem;
  color: #fff;
  background: var(--tennis-primary);
  border-radius: 999px;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.help-messages-preview-lifecycle {
  justify-content: center;
}

.help-messages-preview-lifecycle-line {
  width: min(4rem, 30%);
  height: 0.1rem;
  background: #a8cdaa;
  border-radius: 999px;
}

.help-messages-preview-resolved-note {
  margin: 0;
}

@media (min-width: 992px) {
  .help-profile-guide-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
  }

  .help-availability-guide-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
  }

  .help-find-match-guide-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
  }

  .help-proposal-guide-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
  }

  .help-scheduled-guide-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
  }

  .help-results-guide-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
  }

  .help-messages-guide-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.85fr);
  }
}

@media (max-width: 991.98px) {
  .help-topic-grid-three,
  .help-topic-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-availability-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-journey-path {
    display: none;
  }

  .help-journey-connector {
    position: absolute;
    top: 50%;
    right: calc(-1 * clamp(1.55rem, 2.5vw, 2.5rem));
    display: block;
    width: clamp(1.4rem, 2.5vw, 2.4rem);
    height: 0.125rem;
    background: rgb(25 107 44 / 62%);
    border-radius: 999px;
    transform: translateY(-50%);
  }

  .help-journey-connector::after {
    position: absolute;
    top: 50%;
    right: -0.05rem;
    width: 0;
    height: 0;
    border-top: 0.28rem solid transparent;
    border-bottom: 0.28rem solid transparent;
    border-left: 0.42rem solid var(--tennis-primary);
    content: "";
    transform: translateY(-50%);
  }

  .help-journey-step:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .help-journey-step:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .help-journey-step:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .help-journey-step:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }

  .help-journey-step:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }

  .help-journey-step:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
  }

  .help-journey-step:nth-child(7) {
    grid-column: 2;
    grid-row: 4;
  }

  .help-journey-step:nth-child(2) .help-journey-connector,
  .help-journey-step:nth-child(4) .help-journey-connector,
  .help-journey-step:nth-child(6) .help-journey-connector {
    top: calc(100% + clamp(1.3rem, 2vw, 1.8rem));
    right: 50%;
    left: auto;
    transform: translate(50%, -50%) rotate(90deg);
  }

  .help-journey-step:nth-child(3) .help-journey-connector {
    right: auto;
    left: calc(-1 * clamp(1.55rem, 2.5vw, 2.5rem));
    transform: translateY(-50%) rotate(180deg);
  }

  .help-journey-step:nth-child(5) .help-journey-connector {
    right: calc(-1 * clamp(1.55rem, 2.5vw, 2.5rem));
    left: auto;
    transform: translateY(-50%);
  }
}

@media (max-width: 575.98px) {
  .help-content {
    gap: 1.25rem;
  }

  .help-topic-groups {
    gap: 1.35rem;
  }

  .help-topic-grid-three,
  .help-topic-grid-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-topic-card {
    padding: 1rem;
  }

  .help-topic-icon {
    width: 3rem;
    height: 3rem;
    font-size: 2.1rem;
  }

  .help-detail-content {
    gap: 1.25rem;
  }

  .help-journey {
    padding: 1rem;
  }

  .help-journey-grid {
    gap: 2.75rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .help-journey-step:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }

  .help-journey-step:nth-child(n) .help-journey-connector {
    top: calc(100% + 1.35rem);
    right: 50%;
    left: auto;
    transform: translate(50%, -50%) rotate(90deg);
  }

  .help-other-features-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-account-menu-bar {
    min-height: 9rem;
  }

  .help-profile-preview-secondary {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-availability-preview-workspace,
  .help-availability-preview-recurrence-fields,
  .help-availability-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-availability-preview-actions {
    display: grid;
  }

  .help-find-match-preview,
  .help-find-match-comparison-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-proposal-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-proposal-preview-stage.is-review,
  .help-proposal-preview-stage.is-scheduled,
  .help-scheduled-preview-stage.is-required,
  .help-scheduled-preview-stage.is-cancellation,
  .help-results-preview-stage.is-entry,
  .help-results-preview-stage.is-correction {
    grid-column: auto;
  }

  .help-proposal-preview-details,
  .help-proposal-preview-share-actions,
  .help-proposal-preview-response-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-scheduled-center-choice {
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .help-scheduled-center-choice .help-proposal-preview-booking-link {
    grid-column: 2;
    text-align: left;
  }

  .help-results-score-grid,
  .help-results-state-grid,
  .help-results-comparison-grid,
  .help-messages-principle-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-messages-preview-stage.is-compose,
  .help-messages-preview-stage.is-resolved {
    grid-column: auto;
  }

  .help-profile-callout {
    padding: 0.8rem;
  }
}

.leaderboard-table th:nth-child(2),
.leaderboard-table td:nth-child(2) {
  overflow-wrap: break-word;
  text-align: left;
}

.leaderboard-table thead th {
  color: var(--tennis-text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.leaderboard-table tbody tr:last-child th,
.leaderboard-table tbody tr:last-child td {
  border-bottom: 0;
}

.leaderboard-current-player {
  background: var(--tennis-primary-soft);
}

.leaderboard-current-player th,
.leaderboard-current-player td {
  font-weight: 700;
}

.leaderboard-points {
  color: var(--tennis-primary);
  font-weight: 800;
}

.leaderboard-you-label {
  color: var(--tennis-primary);
  white-space: nowrap;
}

.match-result-card .btn {
  align-self: end;
  justify-self: start;
  margin-top: auto;
}

.match-result-display {
  color: var(--tennis-primary);
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0;
}

.match-result-dialog-backdrop {
  align-items: center;
  background: rgb(15 32 25 / 58%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 1080;
}

.match-cancellation-dialog-backdrop {
  align-items: center;
  background: rgb(15 32 25 / 58%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 1080;
}

.account-deletion-dialog-backdrop {
  display: flex;
  position: fixed;
  z-index: 1090;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(15 32 25 / 62%);
}

.account-deletion-dialog-backdrop[hidden] {
  display: none;
}

.account-deletion-dialog {
  width: min(100%, 36rem);
  max-height: calc(100vh - 2rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow-y: auto;
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
}

.account-deletion-dialog-title,
.account-deletion-dialog-message p,
.account-deletion-dialog-feedback {
  margin: 0;
}

.account-deletion-dialog-message {
  display: grid;
  margin-top: 0.85rem;
  gap: 0.75rem;
  color: var(--tennis-text-muted);
}

.account-deletion-final-warning {
  color: var(--tennis-text);
  font-weight: 700;
}

.account-deletion-dialog-feedback {
  min-height: 1.5rem;
  margin-top: 1rem;
}

.account-deletion-dialog-feedback.is-error {
  color: var(--tennis-clay-dark);
}

.account-deletion-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 1rem;
  gap: 0.75rem;
}

@media (max-width: 575.98px) {
  .profile-account-delete,
  .account-deletion-dialog-actions .btn {
    width: 100%;
  }

  .account-deletion-dialog-actions {
    flex-direction: column;
  }
}

.match-cancellation-dialog-backdrop[hidden] {
  display: none;
}

.match-cancellation-dialog {
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
  width: min(100%, 34rem);
}

.match-cancellation-dialog-title,
.match-cancellation-dialog-message,
.match-cancellation-feedback,
.match-cancellation-notify-title,
.match-cancellation-help,
.match-cancellation-court-reminder {
  margin: 0;
}

.match-cancellation-dialog-message,
.match-cancellation-help {
  color: var(--tennis-text-muted);
}

.match-cancellation-dialog-message {
  margin-top: 0.75rem;
}

.match-cancellation-feedback {
  min-height: 1.5rem;
  margin-top: 1rem;
}

.match-cancellation-feedback.is-error {
  color: var(--tennis-clay-dark);
}

.match-cancellation-actions,
.match-cancellation-share-actions,
.scheduled-match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.match-cancellation-actions {
  justify-content: flex-end;
}

.scheduled-match-actions {
  align-items: center;
  margin-top: auto;
}

.scheduled-match-actions .court-booking-share-toggle {
  margin-top: 0;
}

.match-cancellation-trigger {
  align-self: end;
  justify-self: start;
}

.match-cancellation-success {
  display: grid;
  gap: 0.85rem;
}

.match-cancellation-notify-title {
  font-size: 1.05rem;
  margin-top: 0.35rem;
}

.match-cancellation-court-reminder {
  color: var(--tennis-clay-dark);
  font-weight: 700;
}

.match-cancellation-dialog button:focus-visible,
.match-cancellation-success a:focus-visible,
.match-cancellation-success textarea:focus-visible,
.match-cancellation-trigger:focus-visible {
  outline: 3px solid var(--tennis-focus);
  outline-offset: 3px;
}

.match-result-dialog-backdrop[hidden] {
  display: none;
}

.match-result-dialog {
  background: var(--tennis-surface);
  border: 1px solid var(--tennis-border);
  border-radius: var(--tennis-radius-lg);
  box-shadow: var(--tennis-shadow);
  max-height: min(90vh, 46rem);
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  width: min(100%, 38rem);
}

.match-result-dialog-title,
.match-result-dialog-context,
.match-result-feedback,
.match-result-score-help,
.match-result-field-error {
  margin: 0;
}

.match-result-dialog-context,
.match-result-score-help {
  color: var(--tennis-text-muted);
}

.match-result-form {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.match-result-outcomes {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin: 0;
  padding: 0;
}

.match-result-legend {
  float: none;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  width: 100%;
}

.match-result-outcome-option {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
  min-height: 2.75rem;
}

.match-result-scores {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.match-result-scores[hidden] {
  display: none;
}

.match-result-score-field {
  min-width: 0;
}

.match-result-score-help,
.match-result-field-error {
  font-size: 0.82rem;
  margin-top: 0.35rem;
}

.match-result-field-error,
.match-result-feedback.is-error {
  color: var(--tennis-clay-dark);
}

.match-result-field-error,
.match-result-feedback {
  min-height: 1.35rem;
}

.match-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.court-booking-sharing {
  border-top: 1px solid var(--tennis-border);
  margin-top: 0.25rem;
  padding-top: 1rem;
}

.court-booking-sharing-title {
  font-size: 1rem;
  margin: 0;
}

.court-booking-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.scheduled-match-card:has(.court-booking-sharing:not([hidden])) {
  grid-column: span 2;
}

@media (max-width: 1199.98px) {
  .incoming-proposal-list,
  .scheduled-match-grid,
  .match-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 767.98px) {
  .incoming-proposal-list,
  .court-booking-required-grid,
  .scheduled-match-grid,
  .match-result-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-results-admin-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .scheduled-match-card:has(.court-booking-sharing:not([hidden])) {
    grid-column: span 1;
  }
}

@media (max-width: 575.98px) {
  .incoming-proposal-item,
  .match-response-detail-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .incoming-proposal-item .btn {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.5rem;
    width: 100%;
  }

  .match-response-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .match-response-actions .btn {
    width: 100%;
  }

  .court-booking-center-choice {
    align-items: stretch;
    flex-direction: column;
  }

  .court-booking-calendar-link {
    min-height: 2.75rem;
    padding: 0.55rem 0;
  }

  .court-booking-share-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .court-booking-share-actions .btn,
  .match-cancellation-share-actions .btn,
  .scheduled-match-actions .btn,
  .court-booking-form > .btn {
    width: 100%;
  }

  .match-cancellation-actions,
  .match-cancellation-share-actions,
  .scheduled-match-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .match-result-scores {
    grid-template-columns: minmax(0, 1fr);
  }

  .match-result-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .match-result-actions .btn,
  .match-result-card .btn {
    width: 100%;
  }
}