/*
 * team-select.css
 * 역할: "팀 선택" 모달 공용 스타일 (수익분석 / 로스관리 공통).
 * 배경: 원래 analytics.html 에 인라인으로만 있어서, 로스관리에 같은 UI 를 붙이려면
 *       복사본이 생기고 두 화면이 갈라진다(유사 기능은 같은 UI 로 통일 — 프로젝트 규약).
 *       그래서 공용 파일로 뽑아 두 페이지가 함께 로드한다. 값은 analytics.html 원본 그대로다.
 * 주의: 모달 오버레이의 top:64px 고정은 페이지별 마크업에 남겨둔다(네비바를 덮지 않기 위한
 *       것이라 페이지 레이아웃에 종속). inset:0 으로 되돌리면 네비바까지 덮는 회귀가 난다.
 */

.team-modal-panel {
  width: 90%;
  max-width: 460px;
  max-height: 80vh;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.team-modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  padding: 16px 20px 12px;
}

.team-modal-body {
  padding: 12px 20px 20px;
}

.team-search-input {
  width: 100%;
  height: 2.4rem;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 0 0.75rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
}

.team-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(48vh, 28rem);
  margin: 12px 0 16px;
  overflow: auto;
  font-size: 14px;
}

/* 모달 목록의 한 줄(팀 1개). 수익분석은 체크박스 다중선택, 로스관리는 단일선택 라디오다.
   두 화면 모두 같은 줄 모양을 쓰도록 여기서 공통 정의한다. */
.team-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  color: #334155;
  font-weight: 600;
}

.team-modal-row:hover {
  background: #f8fafc;
}

.team-modal-row.selected {
  border-color: #6366f1;
  background: #eef2ff;
  color: #3730a3;
}

.team-modal-row .team-modal-row-sub {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}