/*
 * guest-details.css — styling for the GuestDetailsFragment snippet.
 *
 * Variables (--surface, --border, --accent, --text, --text-muted, --radius-sm)
 * are defined in core.css so this file composes cleanly with the existing
 * Team Hub palette. Values include sensible fallbacks for standalone use
 * (the admin/booking-links-demo.html test page doesn't load core.css).
 */

.guest-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface, #fafafa);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius-sm, 8px);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text, #222);
}

.guest-details .guest-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text, #222);
  /* Give the name a little breathing room on its own "line" of the flex row */
  flex: 1 1 100%;
}

.guest-details .guest-room {
  color: var(--accent, #0b6e8a);
  font-weight: 500;
  font-size: 12px;
  flex: 1 1 100%;
  margin-top: -2px;
}

.guest-details .guest-email,
.guest-details .guest-phone,
.guest-details .guest-booking {
  color: var(--accent, #0b6e8a);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.guest-details .guest-email:hover,
.guest-details .guest-phone:hover,
.guest-details .guest-booking:hover {
  text-decoration: underline;
}

.guest-details .guest-booking {
  /* Subtle pill so the external-link reference stands out from mailto/tel. */
  padding: 2px 8px;
  background: rgba(11, 110, 138, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.guest-details .guest-dates {
  color: var(--text-muted, #777);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Compact variant — for tight contexts like the arrivals drawer rows.
   Add the modifier class alongside .guest-details:
     <div class="guest-details guest-details--compact"> ... */
.guest-details.guest-details--compact {
  padding: 6px 10px;
  font-size: 12px;
  gap: 2px 10px;
}
.guest-details.guest-details--compact .guest-name { font-size: 13px; }
.guest-details.guest-details--compact .guest-booking { font-size: 11px; padding: 1px 6px; }

/* Inline variant — for pages that want the fragment flush with existing
   text content rather than as a separate block. Strips the background. */
.guest-details.guest-details--inline {
  display: inline-flex;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}