/* ================================================================
   PMP 十五至尊图 — 矩阵表格样式
   ================================================================ */

/* ---- Matrix Container ---- */
.matrix-container {
  padding: 0;
  overflow-x: auto;
}

/* ---- Matrix Table ---- */
.matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  table-layout: fixed;
}

.matrix-table th,
.matrix-table td {
  border: 1px solid var(--color-border);
  padding: 10px 8px;
  vertical-align: middle;
  font-size: .85rem;
}

/* Knowledge area first column */
.matrix-table .col-ka {
  width: 130px;
  min-width: 110px;
  text-align: center;
  font-weight: 600;
  background: #fafbfc;
  position: sticky;
  left: 0;
  z-index: 1;
}
.col-ka.hard-skill { border-left: 4px solid var(--color-hard); }
.col-ka.soft-skill { border-left: 4px solid var(--color-soft); }

.ka-name {
  display: block;
  font-size: .9rem;
  margin-bottom: 2px;
}
.ka-count {
  font-size: .7rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Process group header row */
.matrix-table .col-pg {
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  padding: 14px 10px;
  color: #fff;
}
.col-pg.initiating   { background: var(--color-init);   }
.col-pg.planning     { background: var(--color-plan);    }
.col-pg.executing    { background: var(--color-exec);    }
.col-pg.monitoring   { background: var(--color-monitor); }
.col-pg.closing      { background: var(--color-close);   }

.pg-count {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  opacity: .85;
  margin-top: 2px;
}

/* Cell */
.cell {
  text-align: center;
  transition: var(--transition);
  cursor: default;
  position: relative;
}
.cell.has-content {
  cursor: pointer;
  background: #f8fafd;
}
.cell.has-content:hover {
  background: var(--color-primary-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.cell.has-content.search-highlight {
  background: #fef3c7;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245,158,11,.3);
  z-index: 1;
}
.cell.empty {
  background: #f9fafb;
  color: #d1d5db;
  cursor: default;
}

.cell-link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  font-size: .78rem;
  line-height: 1.5;
  padding: 2px 0;
}
.cell-link:hover { color: var(--color-primary); }

.process-dot {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-right: 3px;
  vertical-align: middle;
  opacity: .5;
}

/* ---- Legend bar ---- */
.legend-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 16px;
  padding: 0 4px;
  font-size: .78rem;
  color: var(--color-text-muted);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
}

/* Process count row */
.matrix-table .row-total {
  font-weight: 600;
  background: #fafbfc;
}
.matrix-table .row-total td {
  text-align: center;
  font-size: .85rem;
  padding: 10px;
}