/* block-list — Block Management page layout and table */

.block-list__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wa-space-xs);
  padding-bottom: var(--wa-space-l);
}

.block-list__breadcrumb,
.block-detail__breadcrumb {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.block-list__breadcrumb i,
.block-detail__breadcrumb i {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.block-list__breadcrumb [aria-current="page"],
.block-detail__breadcrumb [aria-current="page"] {
  color: var(--wa-color-text-normal);
}

.block-list__event {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.block-list__title,
.block-detail__title {
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  font-size: var(--wa-font-size-2xl);
}

.block-detail__subtitle {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  margin: var(--wa-space-2xs) 0 0;
}

.block-list__title, .block-detail__title { margin: 0; }

.block-list__event { margin: 0; }

.block-list__table-wrap {
  overflow-x: auto;
}

.block-list__table {
  width: 100%;
  border-collapse: collapse;
}

.block-list__table th,
.block-list__table td {
  text-align: left;
  padding: var(--wa-space-s);
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.block-list__hotel {
  font-weight: 600;
}

.block-list__actions {
  white-space: nowrap;
}

.block-list__actions wa-button + wa-button {
  margin-left: var(--wa-space-xs);
}

/* When the table overflows its wrap at narrow widths the Actions column pins
   to the right edge instead of scrolling out of view — a row's Edit/View must
   stay reachable. The background matches .admin-shell__main (the table sits
   directly on it) so scrolled cells slide under invisibly. */
.block-list__table th:last-child,
.block-list__table td:last-child {
  position: sticky;
  right: 0;
  background: var(--wa-color-surface-lowered);
  box-shadow: -1px 0 0 var(--wa-color-surface-border);
}

.block-list__empty {
  text-align: center;
  padding: var(--wa-space-xl) var(--wa-space-l);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-lowered);
}

/* Status chips — pastel bg + saturated same-hue text + small icon. */
.block-list__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  border-radius: var(--wa-border-radius-l);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
}

.block-list__chip--success {
  background: var(--wa-color-success-90);
  color: var(--wa-color-success);
}

.block-list__chip--warning {
  background: var(--wa-color-warning-90);
  color: var(--wa-color-warning);
}

.block-list__chip--danger {
  background: var(--wa-color-danger-90);
  color: var(--wa-color-danger);
}

.block-list__chip--neutral {
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-text-normal);
}

/* Sort links — an <a> inside <th>. */
.block-list__sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  gap: var(--wa-space-2xs);
  align-items: center;
}

.block-list__sort:hover {
  color: var(--wa-color-brand);
}

.block-list__table th i {
  color: var(--wa-color-text-quiet);
}

.block-list__sort:hover i {
  color: var(--wa-color-brand);
}

.block-list__sort.is-active {
  color: var(--wa-color-brand);
}

/* Footer — per-page select, centred count, pager. */
.block-list__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);
}

.block-list__per-page {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
}

.block-list__per-page wa-select {
  min-width: 4.5rem;
}

.block-list__count {
  margin-inline: auto;
}

.block-list__pages,
.block-list__pages .series-nav {
  display: flex;
  gap: var(--wa-space-2xs, 2px);
  align-items: center;
}

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

.block-list__pages .series-nav a[href]:hover {
  background: var(--wa-color-surface-lowered);
}

.block-list__pages .series-nav a[aria-current="page"] {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.block-list__pages .series-nav a[aria-disabled]:not([aria-current="page"]) {
  opacity: 0.4;
  cursor: default;
}

/* Dialogs — both are wa-dialog hosts; style the inner classes rather than
   ::part(body) so the content flows with normal document spacing. */

.block-edit-dialog__heading {
  font-size: var(--wa-font-size-m);
  font-weight: 600;
  margin: var(--wa-space-m) 0 var(--wa-space-s);
}

.block-edit-dialog__rows > div,
.block-release-dialog__rows > div,
.block-detail__grid > div {
  display: flex;
  justify-content: space-between;
  padding: var(--wa-space-2xs) 0;
}

.block-edit-dialog__rows dt,
.block-release-dialog__rows dt,
.block-detail__grid dt {
  color: var(--wa-color-text-quiet);
}

.block-edit-dialog__rows dd,
.block-release-dialog__rows dd,
.block-detail__grid dd {
  color: var(--wa-color-text-normal);
  margin: 0;
}

.block-edit-dialog__qty {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.block-edit-dialog__qty-field {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-xs);
}

.block-edit-dialog__qty-field wa-input {
  width: 6rem;
}

/* The qty input is required but label-less (aria-label only) — Web Awesome
   still renders the required asterisk in the empty label slot, which floats
   as a stray "*" above the field. The label part is empty here, so hiding it
   removes only the asterisk. */
.block-edit-dialog__qty-field wa-input::part(form-control-label) {
  display: none;
}

.block-edit-dialog__note {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.block-edit-dialog__note-callout {
  margin-top: var(--wa-space-m);
}

/* Two classes deep so it beats `.block-release-dialog__rows dd` above —
   Figma 600:18841 shows the releasable count in red. */
.block-release-dialog__rows dd.block-release-dialog__available {
  color: var(--wa-color-danger);
  font-weight: 600;
}

.block-edit-dialog__actions,
.block-release-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-s);
  margin-top: var(--wa-space-m);
}

.block-release-dialog__warning {
  margin-bottom: var(--wa-space-m);
}

/* Show page — block detail. */
.block-detail__table {
  width: 100%;
  border-collapse: collapse;
}

.block-detail__table th,
.block-detail__table td {
  text-align: left;
  padding: var(--wa-space-s);
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.block-detail__table-wrap {
  overflow-x: auto;
}

.block-detail__empty {
  color: var(--wa-color-text-quiet);
}

.block-detail__status-row {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  flex-wrap: wrap;
  margin-top: var(--wa-space-xs);
}

.block-detail__actions {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  flex-wrap: wrap;
}

/* Same box-escape fix as .block-list__actions — button_to's form must not
   generate a block box inside the actions row. */
.block-detail__actions .button_to {
  display: contents;
}

/* button_to can't take wa-button markup — mimic appearance="outlined"
   size="small" so the lifecycle controls sit visually with their neighbors. */
.block-detail__transition {
  appearance: none;
  background: var(--wa-color-surface-raised, transparent);
  border: 1px solid var(--wa-color-surface-border);
  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);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-normal);
  cursor: pointer;
}

.block-detail__transition:hover {
  background: var(--wa-color-surface-lowered);
}