/* activeUsersList.css — the active-session participant tabs, which wrap onto multiple rows
   for a merged group session. Extracted from index.css 2026-07-27.
   Inherits design tokens, glass-card/button/flex foundations and color scheme from
   index.css, loaded first — this file adds only what activeUsersList.js owns. */

/* --- CLIENT/PARTICIPANT TABS (wrap to multiple rows) --- */
/* Participants wrap onto new rows once the row fills, like text line-breaks, so a merged
   session with many clients stays fully visible instead of scrolling out of view. */
.client-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Row gap trimmed from 6px — with several participants wrapping to multiple rows, this is
     genuine per-row vertical cost, unlike the tab's own min-height (floored at 44px regardless). */
  gap: 4px;
  /* Trimmed from 10px/16px top+bottom — the bar's own padding, not the 44px tap target on each
     .client-tab-btn (kept intact: real touch targets, never shrunk for density). */
  padding: 6px 16px;
}
.client-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  /* Real tap target (44px) for every tab — vertical padding alone can't shrink below this floor
     anyway. */
  min-height: 44px;
}
/* The per-participant tab, one per client, a group member's too (it adds a link glyph,
   `.client-tab-group-mark`): unified primary gradient with on-primary text on the active one. */
.client-tab-participant {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 24px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  box-shadow: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  max-width: 140px;
}
/* The session dot sits on the tab's top corner and takes no width, so a merged clipboard's tabs are
   exactly as wide as a single session's. The tab's own content is centred in 44px, well below it. */
.client-tab-participant {
  position: relative;
}
.client-tab-participant .session-dot {
  position: absolute;
  top: 3px;
  inset-inline-end: 9px;
  margin: 0;
}
.client-tab-participant.active {
  border: 1px solid transparent;
  background: var(--primary-gradient);
  color: var(--on-primary);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
}
/* Chained on .client-tab-btn: clientsView.css's shared .avatar rule (width/height/background/
   color/font-size) has the same specificity as a single class, so this must outrank it rather
   than depend on stylesheet load order. */
.client-tab-btn .client-tab-avatar {
  width: 16px;
  height: 16px;
  font-size: 8px;
  flex-shrink: 0;
  background: var(--primary-light);
  color: var(--primary);
}
.client-tab-btn .client-tab-avatar.active {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
/* The name, and under it the absence mark when there is one. Shrinks like the name inside it, so a
   long name still ends in an ellipsis. */
.client-tab-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
}
.client-tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
/* A client marked absent: the words for it under the name. */
.client-tab-absent-mark {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
} /* --- VERTICAL EXERCISE CARD STACK --- */