/* HMS-346 — Hotel Reviews moderation hub (Figma 600:26667 family).
   Shares reports-hub__kpi/table/badge classes. */

.reviews-hub__subtabs {
  display: flex;
  gap: var(--wa-space-l);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  margin-bottom: var(--wa-space-m);
}
.reviews-hub__subtab {
  padding: var(--wa-space-s) var(--wa-space-2xs);
  color: var(--wa-color-text-quiet);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: var(--wa-font-weight-semibold);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.reviews-hub__subtab--active { color: var(--wa-color-text-normal); border-bottom-color: var(--wa-color-brand); }
.reviews-hub__count { font-weight: 400; color: var(--wa-color-text-quiet); margin-left: 2px; }

.reviews-hub__alert {
  display: flex; align-items: center; gap: var(--wa-space-s);
  background: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-s) var(--wa-space-m);
  margin-bottom: var(--wa-space-m);
  font-size: 0.8125rem;
}
.reviews-hub__alert p { margin: 0; flex: 1; }
.reviews-hub__dismiss {
  background: var(--wa-color-danger-fill-loud); color: var(--wa-color-neutral-on-loud); border: 0;
  border-radius: var(--wa-border-radius-s);
  padding: var(--wa-space-2xs) var(--wa-space-s);
  font-size: 0.8125rem; cursor: pointer;
}

.reviews-hub__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.reviews-hub__table th {
  text-align: left; font-size: 0.75rem; color: var(--wa-color-text-quiet);
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}
.reviews-hub__table td {
  padding: var(--wa-space-s); border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  vertical-align: top; color: var(--wa-color-text-normal);
}
.reviews-hub__comment { max-width: 18rem; }
.reviews-hub__row--flagged { background: var(--wa-color-warning-fill-quiet); }

.reviews-hub__rating {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet);
  padding: 2px var(--wa-space-xs); border-radius: var(--wa-border-radius-s);
  font-size: 0.75rem; font-weight: var(--wa-font-weight-semibold);
}
.reviews-hub__flagged {
  display: inline-block; margin-left: var(--wa-space-2xs);
  background: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet);
  padding: 2px var(--wa-space-xs); border-radius: var(--wa-border-radius-s);
  font-size: 0.6875rem; font-weight: var(--wa-font-weight-semibold);
}
.reviews-hub__cats { display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem; color: var(--wa-color-text-quiet); }
.reviews-hub__verified { font-size: 0.75rem; color: var(--wa-color-text-quiet); }

.reviews-hub__actions { display: flex; gap: var(--wa-space-2xs); align-items: center; }
.reviews-hub__actions form { display: inline; }
.reviews-hub__btn {
  border-radius: var(--wa-border-radius-s);
  font-size: 0.8125rem; font-weight: var(--wa-font-weight-semibold);
  padding: var(--wa-space-2xs) var(--wa-space-s); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid transparent;
}
.reviews-hub__btn--approve { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); border-color: var(--wa-color-success-border-normal); }
.reviews-hub__btn--reject { background: transparent; color: var(--wa-color-danger-on-quiet); border-color: var(--wa-color-danger-border-normal); }
.reviews-hub__btn--flag { background: var(--wa-color-danger-fill-loud); color: var(--wa-color-neutral-on-loud); }
.reviews-hub__btn--remove { background: var(--wa-color-danger-fill-loud); color: var(--wa-color-neutral-on-loud); }
.reviews-hub__btn--view { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); border-color: var(--wa-color-brand-border-normal); }

/* wa-button renders its visual button in the shadow root, so the host classes
   above only paint the padding/border around it (navy button in a colored
   frame). For wa-button hosts, strip the host chrome and paint ::part(base). */
wa-button.reviews-hub__btn { padding: 0; border: 0; background: none; }
wa-button.reviews-hub__btn::part(base) {
  border-radius: var(--wa-border-radius-s);
  font-size: 0.8125rem;
  font-weight: var(--wa-font-weight-semibold);
  padding: var(--wa-space-2xs) var(--wa-space-s);
}
wa-button.reviews-hub__btn--reject::part(base) {
  background: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet); border: 1px solid var(--wa-color-danger-border-normal);
}
wa-button.reviews-hub__btn--flag::part(base) { background: var(--wa-color-danger-fill-loud); color: var(--wa-color-neutral-on-loud); }

.reviews-hub__trend {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--wa-space-xs); border-radius: var(--wa-border-radius-s);
  font-size: 0.75rem; font-weight: var(--wa-font-weight-semibold);
}
.reviews-hub__trend--up { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.reviews-hub__trend--down { background: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet); }
.reviews-hub__trend--same { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }

.reviews-hub__rank { font-weight: var(--wa-font-weight-semibold); color: var(--wa-color-text-quiet); width: 2rem; }
.reviews-hub__section-title { margin: 0 0 var(--wa-space-3xs); font-size: 1.125rem; }
.reviews-hub__section-sub { margin: 0 0 var(--wa-space-m); font-size: 0.8125rem; color: var(--wa-color-text-quiet); }
.reviews-hub__filters { display: flex; gap: var(--wa-space-s); margin-bottom: var(--wa-space-m); flex-wrap: wrap; }
.reviews-hub__filters wa-select, .reviews-hub__filters wa-input { min-width: 12rem; }
/* Figma 600:27319 pins the Export dropdown at the right end of the filter row. */
.reviews-hub__export { margin-left: auto; }
.reviews-hub__empty { color: var(--wa-color-text-quiet); padding: var(--wa-space-m) 0; }

/* Flag / Reject dialogs */
.review-dialog__card {
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-s) var(--wa-space-m);
  margin-bottom: var(--wa-space-m);
}
.review-dialog__hotel { margin: 0 0 var(--wa-space-2xs); font-weight: var(--wa-font-weight-semibold); display: flex; gap: var(--wa-space-xs); align-items: center; }
.review-dialog__comment { margin: 0 0 var(--wa-space-2xs); }
.review-dialog__meta { margin: 0; font-size: 0.75rem; color: var(--wa-color-text-quiet); }
.review-dialog__fieldset { border: 0; margin: 0 0 var(--wa-space-m); padding: 0; }
.review-dialog__fieldset legend { font-weight: var(--wa-font-weight-semibold); font-size: 0.875rem; margin-bottom: var(--wa-space-xs); }
.review-dialog__radio, .review-dialog__check { display: flex; gap: var(--wa-space-xs); align-items: center; padding: var(--wa-space-3xs) 0; font-size: 0.875rem; }
.review-dialog__warning {
  display: flex; gap: var(--wa-space-xs); align-items: flex-start;
  background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet);
  border-radius: var(--wa-border-radius-s);
  padding: var(--wa-space-xs) var(--wa-space-s);
  font-size: 0.8125rem; margin-top: var(--wa-space-m);
}
.review-dialog__footer {
  display: flex; justify-content: center; gap: var(--wa-space-s);
  margin-top: var(--wa-space-l); padding-top: var(--wa-space-m);
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}
.review-dialog__reject-submit::part(base) { background: var(--wa-color-danger-fill-loud); color: var(--wa-color-neutral-on-loud); }