/* =====================================================================
   TEAM - STYLES  (Module #10)
   ---------------------------------------------------------------------
   New structures only (.tm-*). Reuses the design system + shared
   command-center classes (.ds-*, .mc-* section shell, .c3-* nav/kpis/
   two-column, .rp-* bars/filters/subheads) so Team reads as one product.
   Theme-aware via tokens; no hard-coded colors.
   ===================================================================== */

.tm { display: flex; flex-direction: column; gap: var(--sp-6); }
.tm-head { display: flex; flex-direction: column; gap: var(--sp-4); }
.tm-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.tm-roles { flex-wrap: wrap; }
.tm-viewing { display: flex; }

/* ---------- avatars (state-colored ring) ---------- */
.tm-avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ds-overlay-2); color: var(--ds-text-hi); font-weight: 700; font-size: var(--fs-xs);
  border: 2px solid var(--ds-hairline-strong); flex-shrink: 0;
}
.tm-avatar--lg { width: 52px; height: 52px; font-size: var(--fs-base); }
.tm-avatar--available { border-color: var(--ds-positive); }
.tm-avatar--capacity { border-color: var(--ds-gold-500); }
.tm-avatar--overloaded, .tm-avatar--blocked { border-color: var(--ds-danger); }
.tm-avatar--waiting { border-color: var(--ds-hairline-strong); opacity: 0.7; }

/* ---------- capacity bar ---------- */
.tm-cap { display: flex; align-items: center; gap: var(--sp-3); }
.tm-cap__track { flex: 1 1 auto; height: 8px; border-radius: var(--r-pill); background: var(--ds-overlay-2); overflow: hidden; }
.tm-cap__fill { display: block; height: 100%; border-radius: var(--r-pill); transition: width var(--dur-3) var(--ease); }
.tm-cap__fill--gold { background: linear-gradient(90deg, var(--ds-gold-500), var(--ds-gold-300)); }
.tm-cap__fill--ok { background: var(--ds-positive); }
.tm-cap__fill--risk { background: var(--ds-danger); }
.tm-cap__pct { font-size: var(--fs-xs); font-weight: 600; color: var(--ds-text-lo); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* ---------- member grid ---------- */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.tm-mcard {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--r-lg); background: var(--ds-surface-2);
  border: 1px solid var(--ds-hairline); box-shadow: var(--el-1); cursor: pointer;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.tm-mcard:hover { transform: translateY(-2px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-2); }
.tm-mcard--client { cursor: default; }
.tm-mcard--client:hover { transform: none; box-shadow: var(--el-1); border-color: var(--ds-hairline); }
.tm-mcard__head { display: flex; align-items: center; gap: var(--sp-3); }
.tm-mcard__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tm-mcard__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); }
.tm-mcard__role { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.tm-mcard__stats { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--ds-text-lo); }
.tm-mcard__stats b { color: var(--ds-text-hi); font-variant-numeric: tabular-nums; }
.tm-mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: 2px; }
.tm-mcard__cnote { margin: 0; font-size: var(--fs-sm); color: var(--ds-text-lo); }
.tm-mcard__chev { color: var(--ds-text-mute); font-size: 1.3rem; line-height: 1; }
.tm-aipair { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--ds-text-lo); }

/* ---------- workload ---------- */
.tm-dist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.tm-dist__cell { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.tm-dist__n { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; }
.tm-dist__k { font-size: var(--fs-xs); color: var(--ds-text-lo); letter-spacing: 0.02em; }
.tm-wlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-wrow { display: grid; grid-template-columns: minmax(180px, 1.3fr) 2fr auto; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); cursor: pointer; transition: border-color var(--dur-2) var(--ease); }
.tm-wrow:hover { border-color: var(--ds-hairline-strong); }
.tm-wrow__id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.tm-wrow__name { display: block; font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.tm-wrow__role { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.tm-wrow__meta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.tm-wrow__hours { font-size: var(--fs-xs); color: var(--ds-text-lo); font-variant-numeric: tabular-nums; }
.tm-rebalance { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); background: rgba(212,175,55,0.08); border: 1px solid var(--ds-hairline); font-size: var(--fs-sm); color: var(--ds-text); line-height: var(--lh-normal); }
.tm-soon { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ds-text-mute); font-style: italic; }

/* ---------- assignments ---------- */
.tm-assigns { display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-assign { display: grid; grid-template-columns: minmax(160px, 0.8fr) 2fr; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.tm-assign__who { display: flex; align-items: center; gap: var(--sp-3); }
.tm-assign__who span { display: flex; flex-direction: column; font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.tm-assign__who em { font-style: normal; font-weight: 400; font-size: var(--fs-xs); color: var(--ds-text-lo); }
.tm-assign__what { display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-relwrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tm-rel { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--ds-text); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); }
.tm-rel em { font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.62rem; font-weight: 700; color: var(--ds-text-mute); }

/* ---------- tasks ---------- */
.tm-tfilter { flex-wrap: wrap; }
.tm-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); }
.tm-task { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); box-shadow: var(--el-1); }
.tm-task--blocked { border-color: color-mix(in srgb, var(--ds-danger) 28%, transparent); }
.tm-task--over { background: var(--ds-danger-soft); }
.tm-task__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.tm-task__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tm-task__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); line-height: var(--lh-snug); }
.tm-task__owner { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ds-text-lo); }
.tm-task__owner .tm-avatar { width: 22px; height: 22px; font-size: 0.6rem; border-width: 1.5px; }
.tm-task__flags { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.tm-task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tm-task__due { font-size: var(--fs-xs); font-weight: 600; color: var(--ds-text-lo); }
.tm-task__due--over { color: var(--ds-danger-strong); }
.tm-act { list-style: none; margin: 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--ds-hairline); display: flex; flex-direction: column; gap: 4px; }
.tm-act li { font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-snug); }
.tm-act li strong { color: var(--ds-text); }
.tm-act__when { color: var(--ds-text-mute); }
.tm-collab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--ds-hairline); }
.tm-collab__k { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ds-text-mute); margin-right: var(--sp-1); }
.tm-chiplet { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; color: var(--ds-text-lo); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); cursor: pointer; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.tm-chiplet:hover { color: var(--ds-accent); border-color: var(--ds-hairline-strong); }
.tm-chiplet--ai { color: var(--ds-accent); }

/* ---------- approvals ---------- */
.tm-apprs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-appr { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.tm-appr--over { border-color: color-mix(in srgb, var(--ds-danger) 32%, transparent); background: var(--ds-danger-soft); }
.tm-appr__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-appr__title { font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.tm-appr__why { font-size: var(--fs-sm); color: var(--ds-text-lo); }
.tm-appr__side { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.tm-appr__meta { font-size: var(--fs-xs); color: var(--ds-text-lo); white-space: nowrap; }

/* ---------- launch assignments ---------- */
.tm-launchlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-launch { display: grid; grid-template-columns: minmax(180px, 1.2fr) 2fr auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.tm-launch__id { display: flex; flex-direction: column; gap: 1px; }
.tm-launch__name { font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.tm-launch__owner { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.tm-launch__mid { display: flex; align-items: center; gap: var(--sp-4); }
.tm-avatars { display: flex; }
.tm-avatars .tm-avatar { width: 26px; height: 26px; font-size: 0.6rem; margin-left: -6px; }
.tm-avatars .tm-avatar:first-child { margin-left: 0; }
.tm-launch__prog { flex: 1 1 auto; display: flex; align-items: center; gap: var(--sp-3); }
.tm-launch__prog span { font-size: var(--fs-xs); color: var(--ds-text-lo); font-variant-numeric: tabular-nums; }
.tm-launch__prog .rp-bar__track { flex: 1 1 auto; }

/* ---------- client assignments ---------- */
.tm-clientlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-client { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); cursor: pointer; transition: border-color var(--dur-2) var(--ease); }
.tm-client:hover { border-color: var(--ds-hairline-strong); }
.tm-client__name { font-weight: 600; color: var(--ds-text-hi); }
.tm-client__na { font-size: var(--fs-sm); color: var(--ds-text-lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-client__owner { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ds-text-lo); }

/* ---------- activity feed ---------- */
.tm-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.tm-feed__i { display: flex; gap: var(--sp-3); align-items: flex-start; }
.tm-feed__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--ds-hairline-strong); flex-shrink: 0; }
.tm-feed--approval .tm-feed__dot { background: var(--ds-gold-500); box-shadow: 0 0 8px var(--ds-glow); }
.tm-feed--risk .tm-feed__dot { background: var(--ds-danger); }
.tm-feed--done .tm-feed__dot { background: var(--ds-positive); }
.tm-feed__t { display: block; font-size: var(--fs-sm); color: var(--ds-text); }
.tm-feed__t strong { color: var(--ds-text-hi); }
.tm-feed__meta { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ds-text-mute); margin-top: 2px; }

/* ---------- availability ---------- */
.tm-avails { display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-avail { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.tm-avail__id { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.tm-avail__note { display: block; font-size: var(--fs-xs); color: var(--ds-text-lo); }
.tm-avail__cap { display: flex; align-items: center; gap: var(--sp-3); min-width: 220px; }
.tm-avail__until { font-size: var(--fs-xs); color: var(--ds-text-mute); white-space: nowrap; }

/* ---------- notifications ---------- */
.tm-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-note { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.tm-note__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-hairline-strong); flex-shrink: 0; }
.tm-note--approval .tm-note__dot { background: var(--ds-gold-500); }
.tm-note--risk .tm-note__dot { background: var(--ds-danger); }
.tm-note--opp .tm-note__dot { background: var(--ds-positive); }
.tm-note.is-unread { border-color: var(--ds-hairline-strong); }
.tm-note.is-unread .tm-note__text { color: var(--ds-text-hi); }
.tm-note__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tm-note__to { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ds-text-mute); font-weight: 600; }
.tm-note__text { font-size: var(--fs-sm); color: var(--ds-text); }
.tm-note__when { font-size: var(--fs-xs); color: var(--ds-text-mute); white-space: nowrap; flex-shrink: 0; }

/* ---------- roles & permissions ---------- */
.tm-permtable td:first-child { font-weight: 500; color: var(--ds-text-hi); }
.tm-perm { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; }
.tm-perm--full { color: var(--ds-positive); background: var(--ds-positive-soft); }
.tm-perm--ltd { color: var(--ds-gold-700); background: rgba(212,175,55,0.12); }
.tm-perm--read { color: var(--ds-text-lo); background: var(--ds-overlay); }
.tm-perm--none { color: var(--ds-text-mute); }

/* ---------- AI workforce ---------- */
.tm-aigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.tm-aiemp { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--ds-surface-2); border: 1px dashed var(--ds-hairline-strong); }
.tm-aiemp__head { display: flex; align-items: center; gap: var(--sp-3); }
.tm-aiemp__glyph { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(212,175,55,0.12); color: var(--ds-gold-500); font-size: 1.1rem; flex-shrink: 0; }
.tm-aiemp__name { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); }
.tm-aiemp__dept { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.tm-aiemp__head > div { flex: 1 1 auto; min-width: 0; }
.tm-aiemp__will { margin: 0; font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-normal); }
.tm-aiemp__mod { font-size: var(--fs-xs); color: var(--ds-accent); font-weight: 600; }
.tm-pairs { display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.tm-pair__human { display: flex; align-items: center; gap: var(--sp-3); }
.tm-pair__human span { display: flex; flex-direction: column; font-weight: 600; color: var(--ds-text-hi); font-size: var(--fs-base); }
.tm-pair__human em { font-style: normal; font-weight: 400; font-size: var(--fs-xs); color: var(--ds-text-lo); }
.tm-pair__link { font-size: var(--fs-xs); color: var(--ds-text-mute); font-style: italic; text-align: center; }
.tm-pair__ai { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; font-weight: 600; color: var(--ds-accent); font-size: var(--fs-base); }

/* ---------- member profile detail ---------- */
.tm-detailhead { display: flex; align-items: center; gap: var(--sp-4); }
.tm-detailhead__id { flex: 1 1 auto; min-width: 0; }
.tm-detailhead__role { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--ds-text-lo); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tm-availbox { display: flex; flex-direction: column; gap: var(--sp-3); padding-bottom: var(--sp-3); }
.tm-availbox > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.tm-avail__k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ds-text-mute); font-weight: 600; }
.tm-availbox strong { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ds-text-hi); }
.tm-wschips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tm-aicard { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); border: 1px dashed var(--ds-hairline-strong); background: var(--ds-surface-1); }
.tm-aicard__k { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ds-text-mute); font-weight: 600; }
.tm-aicard strong { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ds-text-hi); margin: 2px 0; }
.tm-aicard__note { font-size: var(--fs-sm); color: var(--ds-text-lo); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .tm-grid, .tm-tasks, .tm-aigrid { grid-template-columns: 1fr; }
  .tm-dist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-wrow, .tm-launch { grid-template-columns: 1fr; gap: var(--sp-3); }
  .tm-assign { grid-template-columns: 1fr; }
  .tm-client { grid-template-columns: 1fr auto; grid-auto-flow: row; }
  .tm-pair { grid-template-columns: 1fr; text-align: left; }
  .tm-pair__ai { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .tm-head__top { flex-direction: column; }
  .tm-task__flags { flex-direction: row; }
}

/* ---------- print ---------- */
@media print {
  .sidebar, .topbar, .sidebar-backdrop, .c3-nav, .tm-roles, .tm-viewing, .tm-collab, .tm-tfilter { display: none !important; }
  .tm-task, .mc-section, .ds-insight, .tm-mcard { break-inside: avoid; box-shadow: none !important; }
}