/* ============================================================
 * Manager-to-manager collaboration grid  (#managersBody .cm-*)
 *
 * Kept in its own file, deliberately: styles.css has a global
 * `table { width:100% }` rule that otherwise stretches this grid
 * and shoves it to the right. Everything here is namespaced `.cm-`
 * and resets what it needs, so no global rule can bleed in.
 * ============================================================ */

.cm-card{ margin-bottom:20px; padding:0; overflow:hidden; }

.cm-h{ padding:16px 20px; border-bottom:1px solid var(--line); }
.cm-h-title{ font-weight:600; font-size:15px; color:var(--ink); }
.cm-sub{ font-size:12px; color:var(--ink-soft); margin-top:3px; }

.cm-scroll{ overflow-x:auto; padding:20px; }

/* width:auto + margin:0 defeat the global table{width:100%} — without
 * this the empty corner cell absorbs the slack and right-shifts the grid. */
.cm-table{
  width:auto; margin:0;
  border-collapse:separate; border-spacing:3px;
  table-layout:auto;
}
.cm-table th,
.cm-table td{ padding:0; }

.cm-ava{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
}

.cm-corner{ width:1px; }

.cm-colh{ padding:0 0 10px; text-align:center; vertical-align:bottom; }
.cm-colh-name{
  display:block; font-size:10.5px; font-weight:600;
  color:var(--ink-soft); margin-top:5px;
}

.cm-rowh{ padding:0 16px 0 0; text-align:right; white-space:nowrap; }
.cm-rowh-name{
  font-weight:600; font-size:13px; color:var(--ink);
  margin-left:10px; vertical-align:middle;
}

.cm-cell{
  width:52px; height:52px; text-align:center; vertical-align:middle;
  cursor:pointer; border-radius:11px; transition:background .12s;
}
.cm-cell:hover{ background:var(--panel-2); }
.cm-cell.on:hover{ background:var(--accent-soft); }

.cm-dot{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--line); background:transparent;
  vertical-align:middle; transition:all .12s;
}
.cm-cell:hover .cm-dot{ border-color:var(--accent); }
.cm-cell.on .cm-dot{
  width:22px; height:22px;
  border-color:var(--accent); background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}

.cm-x{
  width:52px; height:52px; border-radius:11px;
  background:repeating-linear-gradient(-45deg,transparent,transparent 5px,
    var(--line-soft) 5px,var(--line-soft) 6px);
}

.cm-foot{
  display:flex; align-items:center; gap:20px;
  padding:12px 20px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-soft);
}
.cm-leg{ display:inline-flex; align-items:center; gap:7px; }
.cm-leg-dot{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid var(--line);
}
.cm-leg-dot.on{ border-color:var(--accent); background:var(--accent); }
.cm-foot-count{
  margin-left:auto; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums;
}