/*
 * 대시보드 «팀원별 이번달 실적» — 출처별 구성 (2026-10-11)
 * 상단 4칸(배정DB·공유DB·이관받음·직접등록) + 팀원 행의 구성 막대. 칸을 누르면 그 출처 기준 순위(dash-team-mix 컨트롤러가 data-focus 를 켠다).
 * 색은 전부 토큰(--ord-src-* = 출처 4색, 나머지는 공용 토큰) — 라이트/다크 자동.
 */
.dtm { padding: 16px 18px; }
.dtm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dtm-link { font-size: 12px; color: var(--ord-accent); font-weight: 600; text-decoration: none; }
.dtm-empty { padding: 40px 0; text-align: center; color: var(--ord-text-4); font-size: 13px; }

/* 출처별 색 */
.is-assign { --src: var(--ord-src-assign); }
.is-share  { --src: var(--ord-src-share); }
.is-xfer   { --src: var(--ord-src-xfer); }
.is-direct { --src: var(--ord-src-direct); }

/* 상단 구성 4칸 */
.dtm-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.dtm-src { padding: 9px 12px; border: 1px solid var(--ord-line); border-radius: 10px; background: var(--ord-surface); text-align: left; cursor: pointer; font-family: inherit; min-width: 0; }
.dtm-src:hover { border-color: var(--src); }
.dtm-src.is-on { border-color: var(--src); box-shadow: 0 0 0 3px color-mix(in srgb, var(--src) 18%, transparent); }
.dtm-src-l { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--ord-text-3); white-space: nowrap; }
.dtm-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--src); flex: none; }
.dtm-src strong { display: block; margin-top: 3px; font-size: 20px; font-weight: 800; color: var(--ord-text); letter-spacing: -.3px; white-space: nowrap; }
.dtm-src small { margin-left: 4px; font-size: 11px; font-weight: 600; color: var(--ord-text-4); }

/* 팀원 행 */
.dtm-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.dtm-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--ord-line-soft); }
.dtm-row:last-child { border-bottom: 0; }
.dtm-row.is-hidden { display: none; }
.dtm-rank { font-size: 12px; font-weight: 800; color: var(--ord-tint-indigo-fg); }
.dtm-rank.is-low { color: var(--ord-text-4); }
.dtm-name { font-size: 14px; font-weight: 700; color: var(--ord-text); }
.dtm-cnt { text-align: right; font-size: 12px; color: var(--ord-text-3); white-space: nowrap; }
.dtm-cnt strong { font-size: 14px; color: var(--ord-text); }
.dtm-cnt small { margin-left: 4px; font-size: 11px; color: var(--ord-text-4); font-weight: 600; }
.dtm-today { margin-left: 6px; font-style: normal; font-weight: 700; color: var(--ord-tint-green-fg); }
.dtm-bar { grid-column: 2 / 4; display: flex; width: var(--w, 100%); min-width: 6px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--ord-progress-track); }
.dtm-seg { display: block; flex: var(--n, 1) 1 0; min-width: 0; background: var(--src); transition: opacity .15s; }
.dtm-seg + .dtm-seg { border-left: 2px solid var(--ord-surface); }

/* 출처 칸을 누른 상태 — 선택한 출처 외 구간은 흐리게 */
.dtm[data-focus="assign"] .dtm-seg:not([data-src="assign"]),
.dtm[data-focus="share"]  .dtm-seg:not([data-src="share"]),
.dtm[data-focus="xfer"]   .dtm-seg:not([data-src="xfer"]),
.dtm[data-focus="direct"] .dtm-seg:not([data-src="direct"]) { opacity: .25; }

@media (max-width: 700px) {
  .dtm-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}