/* HMS-340 — the cutoff board. Figma 600:22621.
   The attrition monitor moved to its own screen (layouts/attrition_monitor.css).
   Cards read soonest-cutoff-first; the urgent tone is reserved for blocks inside
   a week. Dialog content (release / extend) is class-scoped below. */

/* --- page header ---------------------------------------------------------- */

.cutoff-board__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.cutoff-board__breadcrumb a {
  color: var(--wa-color-text-quiet);
  text-decoration: none;
}

.cutoff-board__breadcrumb a:hover {
  text-decoration: underline;
}

/* The current segment is plain text, not a link — normal weight, no underline. */
.cutoff-board__breadcrumb [aria-current] {
  font-weight: 400;
  color: var(--wa-color-text-normal);
}

.cutoff-board__title {
  margin: 0 0 0.25rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.cutoff-board__subtitle {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.cutoff-board__empty {
  margin: 2rem 0;
  color: var(--wa-color-text-quiet);
}

/* --- card grid ------------------------------------------------------------- */

/* Strict two columns at desktop width; collapses to one under ~900px. */
.cutoff-board__cards {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .cutoff-board__cards {
    grid-template-columns: 1fr;
  }
}

/* --- card ------------------------------------------------------------------ */

.cutoff-card {
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: 1.25rem;
  background: var(--wa-color-surface-default);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cutoff-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cutoff-card__hotel {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.cutoff-card__room-type {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* Three facts in a row, each stacking its label over its value. A top border
   separates the facts from the header. */
.cutoff-card__facts {
  margin: 0.875rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.cutoff-card__fact {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cutoff-card__label {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.cutoff-card__value {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* Inside seven days of cutoff: the one urgent tone on the card. */
.cutoff-card__value--urgent {
  color: var(--wa-color-danger-fill-loud);
}

/* --- card actions ---------------------------------------------------------- */

.cutoff-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* approve is the default (primary) wa-button — only sizing/layout is needed. */
.cutoff-card__approve {
  flex: 0 0 auto;
}

/* hold — neutral / outlined appearance. */
.cutoff-card__hold::part(base) {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-normal);
  color: var(--wa-color-text-normal);
}

/* extend — outlined appearance. */
.cutoff-card__extend::part(base) {
  background: transparent;
  border: 1px solid var(--wa-color-neutral-border-normal);
  color: var(--wa-color-text-normal);
}

/* --- release dialog -------------------------------------------------------- */

.release-dialog__warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
  font-size: 0.875rem;
}

.release-dialog__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.release-dialog__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}

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

.release-dialog__value {
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.release-dialog__impact {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.release-dialog__impact-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.release-dialog__impact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.375rem 0;
}

/* A predicted-state label inside the modal only — a plain pill span, not the
   global status-chip. */
.release-dialog__released {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
  font-size: 0.75rem;
  font-weight: 600;
}

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

/* --- extend dialog --------------------------------------------------------- */

.extend-dialog__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.extend-dialog__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}

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

.extend-dialog__value {
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.extend-dialog__section {
  margin-top: 1rem;
}

.extend-dialog__section-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.extend-dialog__info {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-size: 0.875rem;
}

.extend-dialog__reminders {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

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

/* Soft width cap — only applies if wa-dialog honors --width; harmless if not. */
.release-dialog,
.extend-dialog {
  --width: 35rem;
}