/* HMS-60 — hotel partner portal. Own layout, quiet palette, the same token
   conventions as every other screen. */

/* HMS-354 — hotel partner sign-in (Figma 442:5914): split-screen, form panel
   left, photograph right. The hero layers the photo in `overlay` blend over a
   brand gradient then tints it, matching the staff sign-in adaptation. */

.hotel-sign-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: 100dvh;
}

.hotel-sign-in__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding: 4rem;
  background: var(--wa-color-surface-lowered);
}

.hotel-sign-in__logo {
  width: 220px;
  height: 55px;
  object-fit: contain;
}

/* HMS-424 — the gate carries the event's own logo + name when a link spells
   out the context; the event name also shows on its own when the event has
   no logo to render. */
.hotel-sign-in__event-brand {
  display: flex;
  align-items: center;
  /* The logo keeps its intrinsic width, so a long event name beside it would
     be squeezed into a word-per-line column. Let the row wrap: the name drops
     to a full-width line under the logo instead. */
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
}

.hotel-sign-in__event-logo {
  max-height: 48px;
  max-width: 100%;
  width: auto;
}

.hotel-sign-in__event-name {
  font-weight: 600;
  font-size: 1.1rem;
}

.hotel-sign-in__for-event {
  margin: 0;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__intro {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.hotel-sign-in__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wa-color-text-normal);
}

.hotel-sign-in__subtitle {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__sso-block {
  max-width: 26rem;
}

.hotel-sign-in__sso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  text-decoration: none;
  font-weight: 600;
}

.hotel-sign-in__sso:hover {
  background: var(--wa-color-surface-lowered);
}

.hotel-sign-in__sso-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  max-width: 26rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__divider::before,
.hotel-sign-in__divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-sign-in__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 26rem;
}

/* HMS-633 — sign-in errors sit inside the form; the form's gap spaces them. */
.hotel-sign-in__form .hotel-flash {
  margin: 0;
}

.hotel-sign-in__submit {
  width: 100%;
}

.hotel-sign-in__forgot {
  align-self: flex-start;
  font-size: 0.8125rem;
  color: var(--wa-color-text-link);
}

.hotel-sign-in__muted {
  margin: 0;
  max-width: 26rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__legal {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--wa-color-text-quiet);
}

.hotel-sign-in__legal-brand {
  color: var(--wa-color-text-link);
}

.hotel-sign-in__hero {
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(
    circle at 50% 120%,
    var(--wa-color-brand-60),
    var(--wa-color-brand-40)
  );
}

.hotel-sign-in__hero::before,
.hotel-sign-in__hero::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hotel-sign-in__hero::before {
  /* ../ is load-bearing: Propshaft resolves url() relative to THIS file's
     directory, so a bare "sign-in-hero.png" is looked up as
     layouts/sign-in-hero.png, unrewritten, and 404s. */
  background-image: url("/assets/sign-in-hero-301c04e0.png");
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
}

.hotel-sign-in__hero::after {
  background: var(--ek-color-sign-in-tint);
}

/* The photograph is decoration: below the fold it costs bandwidth, so the
   panel takes the whole screen. */
@media (max-width: 40rem) {
  .hotel-sign-in {
    grid-template-columns: 1fr;
  }

  .hotel-sign-in__hero {
    display: none;
  }

  .hotel-sign-in__panel {
    padding: 2rem 1.5rem;
  }
}

/* Dashboard */

.hotel-dashboard__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

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

.hotel-dashboard__subtitle {
  margin: 0.125rem 0 0;
  color: var(--wa-color-text-quiet);
}

.hotel-dashboard__section {
  margin-bottom: 2rem;
}

.hotel-dashboard__section-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

/* One connected white strip: the section owns the border and radius, and the
   KPIs inside share hairline dividers instead of their own card chrome. */
.hotel-dashboard__kpis {
  display: flex;
  background: var(--wa-color-neutral-fill-quiet, #fff);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  overflow: hidden;
}

.hotel-dashboard__kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
}

.hotel-dashboard__kpi + .hotel-dashboard__kpi {
  border-left: 1px solid var(--wa-color-neutral-border-quiet);
}

/* On a phone the strip stacks and the dividers run horizontal. */
@media (max-width: 40rem) {
  .hotel-dashboard__kpis {
    flex-direction: column;
  }

  .hotel-dashboard__kpi + .hotel-dashboard__kpi {
    border-left: 0;
    border-top: 1px solid var(--wa-color-neutral-border-quiet);
  }
}

.hotel-dashboard__kpi-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
  margin: 0;
}

.hotel-dashboard__kpi-value {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.25rem 0 0;
}

.hotel-dashboard__kpi-sub {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
  margin: 0.25rem 0 0;
}

/* Outlined rounded box around the icon, pinned to the card's bottom-right
   corner: column direction + align-self flex-end, with margin-top auto
   pushing it to the true bottom when sibling cards make this one taller. */
.hotel-dashboard__kpi-icon {
  width: 36px;
  height: 36px;
  font-size: 1rem;
  display: grid;
  place-items: center;
  align-self: flex-end;
  margin-top: auto;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-neutral-fill-quiet, #fff);
  color: var(--wa-color-brand-on-quiet);
}

/* Quick Actions: a white card row — title left, buttons right. The buttons
   themselves are unchanged: <a> and <button> share the look, and the Confirm
   Receipt control is a real submit button wrapped in a small form, so the
   form stays inline. */
.hotel-dashboard__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
  flex-wrap: wrap;
  background: var(--wa-color-neutral-fill-quiet, #fff);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  margin-bottom: 1.5rem;
}

.hotel-dashboard__actions-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.hotel-dashboard__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.hotel-dashboard__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

/* HMS-651 — the settlement-PDF action stays visible but disabled until a
   settlement exists, matching Figma's fixed five-button row. */
.hotel-dashboard__action--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.hotel-dashboard__action:hover {
  background: var(--wa-color-surface-lowered);
}

/* display:contents makes the wrapped submit button itself a flex item of
   .hotel-dashboard__quick-actions, so it stretches and wraps identically to
   the sibling <a> controls. */
.hotel-dashboard__action-form {
  display: contents;
}

/* Web Awesome's native-button layer (public/webawesome/styles/native.css)
   pins every <button> to height: var(--wa-form-control-height); an explicit
   height beats flex stretch, which left this submit shorter than the
   sibling anchors. height:auto restores the stretch. */
form.hotel-dashboard__action-form > button.hotel-dashboard__action {
  height: auto;
}

/* Footer under the recent-activity table: per-page picker on the left,
   pagination on the right. */
.hotel-dashboard__recent-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

/* display:contents makes the GET form's <label> the flex item of the footer. */
.hotel-dashboard__pager-size {
  display: contents;
}

.hotel-dashboard__per-page {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-xs);
  white-space: nowrap;
  color: var(--wa-color-text-quiet);
  font-size: 0.75rem;
  margin: 0;
}

.hotel-dashboard__per-page select {
  width: auto;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-s, 6px);
  padding: 2px 6px;
  font-size: inherit;
  color: var(--wa-color-text-normal);
  background: transparent;
}

.hotel-dashboard__pager-status {
  margin: 0;
  font-size: var(--wa-font-size-s, 0.75rem);
  color: var(--wa-color-text-quiet);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sort links in the recent-activity header: inline next to the column label;
   the icon carries the state — muted when neutral (fa-sort), louder for the
   active direction (fa-sort-up / fa-sort-down). */
.hotel-dashboard__recent th .hotel-dashboard__sort {
  display: inline;
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

.hotel-dashboard__recent th .hotel-dashboard__sort .fa-sort {
  color: var(--wa-color-text-quiet);
}

.hotel-dashboard__recent th .hotel-dashboard__sort .fa-sort-up,
.hotel-dashboard__recent th .hotel-dashboard__sort .fa-sort-down {
  color: var(--wa-color-brand-fill-loud);
}

/* Small text link in a recent row, styled like a table action. */
.hotel-dashboard__dispute-link {
  color: var(--wa-color-text-link);
  font-size: 0.8125rem;
}

.hotel-dashboard__table,
.hotel-rooming__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* The dashboard tables carry 5+ columns plus an inline dispute form; on a
   phone they outgrow the section and the overflow renders under the next
   section, where it cannot be tapped. Scroll inside the wrap instead —
   same contract as .admin-table-wrap. */
.hotel-table-wrap {
  overflow-x: auto;
  width: 100%;
  /* Same right-edge scroll hint as .admin-table-wrap: painted beneath the
     table, so it never covers or blocks tappable content. */
  box-shadow: inset -10px 0 10px -10px var(--wa-color-neutral-border-quiet);
}

.hotel-table-wrap table {
  min-width: max-content;
}

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

.hotel-rooming__event {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  color: var(--wa-color-text-normal);
}

.hotel-rooming__empty {
  color: var(--wa-color-text-quiet);
}

.hotel-rooming__meta {
  color: var(--wa-color-text-quiet);
  text-align: left;
}

.hotel-rooming__confirm {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Rooming filter — a compact inline field row instead of stacked full-width
   inputs. */
.hotel-rooming__filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

/* native.css gives labels wrapping inputs width:100% and inputs a 0.5em
   top margin — two-class specificity is required to beat it. */
.hotel-rooming__filter .hotel-rooming__filter-field {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  width: auto;
}

.hotel-rooming__filter .hotel-rooming__filter-field input {
  margin-block-start: 0;
}

.hotel-rooming__filter-field input,
.hotel-rooming__filter-field select {
  min-width: 9rem;
}

.hotel-rooming__filter-submit {
  margin-top: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* VIP verifications (HMS-253) — same table/quiet conventions as the dashboard
   and rooming list above. */

.hotel-vip-verifications__title {
  margin: 0 0 1rem;
  font-size: 1.375rem;
  color: var(--wa-color-text-normal);
}

.hotel-vip-verifications__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

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

.hotel-vip-verifications__table input[type="submit"],
.hotel-vip-verifications__table button {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--wa-color-brand-fill-loud);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.hotel-vip-verifications__empty {
  color: var(--wa-color-text-quiet);
}

/* HMS-353 — portal chrome (Figma 435:221): navy topbar, left sidebar, footer,
   breadcrumb. Rendered only for a signed-in contact; sign-in and token pages
   keep the bare <main>. */

.hotel-portal-body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hotel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  min-height: 3.25rem;
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}

.hotel-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  font-size: 1.125rem;
}

.hotel-topbar__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hotel-topbar__bell {
  font-size: 1.125rem;
  color: inherit;
  opacity: 0.9;
}

.hotel-topbar__avatar-button {
  display: inline-flex;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

.hotel-topbar__profile-menu {
  min-width: 14rem;
  padding: 0.75rem 1rem;
}

.hotel-topbar__profile-name {
  margin: 0;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.hotel-topbar__profile-email,
.hotel-topbar__profile-hotel {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-topbar__signout {
  margin-top: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  background: transparent;
  color: var(--wa-color-text-normal);
  font: inherit;
  cursor: pointer;
}

.hotel-shell {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.hotel-sidebar {
  width: 15rem;
  flex-shrink: 0;
  background: var(--wa-color-surface-default);
  border-right: 1px solid var(--wa-color-neutral-border-quiet);
  padding: 0.75rem 0;
}

.hotel-sidebar__list,
.hotel-sidebar__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Web Awesome's native stylesheet styles EVERY <details> as a bordered card
   and injects its own chevron via summary::after. Sidebar sections are flat
   nav rows, not disclosure cards — strip the card chrome and the extra
   chevron so only our fa-chevron-right rotates. */
.hotel-sidebar .hotel-sidebar__section {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hotel-sidebar .hotel-sidebar__section[open] > .hotel-sidebar__head {
  margin-inline: 0;
}

.hotel-sidebar .hotel-sidebar__head::after {
  content: none;
}

.hotel-sidebar__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wa-color-text-normal);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

.hotel-sidebar__head::-webkit-details-marker {
  display: none;
}

.hotel-sidebar__head:hover {
  background: var(--wa-color-surface-lowered);
}

.hotel-sidebar__label {
  flex: 1;
}

.hotel-sidebar__chevron {
  font-size: 0.625rem;
  color: var(--wa-color-text-quiet);
  transition: transform 120ms ease;
}

.hotel-sidebar__section[open] > .hotel-sidebar__head .hotel-sidebar__chevron {
  transform: rotate(90deg);
}

.hotel-sidebar__sublist .hotel-sidebar__link {
  display: block;
  padding: 0.5rem 1rem 0.5rem 2.375rem;
  font-size: 0.8125rem;
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

.hotel-sidebar__sublist .hotel-sidebar__link:hover {
  background: var(--wa-color-surface-lowered);
}

.hotel-sidebar__link--current {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  font-weight: 600;
}

.hotel-content {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem 2rem;
  background: var(--wa-color-surface-lowered);
}

.hotel-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
}

.hotel-breadcrumbs__section {
  color: var(--wa-color-text-quiet);
}

.hotel-breadcrumbs__page {
  color: var(--wa-color-brand-fill-loud);
  font-weight: 600;
}

.hotel-breadcrumbs .fa-angle-right {
  font-size: 0.625rem;
  color: var(--wa-color-text-quiet);
}

.hotel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--wa-color-surface-default);
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.hotel-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
  color: var(--wa-color-text-normal);
}

.hotel-footer__center {
  margin: 0;
}

.hotel-footer__legal {
  display: flex;
  gap: 1.25rem;
  color: var(--wa-color-text-link);
  font-weight: 600;
}

/* The sidebar does not fit beside content on a phone — it becomes a
   horizontal strip across the top instead. */
@media (max-width: 48rem) {
  .hotel-shell {
    flex-direction: column;
  }

  .hotel-sidebar {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
    padding: 0.25rem 0;
    /* The dropdown's containing block: position:relative HERE, not on the
       section — the section lives inside the horizontally scrolling list,
       whose overflow would clip (hide) an absolutely-positioned submenu.
       Anchored to the nav instead, the submenu escapes the clip. */
    position: relative;
  }

  .hotel-sidebar__list {
    display: flex;
    overflow-x: auto;
  }

  .hotel-sidebar__list > li {
    flex-shrink: 0;
  }

  .hotel-sidebar__sublist {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--wa-color-surface-default);
    border: 1px solid var(--wa-color-neutral-border-quiet);
    border-radius: var(--wa-border-radius-m);
    box-shadow: var(--wa-shadow-m);
  }

  .hotel-sidebar__sublist .hotel-sidebar__link {
    padding-left: 1rem;
  }

  .hotel-content {
    padding: 1rem;
  }

  .hotel-footer {
    flex-direction: column;
    gap: 0.375rem;
    text-align: center;
  }

  /* The quick-action buttons grow to full width so they stay tappable. */
  .hotel-dashboard__action {
    flex: 1 1 100%;
    justify-content: center;
  }

  .hotel-dashboard__recent-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Flash banners — the chrome layout emits .hotel-flash for signed-in pages
   and the bare layout for sign-in/token pages. */
.hotel-flash {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--wa-border-radius-m);
  font-size: 0.875rem;
}

.hotel-flash--notice {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
  border: 1px solid var(--wa-color-success-border-quiet);
}

.hotel-flash--alert {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
  border: 1px solid var(--wa-color-danger-border-quiet);
}

/* Signed-out pages render flashes directly under <body> (the chrome branch
   nests them inside .hotel-content) — center them like the sign-in card. */
.hotel-portal-body > main > .hotel-flash {
  margin: 1rem auto;
  max-width: 24rem;
}

/* HMS-355 — dispute form page: a narrow, left-aligned block. */
.hotel-dispute {
  max-width: 36rem;
}

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

.hotel-dispute__subtitle {
  margin: 0.125rem 0 0;
  color: var(--wa-color-text-quiet);
}

.hotel-dispute__form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.hotel-dispute__actions {
  display: flex;
  gap: 0.75rem;
}

/* Muted one-liner under the block-request form. */
.hotel-block-request__alt {
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
  margin-top: 1rem;
}

/* VIP verifications has four narrow columns — at phone widths let cells wrap
   so the Status chip stays inside the viewport instead of scrolling off. */
@media (max-width: 40rem) {
  .hotel-table-wrap .hotel-vip-verifications__table {
    min-width: 0;
  }
  .hotel-vip-verifications__table th,
  .hotel-vip-verifications__table td {
    white-space: normal;
  }
}

/* Phone-width tables scroll inside the wrap; a soft right-edge fade is the
   cue. Masked to 55% opacity (not transparent) so the faded cells stay
   readable. Scoped to narrow widths where overflow is expected. */
@media (max-width: 48rem) {
  /* NOT .hotel-sidebar__list: the mask creates a stacking context that traps
     the section dropdown (z-index:200) inside the list's context, so in-flow
     page content paints over it and eats every click. */
  .hotel-table-wrap {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0, 0, 0, 0.55));
    mask-image: linear-gradient(to right, black calc(100% - 28px), rgba(0, 0, 0, 0.55));
  }
}

/* HMS-430 — the topbar lockup carries the event brand when one resolves:
   the white event wordmark reads straight on the dark bar; the product
   label stays as the muted suffix. */
.hotel-topbar__event-logo {
  display: block;
  height: 1.75rem;
  width: auto;
  max-width: 10rem;
  object-fit: contain;
  flex-shrink: 0;
}

.hotel-topbar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}

.hotel-topbar__product {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}

.hotel-topbar__product::before {
  content: "\00b7\00a0";
}

/* The seeded event logos are white wordmarks on transparent — on the light
   sign-in panel they need a brand-colored chip to stay readable (WCAG). */
.hotel-sign-in__event-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.625rem;
  border-radius: var(--wa-border-radius-m, 0.5rem);
  background-color: var(--ek-brand-primary);
  flex-shrink: 0;
  max-width: 100%;
}

.hotel-sign-in__event-logo-chip .hotel-sign-in__event-logo {
  max-height: 2rem;
}

@media (max-width: 640px) {
  .hotel-topbar {
    padding: 0 1rem;
  }

  .hotel-topbar__event-logo {
    max-width: 6rem;
  }

  .hotel-topbar__label {
    max-width: 8rem;
  }

  /* The muted product suffix is the first thing to give way on a narrow bar:
     the event lockup carries the brand on its own, and bell + avatar must
     stay on screen. */
  .hotel-topbar__product {
    display: none;
  }
}

/* HMS-716 — bid form theming: the hotel partner's only write surface, so it
   reads like the sign-in form, not a bare HTML page. */

.hotel-bid {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--wa-space-xl) var(--wa-space-l);
}
.hotel-bid__title {
  margin: 0 0 var(--wa-space-xs);
  font-size: 1.5rem;
}
.hotel-bid__event {
  margin: 0 0 var(--wa-space-l);
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
}

.hotel-bid-form__errors {
  margin: 0 0 var(--wa-space-m);
  padding: var(--wa-space-m) var(--wa-space-l);
  list-style: none;
  background: var(--wa-color-danger-fill-quiet, #fdecec);
  border: 1px solid var(--wa-color-danger-80, #f0b4b4);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-danger-30, #8c1f1f);
}
.hotel-bid-form__errors li + li { margin-top: 0.25rem; }

.hotel-bid-form__section {
  margin: 0 0 var(--wa-space-l);
  padding: 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-raised);
}
.hotel-bid-form__section legend {
  padding: 0 var(--wa-space-s);
  font-weight: 600;
  font-size: 0.9375rem;
}

.hotel-bid-form__rate-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) 6rem;
  gap: var(--wa-space-m);
  align-items: end;
  padding: var(--wa-space-s) 0;
}
.hotel-bid-form__rate-row + .hotel-bid-form__rate-row {
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
}
.hotel-bid-form__room-type {
  font-weight: 600;
  padding-bottom: 0.65rem;
}

.hotel-bid-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--wa-space-m);
}
.hotel-bid-form__rate-row .hotel-bid-form__field { margin-bottom: 0; }
.hotel-bid-form__field label {
  font-size: 0.8125rem;
  font-weight: 600;
}
.hotel-bid-form__field input,
.hotel-bid-form__field textarea {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
  width: 100%;
}
.hotel-bid-form__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

/* HMS-1339 re-review — the over-attendance warning was plain quiet hint
   text that QA could not tell from help copy. It is now an amber callout
   with the triangle-exclamation icon the counter-offer dialog's banner
   already carries. [hidden] must win over display:flex or the empty
   banner would render permanently. */
.hotel-bid-form__rooms-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: var(--wa-space-s);
  padding: 0.75rem;
  border: 1px solid var(--wa-color-warning-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
  font-size: 0.875rem;
}
.hotel-bid-form__rooms-warning[hidden] { display: none; }

.hotel-bid-form__submit {
  margin-top: var(--wa-space-s);
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* HMS-1333 — submit and Cancel share one actions row. */
.hotel-bid-form__actions {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  margin-top: var(--wa-space-s);
}
.hotel-bid-form__actions .hotel-bid-form__submit { margin-top: 0; }

/* HMS-1333 — Cancel rides the neutral-outline secondary treatment. */
.hotel-bid-form__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 480px) {
  .hotel-bid-form__rate-row { grid-template-columns: 1fr 1fr; }
  .hotel-bid-form__room-type { grid-column: 1 / -1; padding-bottom: 0; }
}

/* HMS-1215 — the RFP requirements list on the bid form/page, and the
   out-of-requirements callout under "Your bid". */
.hotel-bid__requirements {
  margin: var(--wa-space-s) 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem var(--wa-space-m);
  font-size: 0.875rem;
}
.hotel-bid__requirements dt { font-weight: 600; }
.hotel-bid__requirements dd { margin: 0; }
.hotel-bid__requirements dd p { margin: 0; }

.hotel-bid-form__requirements-title {
  margin: 0 0 var(--wa-space-xs);
  font-size: 1rem;
}
.hotel-bid-form__requirements .hotel-bid-form__hint {
  margin-bottom: var(--wa-space-xs);
}

.hotel-bid__warnings { margin: var(--wa-space-m) 0; }
.hotel-bid__warnings ul { margin: var(--wa-space-xs) 0 0; padding-left: 1.25rem; }

/* HMS-1233 — proposed terms inside a negotiation-history entry. */
.hotel-bid__log-rates {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s, 0.85em);
  margin: 0.125rem 0 0;
}
.hotel-bid__log-rate {
  display: inline-block;
  margin-right: 0.75rem;
}

/* HMS-1235 — the RFP details / confirmation page shares the centred
   .hotel-bid column with the bid form; its inner blocks reuse the form's
   card, the admin status-pill palette, the portal table conventions and
   the loud submit button so all four bid pages read the same. */

.hotel-bid__rfp-details,
.hotel-bid__existing {
  margin: 0 0 var(--wa-space-l);
  padding: 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-raised);
}
.hotel-bid__rfp-details h2,
.hotel-bid__existing h2 {
  margin: 0 0 var(--wa-space-s);
  font-size: 1rem;
}
.hotel-bid__existing h3 {
  margin: var(--wa-space-m) 0 var(--wa-space-xs);
  font-size: 0.9375rem;
}

.hotel-bid__closed {
  margin: 0 0 var(--wa-space-l);
  padding: var(--wa-space-m) var(--wa-space-l);
  border: 1px solid var(--wa-color-warning-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

.hotel-bid__existing dl {
  margin: var(--wa-space-s) 0 var(--wa-space-m);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem var(--wa-space-m);
  font-size: 0.875rem;
}
.hotel-bid__existing dt { font-weight: 600; }
.hotel-bid__existing dd { margin: 0; }
.hotel-bid__existing dd p { margin: 0; }

/* Same pill + palette as the organizer's rfp-detail__bid-status. */
.hotel-bid__status {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.hotel-bid__status--submitted {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
}
.hotel-bid__status--accepted,
.hotel-bid__status--counter_accepted {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}
.hotel-bid__status--declined,
.hotel-bid__status--counter_declined {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}
.hotel-bid__status--superseded {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}
.hotel-bid__status--under_review,
.hotel-bid__status--counter_offered {
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

/* HMS-1341 — the awaiting-organizer note under the bid's status: quiet
   supporting text like the admin side's rfp-detail__awaiting-hint. */
.hotel-bid__awaiting-note {
  margin: 0 0 var(--wa-space-s);
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
}

/* Same table conventions as .hotel-vip-verifications__table. */
.hotel-bid__rates-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.hotel-bid__rates-table th,
.hotel-bid__rates-table td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

/* Page actions render as the same loud button the form submit uses. */
.hotel-bid__revise,
.hotel-bid__submit-link {
  display: inline-block;
  margin-top: var(--wa-space-s);
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.hotel-bid__negotiation-log {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-s);
}
.hotel-bid__log-entry {
  padding: var(--wa-space-s) var(--wa-space-m);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
}
.hotel-bid__log-entry p { margin: var(--wa-space-xs) 0 0; }
.hotel-bid__log-time {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

/* HMS-1273 — counter-offer review: the hotel's terms beside the countered
   ones, the cells the organizer changed highlighted. */
.hotel-bid__counter-review {
  margin-top: var(--wa-space-m);
  padding: var(--wa-space-m);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
}
.hotel-bid__counter-review h3 { margin-top: 0; }
.hotel-bid__counter-message { margin: var(--wa-space-xs) 0 var(--wa-space-s); }
/* HMS-1322 — the counter-offer column is the table's main information, not
   a disabled-looking grey: the whole column (header, cells, total) rides
   the brand accent, and the values the organizer moved keep the extra
   weight. The accent pair is the same fill/on-quiet combo the portal uses
   for its highlighted rows, so the text keeps AA contrast. */
.hotel-bid__counter-col {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
}
.hotel-bid__counter-changed {
  font-weight: 600;
}
.hotel-bid__counter-table tfoot td {
  border-top: 2px solid var(--wa-color-neutral-border-quiet);
  border-bottom: none;
  font-weight: 600;
}
/* HMS-1325 — the three counter answers share one row: each direct child
   is a growing flex item and the labels never wrap inside a button, so
   the row only wraps when the card is narrower than the three labels
   together (small screens). Accept is the loud primary; Decline and
   Propose ride a smaller secondary treatment (scoped to this row, so
   the decline dialog's own footer keeps the full-size pink submit). */
.hotel-bid__counter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--wa-space-s);
  margin-top: var(--wa-space-m);
}
.hotel-bid__counter-actions > * { flex: 1 1 auto; }
.hotel-bid__counter-actions form { margin: 0; }
.hotel-bid__counter-actions form .hotel-bid__counter-btn { width: 100%; }
.hotel-bid__counter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--wa-border-radius-m);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.hotel-bid__counter-actions .hotel-bid__counter-btn--decline,
.hotel-bid__counter-actions .hotel-bid__counter-btn--propose {
  padding: 0.5rem 0.75rem;
  font-size: var(--wa-font-size-s, 0.875rem);
}
.hotel-bid__counter-actions .hotel-bid__counter-btn--decline {
  background: transparent;
  border-color: var(--wa-color-neutral-border-quiet);
}
.hotel-bid__counter-btn--accept {
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
}
.hotel-bid__counter-btn--decline {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}
.hotel-bid__counter-btn--danger {
  background: var(--wa-color-danger-fill-loud);
  color: var(--wa-color-danger-on-loud);
}
.hotel-bid__counter-btn--propose,
.hotel-bid__counter-btn--cancel {
  background: transparent;
  border-color: var(--wa-color-neutral-border-quiet);
  color: inherit;
}

/* Same native-dialog conventions as hotel-booking__flag-dialog.
   HMS-1333 — the discard dialog on the Revise form shares this block. */
.hotel-bid__decline-dialog,
.hotel-bid__discard-dialog {
  align-items: stretch;
  width: min(26rem, 92vw);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
}
.hotel-bid__decline-dialog::backdrop,
.hotel-bid__discard-dialog::backdrop { background: rgb(15 23 42 / 0.6); }
.hotel-bid__decline-head,
.hotel-bid__discard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--wa-space-s);
}
.hotel-bid__decline-title,
.hotel-bid__discard-title { margin: 0; font-size: 1.125rem; }
.hotel-bid__decline-close,
.hotel-bid__discard-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--wa-color-text-quiet);
  font-size: 1rem;
}
.hotel-bid__decline-form { display: flex; flex-direction: column; gap: var(--wa-space-s); }
.hotel-bid__decline-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}
/* HMS-1333 — the discard dialog is a centred confirm: title centred on
   its head row with the × pinned to the corner, the body copy in normal
   text colour at s size, the buttons centred under it and no divider.
   Its title dropped the --wa-font-size-l var (20px) for 1.125rem to match
   the pinned wa-dialog titles QA measured against. */
.hotel-bid__discard-dialog { text-align: center; }
.hotel-bid__discard-head { position: relative; justify-content: center; }
.hotel-bid__discard-close { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.hotel-bid__discard-note {
  margin: 0;
  font-size: var(--wa-font-size-s, 0.875rem);
  color: var(--wa-color-text-normal);
}
.hotel-bid__decline-foot,
.hotel-bid__discard-foot {
  display: flex;
  gap: var(--wa-space-s, 0.5rem);
}
.hotel-bid__decline-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--wa-color-neutral-border-quiet);
  padding-top: var(--wa-space-s, 0.75rem);
}
.hotel-bid__discard-foot { justify-content: center; margin-top: var(--wa-space-s, 0.75rem); }
/* HMS-1333 re-review — Keep editing is a <button>, so Web Awesome's
   native.css pins it to the fixed --wa-form-control-height (~43px) while the
   Discard <a> sized to its own line box (~48px): QA measured the pair uneven.
   Pin both to the same control height and font-size so the em-based height
   var resolves identically on the link as on the button. */
.hotel-bid__discard-foot .hotel-bid__counter-btn {
  height: var(--wa-form-control-height);
  font-size: var(--wa-font-size-m, 1rem);
}

/* HMS-1278 — the countered value sits inside each field, under its input. */
.hotel-bid-form__counter-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

/* HMS-1390 — the topbar bell is a real button now: it opens a
   notifications-drawer listing the hotel's attention feed
   (hotel_notification_items). The shared .topbar__icon-button /
   .notifications-drawer__* chrome comes from portal_shell.css; these are
   only the hotel-specific pieces. */
.hotel-topbar__notifications {
  display: flex;
  align-items: center;
}

.hotel-topbar .topbar__icon-button:hover,
.hotel-topbar .topbar__icon-button:focus-visible {
  background: rgb(255 255 255 / 0.16);
}

/* Leading icon spans the item's rows so title/sub/time stay in column 2,
   the same grid trick .notifications-drawer__item wa-tag uses admin-side. */
.notifications-drawer__item-icon {
  grid-row: span 3;
  margin-top: 0.1875rem;
  color: var(--wa-color-text-quiet);
}