/* styles-settings-roster.css — карточка «График смен» в «Настройках производства».
 * Та же вёрстка карточки, что у приёмки (loss-settings-card); своё здесь только
 * два списка руководителей с галочками. */

.page-shell.prod-settings-mode #rosterCard {
  flex: 1 1 360px;
  min-width: 360px;
  max-width: 480px;
}
.page-shell.prod-settings-mode #rosterCard .loss-metric-table td:nth-child(1) { width: 60%; }
.page-shell.prod-settings-mode #rosterCard .loss-metric-table td:nth-child(2) { width: 40%; }

#rosterCard .roster-card-lists {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 4px;
}

#rosterCard .roster-card-group h3 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #dce8ff;
}

#rosterCard .roster-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 168px;
  overflow-y: auto;
  border: 1px solid rgba(124, 164, 220, 0.22);
  border-radius: 10px;
  background: rgba(8, 20, 42, 0.45);
}

#rosterCard .roster-card-list li + li {
  border-top: 1px solid rgba(124, 164, 220, 0.14);
}

#rosterCard .roster-card-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #e6eefc;
}

#rosterCard .roster-card-lead input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
  accent-color: #3ea86a;
}

#rosterCard .roster-card-lead-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rosterCard .roster-card-lead-pos {
  flex: 0 1 auto;
  color: #8fa4c4;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

#rosterCard .roster-card-lead-badge {
  flex: 0 0 auto;
  font-size: 11px;
  color: #8fa4c4;
}

#rosterCard li.is-admin .roster-card-lead-badge {
  color: #7fd39a;
}

#rosterCard li.is-inactive .roster-card-lead {
  opacity: 0.55;
}

#rosterCard .roster-card-empty,
#rosterCard .notify-hint {
  margin: 4px 0 0;
}

#rosterCard .roster-card-empty {
  font-size: 12px;
  color: #8fa4c4;
}