/* HMS-358 — hotel financials screens (settlement statement, tiered commission).
   BEM-ish .hotel-financials__* on var(--wa-*) tokens, mirroring the sibling
   layouts/hotel_rooming_list.css. Views wrap tables in .hotel-table-wrap
   (shared, defined elsewhere — intentionally NOT redefined here). */

.hotel-financials {
  padding: 0;
  max-width: 1200px;
  margin: 0;
}

/* Header: title block left, actions right; wraps on narrow screens */
.hotel-financials__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wa-space-s);
  margin-bottom: var(--wa-space-m);
}

.hotel-financials__eyebrow {
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
}

.hotel-financials__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.hotel-financials__meta {
  margin: var(--wa-space-s) 0 0;
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

/* REQUIRED: flex-wrap so action buttons never overflow at 390px */
.hotel-financials__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-s);
}

/* KPI cards: 3-col grid, collapses to 1 col < 640px (see media query below) */
.hotel-financials__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wa-space-m);
  margin-bottom: var(--wa-space-m);
}

.hotel-financials__kpi {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-xs);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
}

.hotel-financials__kpi-label {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

.hotel-financials__kpi-value {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--wa-color-text-normal);
}

/* Info banner between sections: soft neutral bg, icon + text in a flex row */
.hotel-financials__banner {
  display: flex;
  align-items: flex-start;
  gap: var(--wa-space-s);
  background: var(--wa-color-neutral-fill-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  margin: var(--wa-space-m) 0;
  color: var(--wa-color-text-quiet);
}

/* Bordered card: statement breakdown / tiered commission breakdown */
.hotel-financials__card {
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  margin-bottom: var(--wa-space-m);
  overflow: hidden; /* keeps the tinted total row inside the rounded corners */
}

.hotel-financials__card-title {
  padding: var(--wa-space-m);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

/* Statement rows: flex space-between, hairline top border except the first */
.hotel-financials__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wa-space-s);
  padding: var(--wa-space-s) var(--wa-space-m);
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-financials__card-title + .hotel-financials__row,
.hotel-financials__row:first-child {
  border-top: 0;
}

.hotel-financials__row--total {
  font-weight: 600;
  background: var(--wa-color-neutral-fill-quiet);
  border-top: 2px solid var(--wa-color-neutral-border-normal);
}

/* Money directions: credit = money back (success/green), debit = owed out (danger/red) */
.hotel-financials__row--credit .hotel-financials__row-value {
  color: var(--wa-color-success);
}

.hotel-financials__row--debit .hotel-financials__row-value {
  color: var(--wa-color-danger);
}

.hotel-financials__row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--wa-color-text-normal);
}

.hotel-financials__row-value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--wa-color-text-normal);
}

/* Small muted qualifier under a row label (e.g. "informational — not in net due") */
.hotel-financials__row-note {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

/* Muted empty-state paragraph */
.hotel-financials__empty {
  padding: var(--wa-space-m);
  color: var(--wa-color-text-quiet);
}

/* Lets .status-chip sit inline in the header meta line */
.hotel-financials__status {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-s);
  vertical-align: middle;
}

/* Tiered commission table (inside the shared .hotel-table-wrap) */
.hotel-financials table.hotel-financials__table {
  width: 100%;
  border-collapse: collapse;
}

.hotel-financials__table th {
  text-align: left;
  font-size: var(--wa-font-size-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wa-color-text-quiet);
  padding: var(--wa-space-s) var(--wa-space-m);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-financials__table td {
  padding: var(--wa-space-s) var(--wa-space-m);
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  color: var(--wa-color-text-normal);
}

/* Numeric/money cells: right-aligned, tabular figures */
.hotel-financials__table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The reached tier row is highlighted — the band that produced the rate. */
.hotel-financials__table tr.is-active td {
  background: var(--wa-color-brand-90);
  font-weight: var(--wa-font-weight-semibold, 600);
}

/* Mobile: KPIs stack to 1 column, table cells drop padding.
   Statement card rows intentionally keep their two-column split. */
@media (max-width: 640px) {
  .hotel-financials {
    padding: 0;
  }

  .hotel-financials__kpis {
    grid-template-columns: 1fr;
  }

  .hotel-financials__table th,
  .hotel-financials__table td {
    padding-left: var(--wa-space-s);
    padding-right: var(--wa-space-s);
  }
}