/**
 * Recruiter-scheduling feature stylesheet (portal SPA + athlete page).
 * All classes are prefixed rcr-. Colors come from the CSS variables in
 * style.css only. rem values are calibrated to the site's 10px root
 * (1rem = 10px), NOT the browser default 16px.
 */

/* ------------------------------------------------------------------ shared */

.rcr-loading {
  padding: 4rem;
  text-align: center;
  font-size: var(--fs-6);
  color: var(--black-coral);
}

.rcr-muted {
  color: var(--black-coral);
  font-size: var(--fs-9);
}

.rcr-template-link {
  display: inline-block;
  margin-top: 1rem;
  margin-left: 1.2rem;
  color: var(--cinnamon-satin);
  font-size: var(--fs-9);
  text-decoration: none;
}

.rcr-template-link:hover {
  text-decoration: underline;
}

.rcr-error {
  background-color: var(--status-error-light);
  color: var(--status-error-text);
  border-radius: var(--radius-6);
  padding: 1rem 1.4rem;
  margin: 1rem 0;
  font-size: var(--fs-9);
}

.rcr-warning {
  background-color: var(--status-warning-light);
  color: var(--status-warning-text);
  border-radius: var(--radius-6);
  padding: 1rem 1.4rem;
  margin: 1rem 0;
  font-size: var(--fs-9);
}

.rcr-input,
.rcr-select {
  font-family: var(--ff-manrope);
  font-size: var(--fs-8);
  color: var(--charcoal);
  background-color: var(--white);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-6);
  padding: 1rem 1.2rem;
  min-height: 4.4rem; /* 44px touch target */
}

.rcr-input:focus,
.rcr-select:focus {
  outline: 2px solid var(--cinnamon-satin);
  outline-offset: 1px;
}

/* Compact, low-emphasis inline select for the Athletes table's Preferred
   column — reads as plain text until hovered/focused so it doesn't shout. */
.rcr-preferred-select {
  font-size: var(--fs-9, 1.3rem);
  padding: 0.4rem 0.6rem;
  min-height: 0;
  border-color: transparent;
  background-color: transparent;
  max-width: 16rem;
}
.rcr-preferred-select:hover {
  border-color: var(--cadet-blue-crayola_a20);
  background-color: var(--white);
}

.rcr-input-short {
  max-width: 12rem;
}

/* Inline role dropdown in the recruiter roster — compact, auto-saves. */
.rcr-role-select {
  max-width: 14rem;
}

.rcr-label {
  display: block;
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  color: var(--charcoal);
  margin: 2rem 0 0.6rem;
}

.rcr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--ff-manrope);
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  border: none;
  border-radius: var(--radius-6);
  padding: 1rem 1.8rem;
  min-height: 4.4rem; /* 44px touch target */
  cursor: pointer;
  transition: var(--transition-1);
  text-decoration: none;
}

.rcr-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.rcr-btn-primary {
  background-color: var(--cinnamon-satin);
  color: var(--white);
}

.rcr-btn-secondary {
  background-color: var(--cultured);
  color: var(--charcoal);
  border: 1px solid var(--cadet-blue-crayola_a20);
}

.rcr-btn-danger {
  background-color: var(--status-error);
  color: var(--white);
}

.rcr-btn-small {
  min-height: 3.2rem;
  padding: 0.4rem 1rem;
  font-size: var(--fs-10);
}

.rcr-btn-block {
  display: flex;
  width: 100%;
  margin-top: 2.4rem;
}

.rcr-link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--cinnamon-satin);
  font-family: var(--ff-manrope);
  font-size: inherit;
  font-weight: var(--fw-700);
  cursor: pointer;
  text-decoration: underline;
}

.rcr-checkbox-label,
.rcr-radio-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 4.4rem;
  font-size: var(--fs-8);
  color: var(--charcoal);
  cursor: pointer;
  text-align: left;
}

/* Keep the control at its natural size next to the label — never let it
   stretch (which would center the dot and push the text to the far right)
   and let the text take the remaining width. */
.rcr-checkbox-label input,
.rcr-radio-label input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.rcr-checkbox-label > span,
.rcr-radio-label > span {
  flex: 1 1 auto;
}

.rcr-radio-label {
  align-items: flex-start;
  padding: 0.6rem 0;
}

.rcr-radio-label input {
  margin-top: 0.4rem;
}

.rcr-older-tournaments {
  margin-top: 1.6rem;
}

.rcr-actions-row {
  display: flex;
  gap: 1.2rem;
  margin-top: 2rem;
  justify-content: flex-end;
}

/* Missing-Tier-column prompt on the upload preview: left-aligned controls, the
   "yes, tiers are in a column" picker laid out inline. */
.rcr-tier-resolution p {
  margin: 0 0 1rem;
}

.rcr-tier-resolution .rcr-actions-row {
  margin-top: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}

.rcr-tier-remap {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.rcr-spinner {
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--white_a12);
  border-top-color: var(--white);
  border-radius: var(--radius-circle);
  animation: rcr-spin 0.8s linear infinite;
}

@keyframes rcr-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------- portal shell */

.rcr-portal {
  max-width: 120rem;
  margin: 0 auto;
  padding: 2rem;
  font-family: var(--ff-manrope);
  color: var(--charcoal);
}

.rcr-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.rcr-title {
  font-size: var(--fs-4);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
}

.rcr-user-email {
  font-size: var(--fs-9);
  color: var(--black-coral);
}

.rcr-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: var(--radius-6);
  padding: 1.2rem 1.6rem;
  margin-bottom: 1.6rem;
  font-size: var(--fs-8);
}

.rcr-banner-success {
  background-color: var(--status-success-light);
  color: var(--status-success-text);
}

.rcr-banner-error {
  background-color: var(--status-error-light);
  color: var(--status-error-text);
}

.rcr-banner-warning {
  background-color: var(--status-warning-light);
  color: var(--status-warning-text);
  display: block;
}

.rcr-banner-close {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--fs-8);
  cursor: pointer;
  min-width: 4.4rem;
  min-height: 4.4rem;
}

.rcr-selectors {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.rcr-selector {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--fs-9);
  font-weight: var(--fw-700);
  color: var(--black-coral);
}

.rcr-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--cadet-blue-crayola_a20);
  margin-bottom: 2rem;
}

.rcr-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: var(--ff-manrope);
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  color: var(--black-coral);
  padding: 1.2rem 1.6rem;
  min-height: 4.4rem;
  cursor: pointer;
  transition: var(--transition-1);
}

.rcr-tab:hover {
  color: var(--charcoal);
}

.rcr-tab-active {
  color: var(--cinnamon-satin);
  border-bottom-color: var(--cinnamon-satin);
}

.rcr-section {
  background-color: var(--white);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-1);
  padding: 2rem;
  margin-bottom: 2rem;
}

.rcr-section-title {
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
  margin-bottom: 1rem;
}

.rcr-subsection-title {
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
  margin: 1.6rem 0 0.6rem;
}

.rcr-empty-state {
  padding: 4rem 2rem;
  text-align: center;
  font-size: var(--fs-8);
  color: var(--black-coral);
}

/* ------------------------------------------------------------------ tables */

.rcr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-9);
  margin: 1.2rem 0;
}

/* The background and the shadow are this table's half of the sticky header in
   style.css: a transparent header lets the rows pass through it, and the 2px
   border belongs to the collapsed grid rather than to the pinned cells, so the
   shadow redraws it. */
.rcr-table th {
  text-align: left;
  font-weight: var(--fw-700);
  color: var(--black-coral);
  border-bottom: 2px solid var(--cadet-blue-crayola_a20);
  padding: 0.8rem 1rem;
  background: var(--white, #fff);
  --sticky-head-shadow: inset 0 -2px 0 var(--cadet-blue-crayola_a20);
}

.rcr-table td {
  border-bottom: 1px solid var(--raisin-black_a6);
  padding: 0.8rem 1rem;
  vertical-align: middle;
}

/* Left-align the athlete Name column so the headshots stack against the left
   edge; the names ending at different points is expected. */
.rcr-table td.rcr-name-td {
  text-align: left;
}

/* .rcr-table-scroll has no rule of its own any more: its overflow-x, and
   .rcr-grid-scroll's below, is in style.css with the sticky-header pattern that
   takes it away again once the columns fit. Declared here it would beat that
   rule and the headers would stop sticking. App.tsx watches both. */

.rcr-row-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.rcr-row-problem {
  background-color: var(--status-error-light);
}

.rcr-cell-problems {
  color: var(--status-error-text);
  font-size: var(--fs-10);
}

/* ------------------------------------------------------------------ badges */

.rcr-badges {
  display: inline-flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.rcr-badge {
  display: inline-block;
  font-size: var(--fs-10);
  font-weight: var(--fw-700);
  border-radius: var(--radius-pill);
  padding: 0.2rem 1rem;
  margin-left: 0.6rem;
  white-space: nowrap;
}

.rcr-badges .rcr-badge {
  margin-left: 0;
}

.rcr-badge-success { background-color: var(--status-success-light); color: var(--status-success-text); }
.rcr-badge-info    { background-color: var(--status-info-light);    color: var(--status-info-text); }
.rcr-badge-warning { background-color: var(--status-warning-light); color: var(--status-warning-text); }
.rcr-badge-danger  { background-color: var(--status-error-light);   color: var(--status-error-text); }
.rcr-badge-neutral { background-color: var(--cultured);             color: var(--black-coral); }
.rcr-badge-head    { background-color: var(--snow);                 color: var(--cinnamon-satin); }
.rcr-badge-pending { background-color: var(--status-warning-light); color: var(--status-warning-text); }
.rcr-badge-admin   { background-color: var(--cinnamon-satin);       color: var(--snow); }

/* Inline note on a bounced admin's row explaining why Remove is absent and how
   the take-over is unlocked. */
.rcr-admin-undeliverable {
  align-self: center;
  font-size: var(--fs-9);
  color: var(--status-error-text);
}

/* ------------------------------------------------------------- program tab */

.rcr-new-program,
.rcr-add-recruiter {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.2rem;
}

.rcr-new-program .rcr-input {
  flex: 1 1 30rem;
}

/* Colleague name + email share one row on desktop; the ~22rem flex-basis
   makes both fail to fit on a phone-width card, so they wrap to their own
   lines (matching the stylesheet's flex-wrap convention — no media queries). */
.rcr-add-recruiter .rcr-input {
  flex: 1 1 22rem;
}

.rcr-setup-list {
  list-style: none;
  padding: 0;
  font-size: var(--fs-9);
}

.rcr-setup-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--raisin-black_a6);
}

.rcr-event-picker,
.rcr-team-picker {
  margin: 1.2rem 0;
}

.rcr-event-picker .rcr-input {
  width: 100%;
  max-width: 48rem;
}

.rcr-event-results,
.rcr-team-results {
  margin-top: 0.8rem;
  max-height: 32rem;
  overflow-y: auto;
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-6);
}

.rcr-event-result,
.rcr-team-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  min-height: 4.4rem;
  padding: 1rem 1.4rem;
  background-color: var(--white);
  border: none;
  border-bottom: 1px solid var(--raisin-black_a6);
  font-family: var(--ff-manrope);
  font-size: var(--fs-8);
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-1);
}

.rcr-event-result:hover,
.rcr-team-result:hover {
  background-color: var(--cultured);
}

.rcr-event-result-name,
.rcr-team-result-name {
  font-weight: var(--fw-700);
}

.rcr-event-result-dates,
.rcr-team-result-meta {
  font-size: var(--fs-10);
  color: var(--black-coral);
}

/* --------------------------------------------------------- preferences tab */

.rcr-duration-row {
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin: 1.6rem 0;
}

.rcr-attendance-row {
  border-bottom: 1px solid var(--raisin-black_a6);
}

.rcr-window-form {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1.2rem 0;
}

/* Date + start + end sit on one line on wide screens (the shared .rcr-input is
   width:100%, which would stack them); they wrap to their own lines only when
   the row runs out of width (narrow/phone). */
.rcr-window-form .rcr-input {
  width: auto;
  flex: 0 1 auto;
}

/* One-click "available all tournament" + its keep/replace confirm prompt. */
.rcr-fill-all {
  margin: 1.2rem 0;
}

.rcr-fill-prompt {
  margin: 1.2rem 0;
  padding: 1.6rem;
  background-color: var(--cultured);
  border-radius: var(--radius-6);
}

.rcr-fill-prompt-actions {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

/* "Recruiter availability received" acknowledgement (all days addressed). */
.rcr-availability-received {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1.2rem 0;
  padding: 1.2rem 1.6rem;
  background-color: var(--status-success-light);
  border-radius: var(--radius-6);
}

.rcr-received-check {
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  color: var(--status-success-text);
}

.rcr-chips {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.rcr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background-color: var(--snow);
  color: var(--charcoal);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-pill);
  padding: 0.6rem 0.8rem 0.6rem 1.4rem;
  font-size: var(--fs-9);
}

.rcr-chip-remove {
  background: none;
  border: none;
  color: var(--cinnamon-satin);
  font-size: var(--fs-9);
  cursor: pointer;
  min-width: 2.8rem;
  min-height: 2.8rem;
  border-radius: var(--radius-circle);
}

.rcr-chip-remove:hover {
  background-color: var(--cadet-blue-crayola_a20);
}

.rcr-collapse-toggle {
  display: block;
  margin-top: 1.6rem;
  text-decoration: none;
  font-size: var(--fs-8);
}

.rcr-per-recruiter {
  margin-top: 1.2rem;
  padding: 1.6rem;
  background-color: var(--cultured);
  border-radius: var(--radius-6);
}

/* ------------------------------------------------------------ schedule tab */

.rcr-schedule-toolbar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.rcr-unschedulable-list {
  margin: 0.6rem 0 0 2rem;
}

.rcr-date-picker {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 1.2rem 0;
}

.rcr-date-btn {
  background-color: var(--cultured);
  color: var(--charcoal);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-pill);
  font-family: var(--ff-manrope);
  font-size: var(--fs-9);
  font-weight: var(--fw-700);
  padding: 0.8rem 1.6rem;
  min-height: 4.4rem;
  cursor: pointer;
  transition: var(--transition-1);
}

.rcr-date-btn-active {
  background-color: var(--cinnamon-satin);
  border-color: var(--cinnamon-satin);
  color: var(--white);
}

/* Grid: sticky first column + horizontal scroll. */
.rcr-grid-scroll {
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-6);
}

.rcr-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-10);
  min-width: 100%;
}

.rcr-grid th,
.rcr-grid td {
  border-bottom: 1px solid var(--raisin-black_a6);
  border-right: 1px solid var(--raisin-black_a6);
  padding: 0.6rem 0.8rem;
  text-align: left;
  white-space: nowrap;
}

/* The sticky itself is the shared rule in style.css. It used to be declared
   here and did nothing: the wrapper's own overflow-x made it a scroll container
   on both axes, so the header was pinned to a box that never scrolls
   vertically and left the screen with the page. This table draws its borders
   with border-collapse: separate, so they travel with the pinned cells and it
   wants no shadow of its own. */
.rcr-grid thead th {
  background-color: var(--cultured);
  font-weight: var(--fw-700);
  color: var(--black-coral);
  --sticky-head-shadow: none;
}

.rcr-grid-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--cultured);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
  min-width: 14rem;
}

.rcr-grid thead .rcr-grid-sticky {
  z-index: 3;
}

.rcr-cell {
  min-width: 14rem;
  background-color: var(--white);
}

.rcr-cell-filled {
  cursor: pointer;
}

.rcr-cell-filled:hover {
  background-color: var(--snow);
}

.rcr-cell-empty {
  background-color: var(--cultured);
}

.rcr-cell-selected {
  outline: 3px solid var(--cinnamon-satin);
  outline-offset: -3px;
  background-color: var(--snow);
}

.rcr-cell-locked {
  background-color: var(--cadet-blue-crayola_a20);
  color: var(--black-coral);
  cursor: not-allowed;
}

.rcr-cell-athlete {
  font-weight: var(--fw-700);
  color: var(--gunmetal);
}

.rcr-cell-team,
.rcr-cell-field {
  color: var(--black-coral);
}

/* Confirm / warnings dialogs. */
.rcr-dialog-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--raisin-black_a6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.rcr-dialog {
  background-color: var(--white);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-2);
  padding: 2.4rem;
  max-width: 48rem;
  width: calc(100% - 4rem);
  font-size: var(--fs-8);
}

.rcr-dialog h3 {
  font-size: var(--fs-6);
  color: var(--gunmetal);
  margin-bottom: 1.2rem;
}

.rcr-dialog ul {
  margin: 0 0 1rem 2rem;
}

/* --------------------------------------------------------------- print tab */

.rcr-print-toolbar {
  display: flex;
  gap: 1.2rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.rcr-print-title {
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
  margin-bottom: 1rem;
}

@media print {
  /* Keep only the single-recruiter print area on paper. */
  body * {
    visibility: hidden;
  }

  .rcr-print-area,
  .rcr-print-area * {
    visibility: visible;
  }

  .rcr-print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
  }

  .rcr-print-table th,
  .rcr-print-table td {
    padding: 4pt 6pt;
    font-size: 10pt;
  }
}

/* ------------------------------------------------------------ athlete page */
/* Mobile-first; every interactive element is a 44px touch target. */

.rcr-athlete-page {
  min-height: 100vh;
  background-color: var(--cultured);
  padding: 1.6rem;
  font-family: var(--ff-manrope);
  color: var(--charcoal);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.rcr-athlete-card {
  background-color: var(--white);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-2);
  padding: 2.4rem;
  width: 100%;
  max-width: 56rem;
}

.rcr-athlete-title {
  font-size: var(--fs-5);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
  margin-bottom: 1.2rem;
}

.rcr-athlete-greeting {
  font-size: var(--fs-8);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.rcr-athlete-error-card p {
  margin-bottom: 1rem;
  font-size: var(--fs-8);
}

.rcr-athlete-page .rcr-input {
  width: 100%;
}

.rcr-athlete-page .rcr-input-short {
  max-width: 14rem;
}

.rcr-team-search {
  width: 100%;
}

.rcr-team-result-note {
  padding: 1.2rem 1.4rem;
}

.rcr-team-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  background-color: var(--snow);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-6);
  padding: 1.4rem;
}

.rcr-team-card-name {
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
}

/* --------------------------------------- staff athlete-thumbnail (portal table) */
.rcr-athlete-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.rcr-athlete-thumb {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--snow);
}

/* Clickable thumbnail that opens the full-size headshot lightbox. */
.rcr-athlete-thumb-zoomable {
  cursor: zoom-in;
}

/* Headshot lightbox: reuses .rcr-dialog-backdrop for the dim overlay; the image
   is shown at natural size (capped so the ~512px source never upscales blurry). */
.rcr-headshot-backdrop {
  cursor: zoom-out;
}

.rcr-headshot-zoom {
  max-width: min(90vw, 512px);
  max-height: 90vh;
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-2);
  object-fit: contain;
}

/* ---------------------------------------------------- athlete headshot upload */
.rcr-headshot {
  margin-top: 1.6rem;
}

.rcr-headshot-hint {
  font-size: var(--fs-9);
  color: var(--black-coral);
  line-height: 1.4;
  margin-bottom: 1rem;
}

.rcr-headshot-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.rcr-headshot-preview {
  width: 8rem;
  height: 8rem;
  flex-shrink: 0;
  border-radius: var(--radius-8);
  overflow: hidden;
  background-color: var(--snow);
  border: 1px solid var(--cadet-blue-crayola_a20);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcr-headshot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rcr-headshot-placeholder {
  font-size: var(--fs-9);
  color: var(--black-coral);
  text-align: center;
}

.rcr-headshot-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
}

/* The real <input type=file> is hidden; the "Add a photo" button drives it. */
.rcr-headshot-input {
  display: none;
}

.rcr-btn-plain {
  background: none;
  border: none;
  color: var(--black-coral);
  padding: 0.4rem 0.2rem;
  text-decoration: underline;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Athlete opt-out (DNC) — banner on the form, confirm-panel action row.
   ------------------------------------------------------------------------- */
.rcr-dnc-banner {
  background-color: var(--status-warning-light);
  color: var(--status-warning-text);
  border-radius: var(--radius-6);
  padding: 1.4rem;
  margin-bottom: 2rem;
  font-size: var(--fs-8);
  line-height: 1.5;
}

.rcr-dnc-banner p {
  margin: 0 0 1rem;
}

.rcr-optout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   Athletes tab — response-status summary strip + filter chips.
   ------------------------------------------------------------------------- */
.rcr-summary-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.rcr-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-pill);
  background-color: var(--white);
  font-size: var(--fs-9);
  color: var(--black-coral);
  cursor: pointer;
  transition: var(--transition-1);
}

.rcr-summary-chip-active {
  background-color: var(--snow);
  border-color: var(--cinnamon-satin);
  color: var(--gunmetal);
  font-weight: var(--fw-700);
}

.rcr-summary-chip-danger {
  color: var(--status-error-text);
}

/* Push the bulk-remind button to the right edge of the strip. */
.rcr-remind-all {
  margin-left: auto;
}

/* Preferences tab — share-observation-windows opt-in checkbox. */
.rcr-share-windows {
  margin: 1.6rem 0;
  max-width: 60rem;
}

/* Program send-blocked banner (bounce/opt-out guardrail tripped). */
.rcr-send-blocked {
  margin: 1.2rem 0;
}

/* Clickable info tooltip (Preferred column header) + row email-edit pencil. */
.rcr-th-preferred {
  position: relative;
}
.rcr-info-btn {
  border: none;
  background: transparent;
  color: var(--cadet-blue-crayola);
  cursor: pointer;
  font-size: var(--fs-9, 1.3rem);
  padding: 0 0.4rem;
  line-height: 1;
}
.rcr-info-btn:hover { color: var(--cinnamon-satin); }
.rcr-info-popover {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  width: 26rem;
  margin-top: 0.4rem;
  padding: 1rem 1.2rem;
  background-color: var(--white);
  color: var(--charcoal);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-6);
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.12);
  font-weight: var(--fw-400);
  white-space: normal;
}

/* Inline email edit on an athlete row. */
.rcr-email-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.rcr-email-edit-btn {
  visibility: hidden;
}
.rcr-email-cell:hover .rcr-email-edit-btn,
tr:hover .rcr-email-edit-btn {
  visibility: visible;
}
.rcr-email-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.rcr-email-input {
  min-width: 22rem;
}

/* -------------------------------------------------- roster filters + bulk */
.rcr-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.2rem;
  margin: 1rem 0 1.2rem;
}

.rcr-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: var(--fs-9);
  color: var(--black-coral);
}

/* Inline label + info button (matches the Preferred column's ⓘ pattern). */
.rcr-filter-age-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Name / team partial-match text filters. */
.rcr-filter-text {
  width: 16rem;
}

/* Fixed width so the SearchableSelect age picker doesn't collapse. */
.rcr-age-select {
  width: 11rem;
}

/* Bulk-action bar — appears above the table when rows are selected. */
.rcr-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.2rem;
  background-color: var(--snow);
  border: 1px solid var(--cinnamon-satin);
  border-radius: var(--radius-6);
}

.rcr-bulk-count {
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
  margin-right: auto;
}

/* Narrow leading checkbox column. */
.rcr-checkbox-col {
  width: 3.2rem;
  text-align: center;
}

.rcr-row-selected {
  background-color: var(--snow);
}

/* -------------------------------------------------------------- merge dialog */
.rcr-merge-dialog {
  max-width: 56rem;
}

.rcr-merge-field {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--cadet-blue-crayola_a20);
}

.rcr-merge-label {
  flex: 0 0 12rem;
  font-weight: var(--fw-700);
  color: var(--gunmetal);
}

.rcr-merge-value {
  color: var(--charcoal);
}

.rcr-merge-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.rcr-merge-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* ------------------------------------------------------------- sign-in page */

/* Centered card shown when there is no session (magic-link request form). */
.rcr-signin-card {
  max-width: 46rem;
  margin: 6rem auto 0;
  background-color: var(--white);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-1);
  padding: 3rem;
}

.rcr-signin-title {
  font-size: var(--fs-5);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
  margin-bottom: 1rem;
}

/* Shown only when a ?invite_token= is pending — explains why they're here. */
.rcr-signin-invite {
  background-color: var(--cultured);
  color: var(--charcoal);
  border-radius: var(--radius-6);
  padding: 1rem 1.4rem;
  margin-bottom: 1.2rem;
  font-size: var(--fs-9);
}

.rcr-signin-explainer {
  color: var(--black-coral);
  font-size: var(--fs-9);
  margin-bottom: 1.6rem;
}

.rcr-signin-form {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.rcr-signin-input {
  flex: 1 1 22rem;
}

.rcr-signin-error {
  background-color: var(--status-error-light);
  color: var(--status-error-text);
  border-radius: var(--radius-6);
  padding: 1rem 1.4rem;
  margin-top: 1.2rem;
  font-size: var(--fs-9);
}

.rcr-signin-success {
  background-color: var(--status-success-light);
  color: var(--status-success-text);
  border-radius: var(--radius-6);
  padding: 1rem 1.4rem;
  margin-top: 1.2rem;
  font-size: var(--fs-9);
}

/* ------------------------------------------------------ account-deletion page
   /recruiting/delete-account/ (DeleteAccountPage.tsx) — the public deletion URL
   published in both store listings. Reuses .rcr-signin-card and the shared
   button classes; only the consequence list and the confirm row are new. */
.rcr-delete-list {
  list-style: disc;
  padding-left: 2.4rem;
  margin-bottom: 1.6rem;
  color: var(--black-coral);
  font-size: var(--fs-9);
}

.rcr-delete-list li {
  margin-bottom: 0.6rem;
}

.rcr-delete-confirm {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 2rem 0 1.6rem;
  color: var(--charcoal);
  font-size: var(--fs-9);
}

.rcr-delete-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ------------------------------------------------------- terms-acceptance gate
   Shown after sign-in, before the dashboard, until the recruiter accepts the
   current GOAT Recruiter Terms (App.tsx loadState === 'needsTerms'). Mirrors
   the sign-in card, sized wider to hold the embedded terms. */
.rcr-terms-card {
  max-width: 68rem;
  margin: 4rem auto 0;
  background-color: var(--white);
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-1);
  padding: 3rem;
}

.rcr-terms-title {
  font-size: var(--fs-5);
  font-weight: var(--fw-700);
  color: var(--gunmetal);
  margin-bottom: 1rem;
}

.rcr-terms-explainer {
  color: var(--black-coral);
  font-size: var(--fs-9);
  margin-bottom: 1.6rem;
}

/* Embedded /terms/recruiter/ — the single source of truth for the text. */
.rcr-terms-frame {
  width: 100%;
  height: 42rem;
  border: 1px solid var(--cadet-blue-crayola_a20);
  border-radius: var(--radius-6);
  background-color: var(--white);
}

.rcr-terms-openlink {
  margin-top: 0.8rem;
  font-size: var(--fs-9);
}

.rcr-terms-openlink a {
  color: var(--cinnamon-satin);
  font-weight: var(--fw-700);
  text-decoration: none;
}

.rcr-terms-openlink a:hover {
  text-decoration: underline;
}

.rcr-terms-agree {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 2rem;
  font-size: var(--fs-9);
  color: var(--charcoal);
  cursor: pointer;
}

.rcr-terms-agree input {
  margin-top: 0.4rem;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 auto;
  cursor: pointer;
}

.rcr-terms-error {
  background-color: var(--status-error-light);
  color: var(--status-error-text);
  border-radius: var(--radius-6);
  padding: 1rem 1.4rem;
  margin-top: 1.2rem;
  font-size: var(--fs-9);
}

/* Small text-style sign-out control next to the header email. */
.rcr-signout-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 1.2rem;
  color: var(--cinnamon-satin);
  font-family: var(--ff-manrope);
  font-size: var(--fs-10);
  font-weight: var(--fw-700);
  cursor: pointer;
}

.rcr-signout-btn:hover {
  text-decoration: underline;
}