/* Figma 600:21612 — Inventory Matrix */

.inventory-matrix__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--wa-space-l);
}

.inventory-matrix__breadcrumb {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  margin: 0;
}

.inventory-matrix__title {
  font-size: var(--wa-font-size-2xl);
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  margin: var(--wa-space-2xs) 0;
}

.inventory-matrix__event {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  margin: 0;
}

/* Filters — wrapping row, controls aligned to baseline */
.inventory-matrix__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--wa-space-s);
  margin-bottom: var(--wa-space-l);
}

/* Legend — horizontal list of swatches */
.inventory-matrix__legend {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wa-space-m) 0;
  gap: var(--wa-space-m);
  font-size: var(--wa-font-size-s);
}

.inventory-matrix__swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: var(--wa-space-2xs);
}

/* Band colours — the -90 step is the pastel end of the scale */
/* Legend dots are the saturated mid-tones; cells are pastel tints. */
.inventory-matrix__swatch--available { background: var(--wa-color-success); }
.inventory-matrix__swatch--low { background: var(--wa-color-warning); }
.inventory-matrix__swatch--sold-out { background: var(--wa-color-danger); }

.inventory-matrix__cell--available { background: var(--wa-color-success-90); }
.inventory-matrix__cell--low { background: var(--wa-color-warning-90); }
.inventory-matrix__cell--sold-out { background: var(--wa-color-danger-90); }

.inventory-matrix__cell--available,
.inventory-matrix__cell--low,
.inventory-matrix__cell--sold-out { color: var(--wa-color-text-normal); }

/* Date-cell adjust pencil — right edge of the cell. Extra inline-end padding on
   the cell keeps a long number from sliding under the icon, and the link's own
   padding keeps the click target from shrinking to glyph size. The selector is
   deliberately two classes deep: `.inventory-matrix__table td` above sets a
   padding shorthand that would otherwise win on specificity. */
.inventory-matrix__table td.inventory-matrix__cell {
  position: relative;
  padding-inline-end: 1.75rem;
}
.inventory-matrix__adjust {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--wa-space-2xs);
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  text-decoration: none;
}
.inventory-matrix__adjust:hover { color: var(--wa-color-text-normal); }

.inventory-matrix__cell--none,
.inventory-matrix__cell--absent { color: var(--wa-color-text-quiet); }

/* Table wrapper — horizontal scroll on narrow viewports */
.inventory-matrix__table-wrap {
  overflow-x: auto;
}

.inventory-matrix__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wa-font-size-s);
}

/* Figma 600:21612 left-aligns the whole grid: icon+label headers, names, and
   the booked/contracted numbers each sit at the left of their cell. */
.inventory-matrix__table th,
.inventory-matrix__table td {
  text-align: left;
  padding: var(--wa-space-xs);
  border: 1px solid var(--wa-color-surface-border);
}

/* Name columns truncate like the design ("Marriott Downt…") rather than wrap. */
.inventory-matrix__name {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}

/* Hotel name is the row's lead — semibold in the design. */
.inventory-matrix__hotel {
  font-weight: var(--wa-font-weight-heading);
}

/* Total column — bold, never coloured */
.inventory-matrix__total {
  font-weight: var(--wa-font-weight-heading);
}

/* Empty state — centred bordered panel */
.inventory-matrix__empty {
  text-align: center;
  padding: var(--wa-space-xl);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-l);
  background: var(--wa-color-surface-lowered);
}

.inventory-matrix__empty-title {
  font-size: var(--wa-font-size-m);
  margin: 0 0 var(--wa-space-xs) 0;
}

.inventory-matrix__empty-hint {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
  margin: 0;
}

/* Footer — per-page select, "X–Y of Z", numbered pager (Figma 600:21612) */
.inventory-matrix__footer {
  display: flex;
  align-items: center;
  gap: var(--wa-space-m);
  margin-top: var(--wa-space-m);
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}
.inventory-matrix__per-page {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
}
.inventory-matrix__per-page wa-select { min-width: 4.5rem; }
.inventory-matrix__count { margin-inline: auto; }
.inventory-matrix__pages, .inventory-matrix__pages .series-nav {
  display: flex; gap: var(--wa-space-2xs, 2px); align-items: center;
}
.inventory-matrix__pages .series-nav a { min-width: 2rem; text-align: center;
  padding: var(--wa-space-2xs, 2px) var(--wa-space-xs);
  border-radius: var(--wa-border-radius-m); color: var(--wa-color-text-normal);
  text-decoration: none; font-size: var(--wa-font-size-s); }
.inventory-matrix__pages .series-nav a[href]:hover {
  background: var(--wa-color-surface-lowered); }
.inventory-matrix__pages .series-nav a[aria-current="page"] {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud); }
.inventory-matrix__pages .series-nav a[aria-disabled]:not([aria-current="page"]) {
  opacity: 0.4; cursor: default; }