/* hos-entity-tabs — HotelOS-LOCAL entity switcher (guest / occupant tabs).
 * NOT a gem component: it sits on the guest sand hero and uses the HotelOS `--sand-*`
 * ramp, which the os-ds gem has no notion of. Prefix is `hos-` for that reason.
 * Source: `.strip/.rgroup/.rglabel/.rgroup__tabs/.gtab/.sd` (reg-card-hybrid.html) and
 * `.party/.gtab` (arrival.html).
 * `--grouped` = room-grouped variant: the room label stacks ABOVE its tabs and a
 * vertical divider separates one room from the next.
 */

.hos-entity-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hos-entity-tabs__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.hos-entity-tabs--grouped .hos-entity-tabs__group + .hos-entity-tabs__group {
  padding-left: var(--space-4);
  border-left: 1px solid var(--sand-divider);
}

.hos-entity-tabs__group-label {
  font-size: var(--text-2xs);
  line-height: var(--leading-2xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--sand-label);
}

.hos-entity-tabs__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hos-entity-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--sand-hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--sand-muted);
  font: inherit;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
    color var(--t-fast);
}

.hos-entity-tabs__tab:hover {
  border-color: var(--accent-border);
}

.hos-entity-tabs__tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.hos-entity-tabs__avatar {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--text-2xs);
  line-height: var(--leading-2xs);
  font-weight: 700;
}

/* Per-entity readiness indicator. */
.hos-entity-tabs__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--muted-2);
}

.hos-entity-tabs__dot--ready {
  background: var(--status-confirmed-fg);
}

.hos-entity-tabs__dot--needs {
  background: var(--warning);
}