/* The group's own private Personnel Management dashboard
   (performance_groups/personnel.html.erb) -- same "main column +
   sidebar of cards" shape as shows.css/performance_groups.css, reusing
   .pg-header/.pg-avatar, .glance-row/.glance-card, and .sidebar-card
   directly rather than redefining them. Only the two-column grid and
   the availability-status pill are actually new here. */
.personnel-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.personnel-section-heading {
  margin: 1.5rem 0 0.75rem;
}

.personnel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

.personnel-main,
.personnel-aside {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

@media (max-width: 960px) {
  .personnel-shell {
    padding: 1.25rem;
  }

  .personnel-layout {
    grid-template-columns: 1fr;
  }
}

/* An availability request's own status, on its row in the Availability
   Requests card -- same pill shape as .event-kind-pill/.category-badge,
   colored by status rather than by rehearsal/concert kind. */
.status-pill {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.status-pill--pending {
  background: var(--secondary);
  color: var(--secondary-text);
}

.status-pill--available {
  background: var(--success-bg);
  color: var(--success-text);
}

.status-pill--unavailable {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.status-pill--need_discuss {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}

/* A roster row's own Core/Reserve badge (see the Roster card) -- a
   different pair of colors than pending/available/unavailable above
   since the two are never shown side by side, but distinct from each
   other: Core in a light wash of the brand blue (it's the group's own
   default/first-call status), Reserve in the same neutral gray
   .instrument-badge/.category-badge already use elsewhere for a
   plain, unemphasized label. */
.status-pill--core {
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary-dark);
}

.status-pill--reserve {
  background: var(--secondary);
  color: var(--secondary-text);
}

/* Alternate: a third, warm accent distinct from Core's blue and
   Reserve's neutral gray, and from the Active/Departed pair below,
   since a roster row can show a status pill and a member-status pill
   side by side. */
.status-pill--alternate {
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
}

/* A season roster row's own Active/Departed badge (see
   performance_groups/roster.html.erb) -- same shape as Core/Reserve
   above, just a different pair of colors so the two pills sitting side
   by side on one row stay visually distinct from each other. */
.status-pill--active {
  background: var(--success-bg);
  color: var(--success-text);
}

.status-pill--departed {
  background: var(--secondary);
  color: var(--muted);
}

/* The Roster page's own season/status/section/membership filters --
   one row of selects plus a submit button, same field-group markup as
   any other form on the site, just laid out inline rather than stacked. */
.roster-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.roster-filter-bar .field-group {
  margin: 0;
}

/* The Roster card's own "what do Core/Reserve mean" disclosure (see
   personnel.html.erb) -- same click-to-reveal shape as .kebab-menu, just
   sitting inline next to the "Roster" heading text rather than at the
   far right of a row, and showing an explanation instead of actions. */
.info-tooltip {
  display: inline-block;
  position: relative;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.info-tooltip > summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.95rem;
}

.info-tooltip > summary::-webkit-details-marker {
  display: none;
}

.info-tooltip > summary:hover,
.info-tooltip[open] > summary {
  color: var(--primary);
}

.info-tooltip__panel {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  width: max-content;
  max-width: 320px;
  margin-top: 0.4rem;
  padding: 0.75rem 0.85rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  font-size: 0.85rem;
  font-weight: 400;
}

.info-tooltip__panel p {
  margin: 0 0 0.5rem;
}

.info-tooltip__panel p:last-child {
  margin-bottom: 0;
}