/* HMS-50 — the cutoff board and attrition monitor. Figma 600:22621 / 600:22870.
   Card grid reads soonest-cutoff-first; the urgent tone is reserved for blocks
   inside a week. The chart is wa-line-chart; its accessible alternative is the
   table beneath it. */

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

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

.cutoff-board__cards {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
}

.cutoff-card {
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: 0.875rem 1rem;
  background: var(--wa-color-surface-default);
}

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

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

.cutoff-card__facts {
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

.cutoff-card__fact {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

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

.cutoff-card__value {
  margin: 0;
  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);
}

.attrition-monitor__title {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

.attrition-monitor__chart {
  display: block;
  width: 100%;
  min-height: 18rem;
}

/* The accessible alternative to the chart: same numbers, linear reading order.
   Visually quiet, but never hidden — it renders for everyone. */
.attrition-monitor__table {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.attrition-monitor__table caption {
  text-align: left;
  padding-bottom: 0.375rem;
  color: var(--wa-color-text-quiet);
}

.attrition-monitor__table th,
.attrition-monitor__table td {
  text-align: left;
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.attrition-monitor__table tfoot td,
.attrition-monitor__table tfoot th {
  font-weight: 700;
  border-bottom: none;
}