/*
 * 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__breadcrumb {
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
}

.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: 1024px) {
  .group-board__split {
    /* minmax(0,1fr): a bare 1fr track floors at the detail panel's min-content
       (~600px of stat grid), so at 1024 the board outgrew the viewport and the
       right edge — including the Create Group button — was clipped with no
       scroll. The 0 minimum lets the detail column actually shrink. */
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .group-board__list {
    position: sticky;
    top: 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-s) var(--wa-space-m);
  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;
}

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

.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 {
  display: grid;
  /* 140px floor, not 160: the Figma shows all four stat cards in one row and
     at the 1440 content width (~650px here) 160px columns only fit three,
     leaving Net Liability orphaned on a second line. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--wa-space-m);
  margin: var(--wa-space-l) 0;
}

.group-board__stat {
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
}

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

.group-board__stat-label {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  margin: 0;
}

.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);
}

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

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

.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);
  padding: var(--wa-space-2xs) var(--wa-space-s);
  font: inherit;
  font-size: var(--wa-font-size-s);
  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__breadcrumb,
.reparent-tool__lede {
  color: var(--wa-color-text-quiet);
}

/* The two selects in each panel sit side-by-side in the design. */
.reparent-tool__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 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, 1fr);
  }

  .group-form__grid--sub-block {
    grid-template-columns: repeat(4, 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;
}