/* HMS-356 — bookings table (Figma 435:449) + detail panel (435:4558). */

.hotel-bookings__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wa-space-m, 1rem); margin-bottom: var(--wa-space-m, 1rem);
}

.hotel-bookings__title {
  margin: 0; font-size: var(--wa-font-size-2xl, 1.5rem);
  font-weight: var(--wa-font-weight-bold, 700);
  color: var(--wa-color-text-normal);
}

.hotel-bookings__filters {
  display: flex; flex-wrap: wrap; gap: var(--wa-space-s, 0.75rem);
  align-items: flex-end; margin-bottom: var(--wa-space-m, 1rem);
  padding: var(--wa-space-s, 0.75rem) var(--wa-space-m, 1rem);
  background: var(--wa-color-surface-raised, var(--wa-color-surface-default));
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
}
/* WA native.css forces label/input width:100% — same counter-pattern as
   .hotel-rooming__filter .hotel-rooming__filter-field in hotel_portal.css. */
.hotel-bookings__filters wa-select,
.hotel-bookings__filters wa-input {
  width: auto; min-width: 10rem; margin-block-start: 0;
}
.hotel-bookings__filters wa-button { margin-block-start: 0; }

.hotel-bookings__table { width: 100%; border-collapse: collapse; }
.hotel-bookings__table th, .hotel-bookings__table td {
  padding: var(--wa-space-xs, 0.5rem) var(--wa-space-s, 0.75rem);
  text-align: left; border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: var(--wa-font-size-s, 0.9375rem);
  white-space: nowrap;
}
.hotel-bookings__table th {
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-semibold, 600);
}
/* Actions stay pinned while the row scrolls: Edit is the only drill-in. */
.hotel-bookings__table th:last-child,
.hotel-bookings__table td:last-child {
  position: sticky;
  right: 0;
  background: var(--wa-color-surface-default);
  box-shadow: -8px 0 8px -8px var(--wa-color-neutral-border-quiet);
}
.hotel-bookings__sort {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--wa-space-2xs, 4px);
}
.hotel-bookings__chev { opacity: 0.6; font-size: 0.75em; }
.hotel-bookings__ref { font-size: var(--wa-font-size-xs, 0.85em); }
.hotel-bookings__edit { color: var(--wa-color-text-link); }
.hotel-bookings__empty { padding: var(--wa-space-l, 1.5rem); text-align: center; color: var(--wa-color-text-quiet); }
.hotel-bookings__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wa-space-m, 1rem); margin-top: var(--wa-space-s, 0.75rem); flex-wrap: wrap;
}
.hotel-bookings__per-page { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s, 0.9375rem); }

/* Detail panel — right-anchored card on desktop, full-width on mobile. */
/* The detail panel is a right-anchored drawer (Figma 435:4558); the soft
   scrim behind it is what reads "overlay" instead of "empty half-page".
   Deliberately lighter than --ek-color-scrim (0.6 black), which is tuned
   for modal dialogs. */
.hotel-booking {
  display: flex;
  justify-content: flex-end;
  min-height: 70vh;
  background: rgb(15 23 42 / 0.28);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m, 16px);
}
.hotel-booking__panel {
  width: min(34rem, 100%);
  background: var(--wa-color-surface-raised, var(--wa-color-surface-default));
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-l, 1.5rem);
  display: flex; flex-direction: column; gap: var(--wa-space-m, 1rem);
}
.hotel-booking__panel-head {
  display: flex; align-items: center; justify-content: space-between;
}
.hotel-booking__title { margin: 0; font-size: var(--wa-font-size-xl, 1.25rem); }
.hotel-booking__close { text-decoration: none; color: var(--wa-color-text-quiet); font-size: 1.1rem; }
.hotel-booking__card {
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m, 1rem);
}
.hotel-booking__card--danger { border-color: var(--wa-color-danger-border-quiet); }
.hotel-booking__section {
  margin: 0 0 var(--wa-space-s, 0.75rem);
  font-size: var(--wa-font-size-s, 0.9375rem); font-weight: var(--wa-font-weight-semibold, 600);
  color: var(--wa-color-text-quiet); text-transform: uppercase; letter-spacing: 0.04em;
}
.hotel-booking__guest-name { margin: 0; font-weight: var(--wa-font-weight-semibold, 600); }
.hotel-booking__guest-email { margin: var(--wa-space-2xs, 4px) 0 0; color: var(--wa-color-text-quiet); }
.hotel-booking__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--wa-space-xs, 0.5rem) var(--wa-space-m, 1rem); }
.hotel-booking__facts dt { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs, 0.8rem); }
.hotel-booking__facts dd { margin: 0; }
.hotel-booking__pms {
  margin: 0; padding: var(--wa-space-s, 0.75rem) var(--wa-space-m, 1rem);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-quiet, var(--wa-color-surface-default));
  border: 1px solid var(--wa-color-brand-40);
  font-size: var(--wa-font-size-s, 0.9375rem);
}
.hotel-booking__form { display: flex; flex-direction: column; gap: var(--wa-space-s, 0.75rem); }
.hotel-booking__requests { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wa-space-2xs, 4px); }
.hotel-booking__requests-legend { font-size: var(--wa-font-size-s, 0.9375rem); color: var(--wa-color-text-quiet); padding: 0; margin-bottom: var(--wa-space-2xs, 4px); }
.hotel-booking__requests-note { margin: 0 0 var(--wa-space-2xs, 4px); font-style: italic; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s, 0.9375rem); }
.hotel-booking__actions { display: flex; justify-content: flex-end; gap: var(--wa-space-s, 0.75rem); }
.hotel-booking__save {
  appearance: none; border: 0; cursor: pointer;
  background: var(--wa-color-brand-fill-loud, var(--wa-color-brand));
  color: var(--wa-color-brand-on-loud);
  padding: var(--wa-space-xs, 0.5rem) var(--wa-space-m, 1rem);
  border-radius: var(--wa-border-radius-m); font: inherit;
}
.hotel-booking__flag-form { display: flex; flex-direction: column; gap: var(--wa-space-s, 0.75rem); }
.hotel-booking__flag { align-self: flex-start; }

@media (max-width: 40rem) {
  .hotel-booking__facts { grid-template-columns: 1fr; }
  .hotel-bookings__filters { flex-direction: column; align-items: stretch; }
  .hotel-bookings__filters wa-select,
  .hotel-bookings__filters wa-input { width: 100%; }
}