/* HMS-58 — the reports & analytics screen. Sections stacked; every chart has
   a printed table beside or beneath it. */

.reports__title {
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
  color: var(--wa-color-text-normal);
}

.reports__section {
  margin-bottom: 2rem;
}

.reports__section-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.reports__manage-link {
  font-size: 0.875rem;
  font-weight: 400;
  /* fill-normal resolves to brand-90 (var(--wa-color-brand-90)): ~1.3:1 on white. */
  color: var(--wa-color-text-link);
  text-decoration: none;
}

.reports__numeric {
  text-align: right;
}

.reports__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

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

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

/* HMS-844 — a key/value summary must not stretch full width: label and value
   columns then sit a page apart. Auto width pulls the value next to its label. */
.reports__table--kv {
  width: auto;
}

.reports__table--kv th {
  white-space: nowrap;
}

/* Generic sortable-column link for plain report tables — same pattern as
   waitlist-board__sort / hotel-access__sort, without a component prefix. */
.table-sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-xs);
}

.table-sort:hover {
  color: var(--wa-color-text-normal);
}

/* Per-table pagination footer (post-event analysis) — count left, page-size
   middle, prev/next right. */
.reports__table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
  flex-wrap: wrap;
  margin-top: var(--wa-space-s);
}

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

.reports__per-page {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
}

.reports__pages {
  display: flex;
  gap: var(--wa-space-m);
  font-size: 0.875rem;
}

.reports__pages .series-nav {
  display: flex;
  gap: 2px;
  align-items: center;
}

.reports__pages .series-nav a {
  min-width: 2rem;
  text-align: center;
  padding: 2px var(--wa-space-xs, 4px);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-size: var(--wa-font-size-s, 0.875rem);
}

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

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

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

.reports__empty {
  margin: 0.5rem 0;
  color: var(--wa-color-text-quiet);
}

/* Pickup progress + trend indicator above the occupancy chart. The triangle
   direction is paired with the words "ahead of"/"behind" so shape alone never
   carries the meaning (WCAG 1.4.1). */
.reports__pickup {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.reports__pickup-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.reports__pickup-trend {
  color: var(--wa-color-text-quiet);
}

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

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