/* Waitlist board (layouts/waitlist_board.css)
 *
 * Mirrors the structure of layouts/attrition_monitor.css: page padding,
 * title, stat grid, card radius, table chrome, footer flex row.
 * Design tokens only — no hex literals.
 */

.waitlist-board {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
}

.waitlist-board__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.waitlist-board__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* Stat grid: 1 column < 640px, 2 columns 640–1023px, 4 columns ≥ 1024px. */
.waitlist-board__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .waitlist-board__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .waitlist-board__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.waitlist-board__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-l, 12px);
}

.waitlist-board__stat-label {
  display: block;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.waitlist-board__stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wa-color-text-normal);
}

.waitlist-board__stat-sub {
  display: block;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.waitlist-board__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--wa-border-radius-m, 8px);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-text-quiet);
}

.waitlist-board__job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-l, 12px);
}

.waitlist-board__job-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.waitlist-board__job-sub {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.waitlist-board__tabs {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.waitlist-board__tab {
  padding: 0.5rem 0.25rem;
  margin-bottom: -1px;
  font-size: 0.9375rem;
  color: var(--wa-color-text-quiet);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.waitlist-board__tab--active {
  color: var(--wa-color-text-normal);
  border-bottom-color: var(--wa-color-brand);
}

.waitlist-board__tab-count {
  margin-left: 0.25rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* admin-table-wrap convention: rounded card, border, horizontal scroll. */
.waitlist-board__table-wrap {
  overflow-x: auto;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-l, 12px);
}

.waitlist-board__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.waitlist-board__table th {
  padding: 0.75rem 0.625rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.waitlist-board__table td {
  padding: 0.875rem 0.625rem;
  color: var(--wa-color-text-normal);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.waitlist-board__table tbody tr:last-child td {
  border-bottom: none;
}

/* Numeric-ish first column (position) is centered. */
.waitlist-board__table th:first-child,
.waitlist-board__table td:first-child {
  text-align: center;
}

.waitlist-board__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.waitlist-board__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Offer/Waiting chips stay on one line (Figma 600:23089); the wrap
   container scrolls horizontally on narrow viewports. */
.waitlist-board__table .status-chip {
  white-space: nowrap;
}

.waitlist-board__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.waitlist-board__footer form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.waitlist-board__count {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

/* Pagy nav inside .waitlist-board__pages inherits the app's default
   pagination chrome. */
.waitlist-board__pages {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.waitlist-board__empty {
  padding: 2rem;
  text-align: center;
  color: var(--wa-color-text-quiet);
}

/* ------------------------------------------------------------------ */
/* Extend / Convert offer dialogs (Figma 600:18740 / 600:19088)        */
/* ------------------------------------------------------------------ */

.extend-dialog__facts,
.convert-dialog__facts {
  margin: 0;
}

.extend-dialog__fact,
.convert-dialog__fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.extend-dialog__fact dt,
.convert-dialog__fact dt {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.extend-dialog__fact dd,
.convert-dialog__fact dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: var(--wa-color-text-normal);
}

.extend-dialog__group-label {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.extend-dialog__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.extend-dialog__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 400;
  color: var(--wa-color-text-normal);
}

.extend-dialog__preview {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.extend-dialog__info {
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--wa-color-brand-on-quiet);
  background: var(--wa-color-brand-fill-quiet);
  border-left: 4px solid var(--wa-color-brand);
  border-radius: var(--wa-border-radius-s, 6px);
}

.extend-dialog__footer,
.convert-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.convert-dialog__sub {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.convert-dialog__section {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.convert-dialog__summary {
  padding: 0.75rem;
  background: var(--wa-color-neutral-fill-quiet);
  border-radius: var(--wa-border-radius-m, 8px);
}

.convert-dialog__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.convert-dialog__summary-row dt {
  color: var(--wa-color-text-quiet);
}

.convert-dialog__summary-row dd {
  margin: 0;
  font-weight: 400;
}

.extend-dialog__form > * + *,
.convert-dialog__form > * + * {
  margin-top: 0.875rem;
}