/*
 * HMS-342 — Group board split view (600:23393), reparent tool (600:36026),
 * roster dropzone (600:35917), transfer form (600:35982) and group form
 * additions. Design tokens only — no hardcoded colors.
 */

/* ==========================================================
   .group-board — split view
   ========================================================== */

.group-board {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--wa-space-xl);
}

.group-board__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--wa-space-l);
  /* Title + Create button are ~400px of rigid flex content; let the button
     wrap under the title instead of holding the board at 426px on mobile. */
  flex-wrap: wrap;
  gap: var(--wa-space-s);
}

.group-board__title {
  font-size: var(--wa-font-size-2xl);
  font-weight: 700;
  margin: 0;
}

.group-board__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wa-space-l);
  align-items: start;
}

@media (min-width: 1400px) {
  .group-board__split {
    /* 1400, not 1024: the roster table needs ~800px of detail width, so in a
       1024-1399 split the table overflowed its panel and the sticky actions
       column overlapped Status. Below 1400 the list stacks above the detail.
       minmax(0,1fr) still keeps the detail track from flooring at min-content. */
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .group-board__list {
    position: sticky;
    top: var(--wa-space-l);
  }

  .group-board__split {
    gap: var(--wa-space-m);
  }

  .group-board {
    padding: var(--wa-space-l);
  }
}

.group-board__list {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-m);
  min-width: 0;
}

.group-board__list-title {
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
  margin: 0 0 var(--wa-space-s);
}

.group-board__groups {
  list-style: none;
  margin: 0;
  padding: 0;
}

.group-board__group {
  display: flex;
  flex-direction: column;
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-m);
  text-decoration: none;
  color: inherit;
}

.group-board__group:hover {
  background: var(--wa-color-neutral-fill-quiet);
}

.group-board__group--selected {
  background: var(--wa-color-brand-95, var(--wa-color-neutral-fill-quiet));
  border-left: 3px solid var(--wa-color-brand-40, var(--wa-color-brand-60));
}

.group-board__group-name {
  font-weight: 600;
  font-size: var(--wa-font-size-s);
}

.group-board__group-meta {
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-text-quiet);
}

.group-board__group-meta span { white-space: nowrap; }

.group-board__detail {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-l);
  /* Grid items default to min-width:auto — the stat grid and roster header
     would hold this panel at ~600px and push the board off-screen at ≤1024. */
  min-width: 0;
}

.group-board__group-title {
  font-size: var(--wa-font-size-xl);
  margin: 0;
}

.group-board__contact {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  margin-top: var(--wa-space-2xs);
}

.group-board__stats {
  margin: var(--wa-space-l) 0;
}

.group-board__stats .kpi-strip__label {
  white-space: normal;
}

.group-board__section-title {
  font-size: var(--wa-font-size-l);
  font-weight: 600;
}

.group-board__roster-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Title + two action buttons are ~430px of rigid flex content — without a
     wrap they were the widest row on the page and forced the 390px overflow. */
  flex-wrap: wrap;
  gap: var(--wa-space-s);
}

.group-board__roster-actions {
  display: flex;
  gap: var(--wa-space-s);
  flex-wrap: wrap;
}

.group-board__table-wrap {
  overflow-x: auto;
}

.group-board__table {
  width: 100%;
  border-collapse: collapse;
}

.group-board__table th {
  text-align: left;
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
  border-bottom: 1px solid var(--wa-color-surface-border);
  padding: var(--wa-space-xs) var(--wa-space-s);
  white-space: nowrap;
}

.group-board__table td {
  padding: var(--wa-space-xs) var(--wa-space-s);
  font-size: var(--wa-font-size-s);
  border-bottom: 1px solid var(--wa-color-neutral-fill-quiet);
  vertical-align: middle;
}

.group-board__email {
  white-space: nowrap;
}

.group-board__row-actions {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  white-space: nowrap;
}

.group-board__row-actions .button_to {
  margin: 0;
  display: inline-flex;
}

.group-board__row-actions wa-button::part(base) {
  height: 1.75rem;
  min-height: 1.75rem;
  padding-inline: var(--wa-space-xs);
  font-size: var(--wa-font-size-xs);
}

.group-board__delete {
  background: none;
  border: 1px solid var(--wa-color-danger-60);
  color: var(--wa-color-danger-40);
  border-radius: var(--wa-border-radius-m);
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  height: 1.75rem;
  padding: 0 var(--wa-space-xs);
  font: inherit;
  font-size: var(--wa-font-size-xs);
  cursor: pointer;
}

.group-board__delete:hover {
  background: var(--wa-color-danger-95, var(--wa-color-neutral-fill-quiet));
}

/* Quiet row-level affordance for the negotiated-rate editor. The Figma table
   has no actions column, but the editor lost its only entry point when the
   old group detail page was retired — this keeps it reachable without adding
   a button column the design never asked for. */
.group-board__edit-rate {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
}

.group-board__edit-rate:hover {
  color: var(--wa-color-brand-40);
}

.group-board__empty {
  font-style: italic;
  text-align: center;
  color: var(--wa-color-text-quiet);
  padding: var(--wa-space-l);
}

/* ==========================================================
   .reparent-tool
   ========================================================== */

.reparent-tool {
  /* Figma 600:36026 is a centered card holding both panels, not a full-bleed
     page — cap the width and give it the same card chrome as the board. */
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--wa-space-xl);
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
}

.reparent-tool__lede {
  color: var(--wa-color-text-quiet);
}

/* The two selects in each panel sit side-by-side in the design, but only
   when each is wide enough to show "No target sub-blocks available" whole. */
.reparent-tool__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--wa-space-m);
}

.reparent-tool__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wa-space-m);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .reparent-tool__panels {
    grid-template-columns: 1fr auto 1fr;
  }
}

.reparent-tool__panel {
  /* Gray panels inside the white tool card — the Figma inverts this same way
     (white card, gray source/target wells, white impact preview inside). */
  background: var(--wa-color-neutral-fill-quiet);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-l);
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}

.reparent-tool__panel-label {
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
}

.reparent-tool__table {
  width: 100%;
  border-collapse: collapse;
}

.reparent-tool__table th {
  text-align: left;
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
  border-bottom: 1px solid var(--wa-color-surface-border);
  padding: var(--wa-space-xs) var(--wa-space-s);
}

.reparent-tool__table td {
  padding: var(--wa-space-s);
  border-bottom: 1px solid var(--wa-color-neutral-fill-quiet);
  vertical-align: middle;
}

.reparent-tool__arrow {
  align-self: center;
  color: var(--wa-color-brand-60);
  font-size: var(--wa-font-size-xl);
}

@media (max-width: 1023px) {
  .reparent-tool__arrow {
    transform: rotate(90deg);
  }
}

.reparent-tool__impact {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
}

.reparent-tool__impact-title {
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
}

.reparent-tool__impact-line {
  font-weight: 600;
}

.reparent-tool__count {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.reparent-tool__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-s);
  border-top: 1px solid var(--wa-color-surface-border);
  padding-top: var(--wa-space-m);
}

.reparent-tool__cancel {
  background: none;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-2xs) var(--wa-space-m);
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ==========================================================
   .roster-upload
   ========================================================== */

.roster-upload__dropzone {
  position: relative;
  border: 2px dashed var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-2xl);
  text-align: center;
  cursor: pointer;
  background: var(--wa-color-neutral-95, var(--wa-color-neutral-fill-quiet));
}

.roster-upload__dropzone--active {
  border-color: var(--wa-color-brand-60);
  background: var(--wa-color-brand-95, var(--wa-color-neutral-fill-quiet));
}

.roster-upload__file {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.roster-upload__dropzone-icon {
  font-size: var(--wa-font-size-2xl);
  color: var(--wa-color-brand-60);
}

.roster-upload__dropzone-label {
  font-weight: 600;
}

.roster-upload__browse {
  color: var(--wa-color-brand-60);
  text-decoration: underline;
}

.roster-upload__dropzone-hint {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.roster-upload__columns-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--wa-space-m) 0;
}

.roster-upload__columns {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.roster-upload__columns code {
  background: var(--wa-color-neutral-fill-quiet);
  padding: 0 var(--wa-space-2xs);
  border-radius: var(--wa-border-radius-s);
}

.roster-upload__preview {
  margin-top: var(--wa-space-l);
}

.roster-upload__preview-title {
  font-size: var(--wa-font-size-m);
  font-weight: 600;
}

.roster-upload__table-wrap {
  overflow-x: auto;
}

.roster-upload__table {
  width: 100%;
  border-collapse: collapse;
}

.roster-upload__table th {
  text-align: left;
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
  border-bottom: 1px solid var(--wa-color-surface-border);
  padding: var(--wa-space-xs) var(--wa-space-s);
}

.roster-upload__table td {
  padding: var(--wa-space-s);
  border-bottom: 1px solid var(--wa-color-neutral-fill-quiet);
  vertical-align: middle;
}

.roster-upload__detection {
  background: var(--wa-color-brand-95, var(--wa-color-neutral-fill-quiet));
  border-left: 3px solid var(--wa-color-brand-60);
  border-radius: var(--wa-border-radius-s);
  padding: var(--wa-space-s) var(--wa-space-m);
  margin: var(--wa-space-m) 0;
}

.roster-upload__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-s);
}

.roster-upload__cancel {
  background: none;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-2xs) var(--wa-space-m);
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ==========================================================
   .transfer-form additions
   ========================================================== */

.transfer-form__context {
  font-weight: 600;
  margin-bottom: var(--wa-space-m);
}

.transfer-form__current {
  background: var(--wa-color-neutral-fill-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-s) var(--wa-space-m);
  color: var(--wa-color-text-normal);
}

.transfer-form__grid {
  display: grid;
  /* 180px floor gets the design's three-across field rows inside the 44rem
     card; 220px only ever produced two columns. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--wa-space-m);
  margin: var(--wa-space-m) 0;
}

.transfer-form__warning {
  display: flex;
  align-items: flex-start;
  gap: var(--wa-space-s);
  background: var(--wa-color-warning-95, var(--wa-color-neutral-fill-quiet));
  border-left: 3px solid var(--wa-color-warning-60);
  border-radius: var(--wa-border-radius-s);
  padding: var(--wa-space-s) var(--wa-space-m);
}

.transfer-form__warning i {
  margin-top: 0.2em;
}

.transfer-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-s);
  margin-top: var(--wa-space-l);
}

.transfer-form__cancel {
  background: none;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-2xs) var(--wa-space-m);
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ==========================================================
   .group-form additions
   ========================================================== */

.group-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--wa-space-m);
  margin-bottom: var(--wa-space-m);
}

/* The design's main field grid runs three across and the Initial Sub-Block
   row four across — auto-fit inside the old 44rem form only ever made two. */
@media (min-width: 1024px) {
  .group-form__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .group-form__grid--sub-block {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.group-form__section-title {
  font-size: var(--wa-font-size-m);
  font-weight: 600;
  margin-bottom: var(--wa-space-2xs);
}

.group-form__section-note {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  margin-top: 0;
}

.group-form__sub-block {
  border-top: 1px solid var(--wa-color-surface-border);
  padding-top: var(--wa-space-m);
  margin-top: var(--wa-space-m);
}

.group-form__lede {
  color: var(--wa-color-text-quiet);
  margin-top: var(--wa-space-2xs);
}

.group-form__cancel {
  background: none;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-2xs) var(--wa-space-m);
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.group-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-s);
  border-top: 1px solid var(--wa-color-surface-border);
  padding-top: var(--wa-space-m);
  margin-top: var(--wa-space-l);
}

/* ==========================================================
   .sub-block-form — negotiated rate editor (no Figma)
   ========================================================== */

.sub-block-form {
  max-width: 44rem;
}

.sub-block-form__hotel {
  color: var(--wa-color-text-quiet);
  margin-top: var(--wa-space-2xs);
}

/* Matches the bordered cancel links on the other group screens — the page
   previously shipped a bare `class="button"` that no stylesheet defines. */
.sub-block-form__cancel {
  background: none;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-2xs) var(--wa-space-m);
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* HMS-601 — Figma roster: gray header band, icon sort links, status pills,
   and a Show-N / count / numbered-pages footer (reports-hub pattern). */
.group-board__table--roster thead th {
  background: var(--wa-color-neutral-fill-quiet);
}

/* HMS-838 — pin the actions column so Move/Delete stay visible instead of
   scrolling off when the roster is wider than its panel. Safety net: harmless
   when the table fits, since nothing sits behind the pinned cell. */
.group-board__table--roster th:last-child,
.group-board__table--roster td:last-child {
  position: sticky;
  right: 0;
  background: var(--wa-color-surface-default);
  box-shadow: -1px 0 0 var(--wa-color-surface-border);
}
.group-board__table--roster thead th:last-child {
  background: var(--wa-color-neutral-fill-quiet);
}

.group-board__table--roster th {
  font-size: var(--wa-font-size-s);
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.group-board__table--roster th,
.group-board__table--roster .group-board__th {
  text-transform: none;
  letter-spacing: normal;
}

.group-board__table--roster td {
  white-space: nowrap;
}

.group-board__table--roster th,
.group-board__table--roster td {
  padding-inline: var(--wa-space-xs);
}

.group-board__th {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.group-board__th:hover { color: var(--wa-color-text-normal); }
.group-board__th-sort { font-size: 0.75em; }

.group-board__status {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  padding: 0.125rem var(--wa-space-xs);
  border-radius: 999px;
  font-size: var(--wa-font-size-xs);
  font-weight: 500;
  white-space: nowrap;
}

.group-board__status--waitlist  { background: var(--wa-color-brand-fill-quiet);   color: var(--wa-color-brand-on-quiet); }
.group-board__status--pending   { background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
.group-board__status--confirmed { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }

.group-board__roster-footer {
  display: flex;
  align-items: center;
  gap: var(--wa-space-m);
  flex-wrap: wrap;
  margin-top: var(--wa-space-m);
}

.group-board__per-page { display: flex; align-items: center; gap: var(--wa-space-xs); font-size: 0.8125rem; }
.group-board__count { margin: 0; font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.group-board__pages { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; }
.group-board__pages a {
  padding: 0.25rem 0.5rem;
  border-radius: var(--wa-border-radius-s);
  color: var(--wa-color-neutral-on-quiet);
  text-decoration: none;
}
.group-board__pages a[aria-current="page"] { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
.group-board__pages a[href]:hover { background: var(--wa-color-surface-lowered); }

/* Wide split: placed after the base .group-board__list / __detail rules so
   these overrides win the cascade. */
@media (min-width: 1400px) {
  .group-board__list { padding: var(--wa-space-s); }
  .group-board__detail { padding: var(--wa-space-m); }
}