/* ═══════════════════════════════════════════════════════════════
   Manzoma Team Page Styles
   Phase 2 split: page-specific styles extracted from style.css.
   Load order: tokens.css → base.css → layout.css → components.css → page styles → style.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   TEAM CARDS V2
═══════════════════════════════════════════════════════════════ */
.tg-v2{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp4)}
.tm2-card{background:var(--s0);border:1px solid var(--b0);border-radius:var(--r);padding:var(--sp5);box-shadow:var(--sh1);transition:box-shadow .2s var(--ease),transform .18s var(--ease),border-color .2s}
.tm2-card:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--b1)}
.tm2-hd{display:flex;align-items:center;gap:var(--sp4);margin-bottom:var(--sp4)}
.tm2-gauge-wrap{flex-shrink:0}
.tm2-info{flex:1;min-width:0}
.tm2-name{font-size:var(--fz-md);font-weight:800;color:var(--t1);letter-spacing:-.2px}
.tm2-role{font-size:var(--fz-xs);color:var(--t4);margin-top:3px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.tm2-load{margin-top:6px}
.tm2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp2);margin-bottom:var(--sp4)}
.tm2-stat{background:var(--s1);border:1px solid var(--b0);border-radius:var(--r3);padding:9px 4px;text-align:center;transition:background .15s}
.tm2-stat:hover{background:var(--s2)}
.tm2-stat-val{font-size:var(--fz-md);font-weight:800;color:var(--t1);font-variant-numeric:tabular-nums}
.tm2-stat-lbl{font-size:var(--fz-xs);color:var(--t4);margin-top:2px;font-weight:600}
.tm2-tasks{border-top:1px solid var(--b0);padding-top:var(--sp3)}
.tm2-task-lbl{font-size:var(--fz-xs);font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--sp2)}
.tm2-task-row{display:flex;align-items:center;gap:var(--sp2);padding:5px 0;border-bottom:1px solid var(--b0);font-size:var(--fz-sm)}
.tm2-task-row:last-child{border-bottom:none}
.tm2-task-name{color:var(--t2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm2-task-date{font-size:var(--fz-xs);color:var(--t4);white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   ORG CHART
═══════════════════════════════════════════════════════════════ */
/* Keep old classes for backward compat in portfolio card view */
.org-tree-wrap{padding:22px 14px;overflow-x:auto}
.org-root{display:flex;flex-direction:column;align-items:center;min-width:fit-content}
.org-proj-bar{height:3px;background:var(--s3);border-radius:4px;overflow:hidden;margin-bottom:8px}
.org-proj-bar-fill{height:100%;border-radius:4px;transition:width .8s var(--ease)}
.org-proj-stat{font-size:10px;padding:2px 6px;border-radius:8px;font-weight:600;display:inline-block}
.org-proj-stat.late{background:var(--red-bg);color:var(--red)}.org-proj-stat.prog{background:var(--amber-bg);color:var(--amber)}
.org-proj-stat.done{background:var(--green-bg);color:var(--green)}.org-proj-stat.total{background:var(--g5);color:var(--g3)}

/* ═══════════════════════════════════════════════════════════════
   PM IMPROVEMENTS — Team workload + Task comment button
═══════════════════════════════════════════════════════════════ */

/* Team workload badges */
.tm2-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:20px;
}
.tm2-badge-red   {background:var(--red-bg);color:var(--red)}
.tm2-badge-amber {background:var(--amber-bg);color:var(--amber)}
.tm2-badge-green {background:var(--green-bg);color:var(--green)}
.tm2-badge-grey  {background:var(--s2);color:var(--t3)}

/* Due rate progress bar */
.tm2-due-rate{
  display:flex;align-items:center;gap:8px;
  padding:10px 0 0;margin-top:8px;
  border-top:1px solid var(--b0);
}
.tm2-due-rate-lbl{font-size:10px;font-weight:700;color:var(--t4);white-space:nowrap;min-width:fit-content}
.tm2-due-rate-bar{flex:1;height:5px;background:var(--s3);border-radius:4px;overflow:hidden}
.tm2-due-rate-fill{height:100%;border-radius:4px;transition:width .7s var(--ease)}
.tm2-due-rate-pct{font-size:11px;font-weight:800;color:var(--t2);white-space:nowrap;min-width:30px;text-align:left}

/* Comment button in task card */
.tc-act-comment:hover{background:var(--g5);color:var(--g3);border-color:var(--g4)}

/* KPI — due-based display */
.kpi-card .kv{letter-spacing:-1px}